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. Je kunt de contrastwaarde tussen 2 kleuren meten met behulp van een kleur contrast checker. De uitkomst wordt getoetst aan de AA-norm die de Rijksoverheid hanteert.
In onderstaande kleurentabel zijn de combinaties met een goede leesbaarheid herkenbaar aan de groene bollen. Vanaf een lettergrootte van 18 pt. komen daar de combinaties met een groene cirkel bij.

Contrasten online kleuren

Kleur tekstlink

De linkkleur voor alle links is donkerblauw #01689b, en voor bezochte links is de kleur paars #4d2d8d. Om voldoende op te vallen worden tekstlinks in lopende tekst onderstreept en krijgen ze een afwijkende kleur, de linkkleur. In linklijstjes wordt een linkicoon toegevoegd in de linkkleur. De onderstreping wordt dan weggelaten. Zie voor iconen, 24 px iconen online communicatie (Externe-link: icoon 3938, etc). Beide linkkleuren voldoen aan de contrasteisen op een witte achtergrond of op grijstint1 en op alle tint2kleuren.

Wanneer geen onderstreping of linkicoon wordt toegepast moet de linkkleur aan 2 contrasteisen voldoen, ten opzichte van de gewone tekstkleur maar ook ten opzichte van de achtergrondkleur. Je kunt ​​​de link contrast checker gebruiken om te controleren of deze aan de contrasteisen voldoet. Vermijd de kleur rood om verwarring met foutmeldingen te voorkomen.

Kleurgebruik 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 betekenisvolle kleur met bijpassende achtergrondtint en een helptekst. Voor de meldingen zijn rijkshuisstijliconen beschikbaar. Plaats de melding bij het betreffende formulierveld zodat meteen duidelijk is waar de melding over gaat.

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 (icoon 3914): achtergrond rood tint2 #f9dfdd
  • Waarschuwing (icoon 3915): achtergrond donkergeel tint2 #fff4dc
  • Bevestiging (icoon 3916) : achtergrond groen tint2 #e1eddb
  • Toelichting (icoon 3948): achtergrond hemelblauw tint2 #d9ebf7

Focus outline

Webpagina’s moeten volledig te gebruiken zijn met alleen het toetsenbord. Bij navigeren via het toetsenbord is het belangrijk dat goed zichtbaar is welk onderdeel van een pagina (buttons, banners, tekstlinkjes, formuliervelden etc.) geselecteerd is. Een kaderomlijning is een goede manier om deze focus te tonen. Vermijd gekleurde kaders om lastige kleurcombinaties te voorkomen en gebruik een zwart of wit gestippelde kaderomlijning. Op deze webpagina is zo'n kaderomlijning toegepast op elk interactief element, zoals het logo. Voor meer informatie over focus, zie Digitoegankelijk