Kleurnamen en Hexcodes

Vind de hex-, RGB- en HSL-waarden van elke kleurnaam, of de dichtstbijzijnde kleurnaam bij een code. Met tinten, schakeringen en WCAG-contrast voor 148 CSS-kleuren.


Typ een kleurnaam of plak een hex-, RGB- of HSL-waarde. Alle vier de formaten werken.
Wissen

Alle benoemde CSS-kleuren

Alle 148 kleurnamen die in CSS zijn ingebouwd, met hun hex- en RGB-waarden. Klik op een rij om deze hierboven te openen.

Hoe hexadecimale kleurcodes werken

Een hexcode bestaat simpelweg uit drie getallen in het zestientallig stelsel: hoeveel rood, hoeveel groen en hoeveel blauw, elk van 00 tot FF. #FFD700 betekent dus rood op volle sterkte, groen op 215 van 255 en helemaal geen blauw, wat uw oog als goud leest. Alleen de paren van twee cijfers doen ertoe, en daarom zijn #FFF en #FFFFFF allebei wit.

Hex, RGB en HSL vergeleken

Alle drie beschrijven dezelfde kleuren, ze dragen alleen andere informatie. Hex is compact en de gebruikelijke keuze in CSS. RGB geeft dezelfde getallen decimaal weer, wat handiger rekent. HSL scheidt de kleurtoon van verzadiging en lichtheid, waardoor het veel eenvoudiger is met de hand een palet op te bouwen: houd de kleurtoon aan, verander de lichtheid, en u hebt een bijpassende schakering.

Waarom contrast belangrijk is

Tekst moet zich voldoende van de achtergrond onderscheiden om leesbaar te blijven voor mensen met een beperkt gezichtsvermogen of op een gedimd scherm. De toegankelijkheidsrichtlijnen stellen een verhouding van 4,5 op 1 voor gewone tekst (AA) en 7 op 1 voor het strengere AAA-niveau. Voor grote tekst volstaat 3 op 1. Dit hulpmiddel berekent de verhouding tegenover zowel wit als zwart, zodat u meteen ziet welke u erop moet zetten.

Handig om te weten

  • CSS kent 148 benoemde kleuren, en verschillende daarvan zijn dubbel: grey en gray, en aqua en cyan, zijn identiek.
  • De verkorte hexnotatie werkt alleen als elk paar zich herhaalt, dus #FFCC00 mag als #FC0 worden geschreven maar #FFD700 kan niet worden ingekort.
  • Twee extra hexcijfers regelen de doorzichtigheid, zodat #FFD70080 goud is op ongeveer halve dekking.
  • Houd voor een palet de kleurtoon in HSL vast en varieer alleen de lichtheid. De kleuren ogen dan altijd verwant.

Veelgestelde vragen

De CSS-kleur met de naam gold is #FFD700, oftewel rgb(255, 215, 0). Het is een helder geelgoud en geen metallic tint, want een vlakke kleur kan de glans van echt goud niet nabootsen. Voor een metaalachtiger effect combineren ontwerpers het meestal met donkerder goudtinten zoals #B8860B, in CSS darkgoldenrod geheten.

Typ de naam in het vak hierboven en u krijgt de hex-, RGB- en HSL-waarden in één keer. Dit werkt voor alle 148 benoemde CSS-kleuren, en ook andersom: plak een hexcode en u ziet de dichtstbijzijnde benoemde kleur met de precieze afstand erbij.

Ze bevatten precies dezelfde informatie in een andere notatie. Hex schrijft elk van de drie kanalen als twee cijfers in het zestientallig stelsel, dus #FF7F50 is rood 255, groen 127, blauw 80. RGB schrijft diezelfde getallen decimaal als rgb(255, 127, 80). Geen van beide is nauwkeuriger; hex is in CSS alleen korter te typen.

Kleurtoon, verzadiging en lichtheid. De kleurtoon is de positie op de kleurencirkel van 0 tot 360 graden, de verzadiging geeft aan hoe levendig de kleur is, en de lichtheid loopt van zwart bij 0% tot wit bij 100%. Voor ontwerpen is dit het handigste formaat, want als u de kleurtoon aanhoudt en alleen de lichtheid wijzigt, ontstaat een reeks schakeringen die zichtbaar bij elkaar horen.

De CSS-specificatie bevat 148 benoemde kleuren, transparent meegerekend. Meerdere namen verwijzen naar identieke waarden, met name grey en gray, aqua en cyan, en magenta en fuchsia. De volledige lijst met hex- en RGB-waarden staat op deze pagina.

De toegankelijkheidsrichtlijnen vragen minimaal 4,5 op 1 voor gewone lopende tekst en 3 op 1 voor grote tekst, wat overeenkomt met niveau AA. Het strengere niveau AAA vraagt 7 op 1. Dit hulpmiddel berekent de verhouding van uw kleur tegenover wit en zwart en geeft aan welke slaagt, zodat u meteen de leesbare optie kiest.

Ja. Een hexcode van acht cijfers voegt achteraan twee alfacijfers toe, waarbij 00 volledig doorzichtig is en FF volledig dekkend. Zo is #FF000080 rood op ongeveer 50% dekking. Alle huidige browsers ondersteunen het, al is de oudere rgba()-notatie nog altijd heel gebruikelijk.

Omdat de 148 benoemde kleuren een minieme greep zijn uit de ongeveer 16,7 miljoen die een scherm kan weergeven. Valt uw waarde niet op een van die exacte punten, dan zoekt dit hulpmiddel de dichtstbijzijnde benoemde kleur door de afstand tussen beide in de RGB-ruimte te meten, en meldt het dat het om een benadering gaat en niet om een treffer.

Wat is de hexcode van een kleur?

Typ een kleurnaam en krijg in één keer de hex-, RGB- en HSL-waarden, of plak een willekeurige code om de dichtstbijzijnde benoemde CSS-kleur te vinden. Gold is #FFD700, coral is #FF7F50 en teal is #008080. Elk resultaat toont daarnaast schakeringen, tinten en de contrastverhouding tegenover zwart en wit.