Hexcode

Je opent een website en ziet precies die warme oranjetint die je ook op de visitekaartjes van dat bedrijf ziet. Toeval? Nee. Achter elke kleur op een scherm zit een hexcode: een code van zes tekens die één specifieke tint vastlegt, ongeacht scherm, browser of apparaat. Voor elke huisstijl laten maken is de hexcode het fundament waarop kleurconsistentie rust.

De verfpot van het internet

Stel je voor dat een schilder niet "blauw" zegt maar "verfpot 4B7BE5". Elke schilder in de wereld pakt dan precies hetzelfde blauw. Zo werkt een hexcode. De code bestaat uit een hekje (#) gevolgd door zes tekens uit het hexadecimale stelsel: de cijfers 0-9 en de letters A-F.

Die zes tekens zijn drie paar. Het eerste paar staat voor rood, het tweede voor groen, het derde voor blauw. Elke component loopt van 00 (niets) tot FF (maximaal). #FF0000 is daarmee zuiver rood, #0000FF zuiver blauw en #000000 zwart. #FFFFFF is wit, want alle drie kleuren op maximum geeft samen wit licht.

Neem #FF4D26. FF = maximaal rood. 4D = een beetje groen. 26 = weinig blauw. Uitkomst: een fel oranje. Dat is de exacte tint van het Laanify-logo, en ze ziet er op een iPhone, een Windows-laptop en een 4K-monitor altijd hetzelfde uit.

Geen hexcode? Dan krijg je drie verschillende blauwen

Een webdesign -project zonder vaste hexcodes loopt vroeg of laat fout. Je ontwerper kiest een kleur op gevoel, je socialmedia-manager pakt een andere tint uit het hoofd, en de drukker gebruikt weer een andere waarde voor de folders. Na zes maanden zijn er vier versies van je merkblauw in omloop.

Dat is meer dan een esthetisch probleem. Kleurvariatie wekt onbewust twijfel: is dit wel hetzelfde bedrijf? Onderzoek naar merkherkenning wijst steeds uit dat kleurconsistentie meer vertrouwen opwekt dan welke slogan dan ook. Bezoekers die twijfelen, klikken weg, en dat is slecht voor je conversieratio .

Met één set hexcodes in je huisstijlgids stop je die drift meteen. Iedereen die iets voor je maakt, van banner tot bestelknop, werkt met dezelfde codes.

Zo werk je met hexcodes in de praktijk

Voor website laten maken gebruik je de hexcode rechtstreeks in CSS:

h1 {
  color: #FF4D26;
}

Weet je je hexcode niet? Drie manieren om hem te achterhalen:

• Kleurenkiezer in je browser: open de developer tools (F12 in Chrome of Firefox), klik op Inspect en klik op een gekleurd element. De color-picker toont de hexcode.
• Online tool: upload een screenshot of afbeelding op imagecolorpicker.com en klik op de kleur. Je ziet de hexcode meteen.
• Figma of Adobe XD: klik op een element in je ontwerp. Het eigenschappen-paneel rechtsboven toont de hexcode direct.

Heb je een logo laten ontwerpen ? Vraag dan altijd om een huisstijlhandboek of merkgids met daarin je hexcodes. Een serieuze ontwerper levert die standaard. Ontbreekt het document? Stuur het logo-bestand in en gebruik een color-picker-tool om de codes zelf op te slaan.

Voor verdere bestandsformaten geldt overigens hetzelfde: SVG-bestanden slaan kleuren ook als hexcodes op, zodat ze schaalbaar blijven zonder kwaliteitsverlies.

Een merk is ook een kleur

Coca-Cola rood, Tiffany turquoise, TNT oranje. Stuk voor stuk hexcodes die zo sterk gekoppeld zijn aan een merk dat je het bedrijf herkent zonder naam of logo. Dat niveau van herkenning bouw je niet in een week, maar het begint wel met één beslissing: vastleggen welke kleur van jou is.

Je hexcode is daarvoor het startpunt. Eén code, altijd consistent, op elke plek. Wil je hulp bij het bepalen van je merkkleur en het vastleggen ervan in een complete branding ? Laanify helpt je van kleurpallet tot werkende website.

Veelgestelde vragen

Wat is het verschil tussen een hexcode en een RGB-waarde?

Beide beschrijven dezelfde kleur, maar in een andere notatie. Een hexcode schrijf je als #FF4D26. Dezelfde kleur als RGB is rgb(255, 77, 38). Webdesigners gebruiken hexcodes vaker in CSS omdat ze compacter zijn, maar browsers begrijpen beide notaties.

Kan ik mijn Pantone-kleur omzetten naar een hexcode?

Ja, maar de uitkomst is een benadering, geen exacte match. Pantone-kleuren zijn ontworpen voor drukwerk en kunnen pigmenten bevatten die schermen niet kunnen nabootsen. Converteer via pantone.com of coolors.co en vergelijk het resultaat altijd met het fysieke drukwerk voordat je de code vastlegt.

Heeft mijn bestaande logo al een hexcode?

Als het logo digitaal is gemaakt (in Illustrator, Figma of vergelijkbaar), zit de hexcode in het bronbestand. Open het bestand, klik op een kleurvlak en lees de hexcode af. Heb je alleen een PNG of JPG? Gebruik een color-picker-tool om de code te achterhalen, maar let op: JPG-compressie kan de kleur licht vervormen.

Werkt een hexcode ook voor transparante kleuren?

Standaard hexcodes (#RRGGBB) ondersteunen geen transparantie. Daarvoor gebruik je een achtcijferige variant (#RRGGBBAA) of de CSS-functie rgba(). De laatste twee tekens in #RRGGBBAA staan voor het alfakanaal: 00 is volledig transparant, FF is volledig ondoorzichtig.

Waar sla ik mijn hexcodes het beste op?

In een huisstijldocument of merkgids, samen met je logo, lettertypes en andere ontwerpkeuzes. Zet het document ergens centraal neer zodat iedereen die iets voor je maakt er direct bij kan. Een simpele PDF of Notion-pagina volstaat al.