Hexcode: zes tekens die precies vastleggen welke kleur je bedoelt
Kleur is de meest besproken en slechtst vastgelegde afspraak in een huisstijl. Iedereen weet dat het bedrijf blauw is. Niemand weet welk blauw. Op de folder staat een andere tint dan op de website. En de bestelbus is weer net iets donkerder. Dat komt doordat er over kleur wordt gepraat in woorden.
Een hexcode maakt daar een einde aan. Zes tekens en er is geen discussie meer mogelijk.
Bij Dietistenpraktijk TOV heb ik dat vanaf het begin vastgelegd. Ik verzorgde daar de huisstijl, het webdesign en de zoekoptimalisatie.
Er is een kleurenpalet van vier huisstijlkleuren met bijbehorende codes. Die staan op papier en in de website op een plek. Wil de praktijk over twee jaar drukwerk laten maken, dan geeft ze die codes door. Geen gedoe met bijna hetzelfde blauw.
Zes tekens die precies vastleggen welke kleur je bedoelt.
Wat is een hexcode?
Een hexcode is een kleurcode die begint met een hekje, gevolgd door zes tekens. Bijvoorbeeld hekje 001D4D.
Die tekens zijn hexadecimaal. Ze lopen van nul tot negen en daarna van A tot F. Zo kun je met twee tekens tweehonderdzesenvijftig waarden aangeven.
Hoe je hem leest
De zes tekens vormen drie paren. Het eerste paar is rood, het tweede groen, het derde blauw.
Hekje FF0000 is dus maximaal rood en verder niets. Hekje 000000 is zwart, hekje FFFFFF is wit. Zijn alle drie de paren gelijk, dan krijg je altijd een grijstint.
Dat is een handig weetje. Zie je hekje 888888, dan weet je meteen dat het grijs is zonder het te hoeven openen.
Hex of RGB?
Het is dezelfde informatie in een andere notatie. RGB schrijft dezelfde kleur als drie getallen tussen nul en tweehonderdvijfenvijftig.
Hex is korter en daarom gebruikelijk in CSS en in ontwerpprogramma’s. RGB is handiger als je met doorzichtigheid werkt, want daar komt een vierde waarde bij.
Voor drukwerk gelden weer andere systemen. Bij het kleur omzetten naar drukwerk verschuift een kleur bijna altijd iets. Vraag je drukker daarom om de bijbehorende waarden en leg die naast je hexcodes vast.
Hoeveel kleuren heb je nodig?
Minder dan de meeste huisstijlen bevatten. Ik werk met een vaste opzet.
Mijn standaardpalet
Een hoofdkleur voor koppen en vlakken.
Een accentkleur, alleen voor knoppen en links.
Een tekstkleur, meestal een zeer donkere tint.
Een rustige achtergrondkleur.
Een hulpkleur voor randen en scheidingslijnen.
Die accentkleur is de belangrijkste regel. Gebruik je hem ook voor kopjes en iconen, dan verliest hij zijn betekenis als klikkleur.
Contrast controleren
Een kleur kan prachtig zijn en toch onbruikbaar. Lichtgrijze tekst op wit leest voor veel mensen niet.
Bij het contrast berekenen houd ik minimaal 4,5 staat tot 1 aan voor gewone tekst. Voor grote koppen mag het 3 staat tot 1 zijn. Er zijn gratis hulpmiddelen die dat voor je uitrekenen.
Doe die controle voordat je huisstijl vaststaat, niet erna. Een accentkleur die te licht is, zit je jaren dwars. Meer daarover lees je bij accessibility.
Waar je ze vastlegt
Op een plek, en van daaruit overal. Bij het kleuren vastleggen zet ik ze als benoemde waarden in de opmaak. Dus niet los in elk blok.
Wil je later een tint bijstellen, dan verander je een regel en schuift je hele site mee. Doe hetzelfde in je Figma ontwerp en in je design system. Dan gebruiken papier en scherm dezelfde bron.
Een verkorte notatie
Soms zie je een code van drie tekens in plaats van zes. Dat is een verkorting waarbij elk teken verdubbeld wordt.
Hekje F00 is dus hetzelfde als hekje FF0000. Handig om te herkennen, maar ik schrijf zelf altijd de volledige zes tekens. Dat voorkomt verwarring bij iemand die het overneemt.
Kleur alleen is nooit genoeg
Gebruik kleur niet als enige drager van betekenis. Een rode rand om een fout veld ziet iemand met kleurenblindheid niet.
Zet er dan ook een tekst of een pictogram bij. Datzelfde geldt voor links in je lopende tekst. Die verdienen een onderstreping en niet alleen een andere letterkleur.
Meer vragen over Hexcode
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een hexcode?
Hoe lees je een hexcode?
Wat is het verschil tussen hex en RGB?
Hoeveel kleuren heeft een huisstijl nodig?
Hoe controleer je het contrast van je kleuren?
Waar leg je je kleuren vast op je website?
Wat is een hexcode?
De zes tekens vormen drie paren. Het eerste paar staat voor rood, het tweede voor groen en het derde voor blauw.
Elk paar loopt van 00 tot FF, dus van niets tot maximaal. Hekje FF0000 is daarmee maximaal rood en verder niets.
Hekje 000000 is zwart, want alle drie de kleuren staan uit. Hekje FFFFFF is wit, want alle drie staan maximaal open.
Zijn alle drie de paren aan elkaar gelijk, dan krijg je altijd een grijstint. Dat is een handig weetje: zie je hekje 888888, dan weet je meteen dat het grijs is zonder het te openen.
Soms zie je een code van drie tekens. Dat is een verkorte notatie waarbij elk teken verdubbeld wordt. Hekje F00 is dus hetzelfde als hekje FF0000.
Je hoeft dit niet uit je hoofd te kennen. Het helpt vooral om te herkennen wanneer twee codes bijna maar niet helemaal hetzelfde zijn. Dat verschil van een teken is precies waar huisstijlen op stuklopen.
Hoe lees je een hexcode?
Een hexcode is een kleurcode die begint met een hekje, gevolgd door zes tekens. Bijvoorbeeld hekje 001D4D.
Die tekens zijn hexadecimaal. Dat betekent dat ze lopen van nul tot negen en daarna doorgaan met A tot F. Zo kun je met twee tekens tweehonderdzesenvijftig waarden aangeven.
Het nut is precisie. Kleur is de meest besproken en slechtst vastgelegde afspraak in een huisstijl. Iedereen weet dat het bedrijf blauw is, niemand weet welk blauw.
Daardoor staat op de folder een andere tint dan op de website, en is de bestelbus weer net iets donkerder. Dat komt doordat er over kleur wordt gepraat in woorden.
Met zes tekens is er geen discussie meer mogelijk. Je geeft de code door en iedereen krijgt exact dezelfde kleur.
Leg je codes vast op een plek waar iedereen bij kan. Een document in je merkmap volstaat, mits het ook echt wordt gebruikt. Zonder vaste plek gokt iedereen er over een jaar weer naar.
Wat is het verschil tussen hex en RGB?
Het is dezelfde informatie in een andere notatie. RGB schrijft dezelfde kleur als drie getallen tussen nul en tweehonderdvijfenvijftig.
Hex is korter en daarom gebruikelijk in CSS en in ontwerpprogramma’s. RGB is handiger als je met doorzichtigheid werkt, want dan komt er een vierde waarde bij.
Je kunt ze onderling omrekenen, en elk ontwerpprogramma doet dat automatisch. Je hoeft dus niets uit je hoofd te weten.
Voor drukwerk gelden weer andere systemen. Een beeldscherm maakt kleur met licht, een drukpers met inkt. Daardoor verschuift een kleur bij het omzetten bijna altijd iets.
Vraag je drukker daarom om de bijbehorende waarden en leg die naast je hexcodes vast. Dan heb je een merkkleur die op elk medium klopt.
Vraag je drukker om de bijbehorende drukwaarden. Dan heb je een merkkleur die op scherm en op papier hetzelfde oogt. Leg beide waarden naast elkaar vast in hetzelfde document. Zo weet je zeker dat je merk overal dezelfde indruk maakt.
Hoeveel kleuren heeft een huisstijl nodig?
Minder dan de meeste huisstijlen bevatten. Ik werk met een vaste opzet van vijf.
Een hoofdkleur voor koppen en vlakken. Een accentkleur, alleen voor knoppen en links. Een tekstkleur, meestal een zeer donkere tint in plaats van zuiver zwart.
Daarnaast een rustige achtergrondkleur en een hulpkleur voor randen en scheidingslijnen.
Die accentkleur is de belangrijkste regel van het hele palet. Gebruik je hem ook voor kopjes, iconen en achtergronden, dan verliest hij zijn betekenis als klikkleur.
Je bezoeker leert onbewust dat die ene kleur betekent: hier kun je klikken. Verdun je dat, dan moet hij weer zoeken. Leg die afspraak dus vast in je design system.
Houd je palet klein en streng. Elke extra kleur die je toevoegt, verzwakt de betekenis van de kleuren die je al had. Vijf kleuren is voor vrijwel elk bedrijf ruim voldoende. Schrijf er ook bij waarvoor je elke kleur gebruikt, niet alleen welke het is. Dan weet een volgende ontwerper meteen wat de bedoeling was.
Hoe controleer je het contrast van je kleuren?
Met een gratis contrastchecker. Je vult twee hexcodes in en krijgt een verhouding terug.
Voor gewone tekst houd ik minimaal 4,5 staat tot 1 aan. Voor grote koppen mag het 3 staat tot 1 zijn, want die lees je makkelijker.
Een kleur kan prachtig zijn en toch onbruikbaar. Lichtgrijze tekst op wit leest voor veel mensen simpelweg niet, zeker niet op een telefoon in de zon.
Doe die controle voordat je huisstijl vaststaat, niet erna. Een accentkleur die te licht is, zit je jaren dwars. Je kunt hem dan alleen nog donkerder maken of er zwarte tekst op zetten.
Controleer ook je knoppen en je foutmeldingen apart. Juist daar wordt kleur gebruikt om betekenis over te brengen. Meer daarover lees je bij accessibility.
Doe die contrastcontrole voordat je huisstijl vaststaat. Een accentkleur die te licht is, zit je daarna jarenlang dwars. Test het ook op een telefoon in fel daglicht, dat is de strengste situatie.
Weet jij precies welke kleurcodes bij je merk horen, of gokt iedereen ernaar? Stuur me je website via het formulier hieronder. Ik haal de gebruikte codes eruit, controleer het contrast en zet ze voor je op een rij. Dan heb je een palet dat je kunt doorgeven aan iedereen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Hexadecimale kleurcode, kleurcode, hex
