Colours
The NS colours are Yellow, Blue, Light blue and White. The play a vital part in the way people perceive and remember us so it’s very important to get them spot on. Make sure you use the colours that are best suited to the message you want to convey.
Once you’ve taken a scan a good starting point is to look at ns.nl as you will see these colours patterns in action.
Primary colours
Welcome to our rainbow. Yellow, Blue, Light blue and White.
Yellow
This is our main call to action colour. It is also used for functional components like the travel planner.
- HEX
- #FFC917
- RGB
- 255 / 201 / 23
- SCSS
- $ns-yellow
Blue
Blue is one of our core colours. It’s used for labels, logos, icons and headings and as background colour in certain circumstances.
- HEX
- #003082
- RGB
- 0 / 48 / 130
- SCSS
- $ns-blue
Light Blue
Can you click it? We use light blue for text links and buttons.
- HEX
- #0063D3
- RGB
- 0 / 99 / 211
- SCSS
- $ns-light-blue
White
White is used as a background colour for the navbar, footer, containers, tiles and more.
- HEX
- #FFFFFF
- RGB
- 255 / 255 / 255
- SCSS
- $ns-white
Shades of grey
The first grey is used for body text and the main grey colour within NS. All grey colours are based on that grey as a percentage and converted to HEX value.
Grey Body text
- HEX
- #070721
- RGB
- 7 / 7 / 33
- SCSS
- $ns-grey
Grey 10
- HEX
- #202037
- RGB
- 32 / 32 / 55
- SCSS
- $ns-grey-10
Grey 20
- HEX
- #39394D
- RGB
- 57 / 57 / 77
- SCSS
- $ns-grey-20
Grey 30
- HEX
- #515164
- RGB
- 81 / 81 / 100
- SCSS
- $ns-grey-30
Grey 40
- HEX
- #6A6A7A
- RGB
- 106 / 106 / 122
- SCSS
- $ns-grey-40
Grey 50
- HEX
- #838390
- RGB
- 131 / 131 / 144
- SCSS
- $ns-grey-50
Grey 60
- HEX
- #9C9CA6
- RGB
- 156 / 156 / 166
- SCSS
- $ns-grey-60
Grey 70
- HEX
- #B5B5BC
- RGB
- 181 / 181 / 188
- SCSS
- $ns-grey-70
Grey 80
- HEX
- #CDCDD3
- RGB
- 205 / 205 / 211
- SCSS
- $ns-grey-80
Grey 90 Background
- HEX
- #E6E6E9
- RGB
- 230 / 230 / 233
- SCSS
- $ns-grey-90
Grey 94
- HEX
- #F0F0F2
- RGB
- 240 / 240 / 242
- SCSS
- $ns-grey-94
Special use colours
You should use the following colours in the given circumstances.
Red Alert and error
- HEX
- #DB0029
- RGB
- 219 / 0 / 41
- SCSS
- $ns-red-alert
Green Success message
- HEX
- #009A42
- RGB
- 0 / 154 / 66
- SCSS
- $ns-green
OV-chip
- HEX
- #FF0098
- RGB
- 255 / 0 / 152
- SCSS
- $ns-ovchip
Orange Bus te vroeg
- HEX
- #FF7700
- RGB
- 255 / 119 / 0
- SCSS
- $ns-orange
Link and hover colours
The colours below are used if text is interactive or you interact with a button.
Light Blue Text link
- HEX
- #0079D3
- RGB
- 0 / 121 / 211
- SCSS
- $ns-light-blue
Light Blue 2 Button hover
- HEX
- #005CA0
- RGB
- 0 / 92 / 160
- SCSS
- $ns-light-blue-2
Light Yellow 2 Button hover
- HEX
- #FFB519
- RGB
- 255 / 181 / 25
- SCSS
- $ns-yellow-2
Transparency colours
Use these greys if you want to put a transparent colour on a background (other than white).
Grey Alpha 60%
- HEX
- #070721 (60%)
- RGBA
- 7 / 7 / 33 / 0.6
- SCSS
- $ns-grey-alpha-60
Grey Alpha 15%
- HEX
- #070721 (15%)
- RGBA
- 7 / 7 / 33 / 0.15
- SCSS
- $ns-grey-alpha-15
Grey Alpha 10%
- HEX
- #070721 (10%)
- RGBA
- 7 / 7 / 33 / 0.10
- SCSS
- $ns-grey-alpha-10
Colour accessibility
Use this tool to ensure you have the minimum colour contrast in your project as per the WCAG 2.0 guidelines helping us on our way to that AA rating. To be sure your colours are spot on check out this colour contrast checker.