HEX, RGB en HSL kleurcodes genereren en omrekenen
Met deze kleurcode generator kies je een kleur en krijg je direct de HEX-, RGB- en HSL-notatie, een eventuele bekende CSS-kleurnaam en een complementaire kleur. Gebruik de kleurkiezer of voer een HEX-code in. De waarden kunnen afzonderlijk worden gekopieerd voor CSS, ontwerpsoftware en stijlgidsen.
Hoe werkt een HEX-kleurcode?
Een volledige HEX-code heeft de vorm #RRGGBB. De paren beschrijven rood, groen en blauw met hexadecimale waarden van 00 tot FF, gelijk aan 0 tot 255. #000000 is zwart, #FFFFFF wit en #FF0000 volledig rood. De tool accepteert ook een verkorte code van drie tekens en breidt die intern uit.
HEX is compact en veelgebruikt in CSS. Transparantie is niet opgenomen in de zes cijfers; daarvoor kun je bijvoorbeeld achtcijferige HEX of een moderne RGB-notatie met alpha gebruiken, maar deze generator toont alleen de ondoorzichtige basiskleur.
RGB voor schermkleuren
RGB combineert rood, groen en blauw als waarden van 0 tot 255. Een browser kan dezelfde kleur schrijven als rgb(59, 130, 246). Het model sluit aan bij lichtgevende schermen. De uiteindelijke waarneming hangt echter ook af van schermkalibratie, kleurprofiel, helderheid en omgevingslicht.
HSL voor kleurvariaties
HSL staat voor hue, saturation en lightness: kleurtoon in graden, verzadiging en lichtheid in procenten. Kleurtoon loopt over een cirkel van 0 tot 360 graden. HSL is praktisch wanneer je een tint wilt behouden en alleen verzadiging of lichtheid wilt aanpassen. De converter rondt de berekende HSL-waarden af, waardoor een terugconversie soms een klein verschil kan geven.
CSS-kleurnamen
De tool vergelijkt de exacte HEX-code met een ingebouwde lijst van benoemde CSS-kleuren. Alleen een exacte overeenkomst krijgt een naam. Een kleur die bijna gelijk is aan red blijft daarom naamloos. CSS-kleurnamen zijn handig voor voorbeelden, maar HEX of HSL maakt een ontwerpsysteem meestal explicieter.
Complementaire kleur berekenen
De complementaire kleur wordt gemaakt door de HSL-kleurtoon 180 graden te draaien en verzadiging en lichtheid te behouden. Dit levert een theoretische tegenkleur met sterk kleurcontrast. Het garandeert niet voldoende leescontrast voor tekst. Twee verzadigde complementen kunnen bovendien visueel trillen wanneer ze in grote vlakken naast elkaar staan.
Toegankelijk kleurgebruik
Controleer tekst-, pictogram- en focuscontrast met een WCAG-contrastchecker. Gebruik kleur niet als enige aanduiding voor fouten, succes of selectie. Test ook lichte en donkere thema's, hoverstates en verschillende vormen van kleurenblindheid. De getoonde complementaire kleur is een creatieve suggestie, geen toegankelijkheidsadvies.
Kleurcodes betrouwbaar toepassen
Kopieer de gewenste notatie en geef kleuren in CSS-variabelen betekenisvolle namen zoals --color-primary. Bewaar niet alleen losse codes, maar documenteer ook het gebruik voor tekst, achtergrond en status. Controleer kleuren op echte apparaten en in de doelbrowser; numeriek dezelfde kleur kan visueel anders worden ervaren.
Drukwerk en kleurbeheer
HEX, RGB en HSL beschrijven schermkleuren en zijn niet rechtstreeks hetzelfde als CMYK-inkten. Een drukker kan kleuren converteren via een specifiek kleurprofiel, waardoor heldere schermkleuren doffer uitvallen. Vraag voor belangrijk drukwerk om het vereiste profiel en een proef. De tool voert geen CMYK-, Pantone- of kleurprofielconversie uit.
Reacties