Inloggen Account aanvragen

Online kleuren

Voor online toepassingen kun je uit de 17 communicatiekleuren van het Rijkshuisstijl palet kiezen met een extra palet van 7 grijstinten. Verder worden kleurrichtlijnen gegeven voor achtergrondkaders, een linkkleur, functionele kleuren bij meldingen en een focuskleur. Bij kleurcombinaties met tekst moet altijd aan de contrasteisen worden voldaan voor een goede leesbaarheid.

17 communicatiekleuren online

Je kiest 1 basiskleur met eventueel 1 of 2 lichte tinten ter ondersteuning voor de website, magazine of applicatie. Aanvullend kunnen voor achtergrondkaders, grafieken en tabellen ook tinten van een kleur worden toegepast in gradaties van 20%.
De online kleuren van de Rijkshuisstijl zijn ook als kleurstalen bibliotheek beschikbaar. De onderstaande hex- en rgb-kleurwaarden zijn opgenomen in een '.ase'-bestand dat je in Photoshop, Illustrator of Indesign kunt importeren.

paars

Rijksoverheid paars
Paars #42145f | RGB 66-20-95
Tint 1 #c6b8cf | RGB 198-184-207
Tint 2 #e3dce7 | RGB 227-220-231

violet

Rijksoverheid violet
Violet #a90061| RGB 169-0-97
Tint 1 #e5b2cf | RGB 229-178-207
Tint 2 #f2d9e7 | RGB 242-217-231

robijnrood

Rijksoverheid robijnrood
Robijnrood #ca005d | RGB 202-0-93
Tint 1 #efb2ce | RGB 239-178-206
Tint 2 #f7d9e7 | RGB 247-217-231

roze

Rijksoverheid roze
Roze #f092cd | RGB 240-146-205
Tint 1 #fadef0 | RGB 250-222-240
Tint 2 #fdeff8 | RGB 253-239-248

rood

Rijksoverheid rood
Rood #d52b1e | RGB 213-43-30
Tint 1 #f2bfbb | RGB 242-191-187
Tint 2 #f9dfdd | RGB 249-223-221

oranje

Rijksoverheid oranje
Oranje #e17000 | RGB 225-112-0
Tint 1 #f6d4b2 | RGB 246-212-178
Tint 2 #fbead9 | RGB 251-234-217

donkergeel

Rijksoverheid donkergeel
Donkergeel #ffb612 | RGB 255-182-18 
Tint 1 #ffe9b7 | RGB 255-233-183
Tint 2 #fff4dc | RGB 255-244-220

geel

Rijksoverheid geel
Geel #f9e11e | RGB 249-225-30
Tint 1 #fdf6bb | RGB 253-246-187
Tint 2 #fefbdd | RGB 254-251-221

donkerbruin

Rijksoverheid donkerbruin
Donkerbruin #673327 | RGB 103-51-39
Tint 1 #d1c1be | RGB 209-193-190
Tint 2 #e8e1df | RGB 232-225-223

bruin

Rijksoverheid bruin
Bruin #94710a | RGB 148-113-0
Tint 1 #dfd4b5 | RGB 223-212-181
Tint 2 #efeada | RGB 239-234-218

donkergroen

Rijksoverheid donkergroen
Donkergroen #275937 | RGB 39-89-55
Tint 1 #becdc3 | RGB 190-205-195
Tint 2 #dfe6e1 | RGB 223-230-225

groen

Rijksoverheid groen
Groen #39870c | RGB 57-135-12
Tint 1 #c3dbb6 | RGB 195-219-182
Tint 2 #e1eddb | RGB 225-237-219

mosgroen

Rijksoverheid mosgroen
Mosgroen #777c00 | RGB 119-124-0
Tint 1 #d6d7b2 | RGB 214-215-178
Tint 2 #ebebd9 | RGB 235-235-217

mintgroen

Rijksoverheid mintgroen
Mintgroen #76d2b6 | RGB 118-210-182
Tint 1 #d6f1e9 | RGB 214-241-233
Tint 2 #ebf8f4 | RGB 235-248-244

donkerblauw

Rijksoverheid donkerblauw
Donkerblauw #01689b | RGB 1-104-155
Tint 1 #cce0f1 | RGB 204-224-241
Tint 2 #e5f0f9 | RGB 229-240-249

hemelblauw

Rijksoverheid hemelblauw
Hemelblauw #007bc7 | RGB 0-123-199
Tint 1 #b2d7ee | RGB 178-215-238
Tint 2 #d9ebf7 | RGB 217-235-247

lichtblauw

Rijksoverheid lichtblauw
Lichtblauw #8fcae7 | RGB 143-202-231
Tint 1 #ddeff8 | RGB 221-239-248
Tint 2 #eef7fb | RGB 238-247-251

Tinten voor achtergrondkaders, grafieken en tabellen

Voor achtergrondkaders, grafieken en tabellen kunnen 7 neutrale grijstinten of tinten van een communicatiekleur in stappen van 20% worden toegepast. Voor tekstachtergrond wordt grijstint1 of communicatiekleur tint2 aanbevolen om aan de contrasteisen voor een goede leesbaarheid te voldoen.

Grijs 1 - Grijs 7

Rijksoverheid grijs 1 - 7
Grijs 1 #f3f3f3 | RGB 243-243-243
Grijs 2 #e6e6e6 | RGB 230-230-230
Grijs 3 #cccccc | RGB 204-204-204
Grijs 4 #b4b4b4 | RGB 180-180-180
Grijs 5 #999999 | RGB 153-153-153
Grijs 6 #696969 | RGB 105-105-105
Grijs 7 #535353 | RGB 83-83-83

Kleuren en contrasteisen

Voor een goede leesbaarheid zorg je bij teksten en interactieve elementen voor een goed contrast met de achtergrondkleur, zie ook digitoegankelijk kleurcontrast. Het contrast tussen 2 kleuren kun je meten met een kleur contrast checker. De Rijksoverheid houdt de AA norm aan van de WCAG.

Toegestane kleurcombinaties voor tekst kleiner dan 18 pt.

Combinaties met rijkshuisstijl kleuren van teksten kleiner dan 18 pt en de achtergrondkleur. Combinaties die aan de contrasteisen voldoen zijn groen gemarkeerd.

Toegestane kleurcombinaties voor tekst groter dan 18 pt.

Combinaties met rijkshuisstijl kleuren van teksten groter dan 18 pt en de achtergrondkleur. Combinaties die aan de contrasteisen voldoen zijn groen gemarkeerd.

Linkkleur

Een tekstlink is herkenbaar als onderstreepte tekst. Wanneer geen onderstreping aanwezig is moet de link aan 2 contrasteisen voldoen, ten opzichte van de gewone tekstkleur maar ook ten opzichte van de achtergrondkleur. Gebruik de link contrast checker om 1 geschikte linkkleur te vinden voor de hele website, magazine of applicatie.

  • Een linkkleur in het rood wordt vermeden om verwarring met foutmeldingen te voorkomen.
  • Hou ook rekening met contrasteisen bij tinten van achtergrondkaders, tabellen, grafieken, etc.
Tekstlinkkleur hemelblauw, bruin, groen en donkerblauw tussen zwarte tekst

De volgende kleuren zijn geschikt als linkkleur bij zwarte tekst op een witte achtergrond:
- hemelblauw #007bc7
- bruin #94710a
- groen #39870c
- donkerblauw #01689b

Donkerblauw #01689b behoudt bovendien voldoende contrast tussen zwarte tekst op grijs1 en tussen zwarte tekst op alle tint2 achtergrondkleuren.

Functionele kleuren bij meldingen

Met name bij formulieren is soms feedback nodig om de gebruiker te helpen bij het invullen. Een melding bestaat uit een icoon in een functionele kleur met bijpassende achtergrondtint en een helptekst. Voor de meldingen zijn rijkshuisstijliconen beschikbaar. Deze zijn niet alleen qua kleur functioneel maar ook in vorm onderscheidend. Door toenemend mobiel gebruik is het aan te bevelen de melding niet op een verzamelplek maar bij het desbetreffende invulveld te laten zien om onnodig heen en weer scrollen te voorkomen.

vormgeving meldingen: foutmelding, waarschuwing, bevestiging, toelichting

Voorbeelden van een foutmelding, een waarschuwing, een bevestiging en een toelichting. Zie voor iconen, 24 px iconen online communicatie.:

  • Foutmelding (icoonnr. 3914): achtergrond rood tint2 #f9dfdd
  • Waarschuwing (icoonnr. 3915): achtergrond donkergeel tint2 #fff4dc
  • Bevestiging (icoonnr. 3916) : achtergrond groen tint2 #e1eddb
  • Toelichting (icoonnr. 3948): achtergrond hemelblauw tint2 #d9ebf7

Focuskleur

Vanuit de toegankelijkheidseisen moet het mogelijk zijn om via de tabtoets door interactieve elementen op een webpagina te navigeren. De focuskleur maakt deze elementen zichtbaar. Meer informatie hierover volgt nog.