HTML-kleurnamen: alle 148 met HEX, RGB, HSL en OKLCH | We.Inc
Alle 148 CSS- en HTML-kleurnamen met HEX-, RGB-, HSL- en OKLCH-codes, contrast op wit en zwart, de dichtstbijzijnde Tailwind-class, en sorteren op tint, lichtheid of kleurfamilie.
HTML-kleurnamen
CSS definieert 148 kleurnamen, van aliceblue tot yellowgreen, en elke browser begrijpt ze in HTML en CSS. Negen ervan zijn een tweede schrijfwijze van een andere naam, zoals grey voor gray en cyan voor aqua, dus er zijn 139 verschillende kleuren. De tabel hieronder geeft voor elke kleur de HEX-, RGB-, HSL- en OKLCH-waarden, het tekstcontrast en de dichtstbijzijnde Tailwind-class.
Feiten over benoemde kleuren
Vraag
Antwoord
Hoeveel namen?
148 (139 verschillende kleuren)
Hoofdlettergevoelig?
Nee: Red, RED en red zijn hetzelfde
Waar gedefinieerd?
CSS Color Module Level 4
Nieuwste naam
rebeccapurple (#663399), toegevoegd in 2014
Zoek op naam of HEX, filter op kleurfamilie, sorteer op tint, lichtheid of naam, en kopieer elke waarde met één klik. Elke rij toont ook of zwarte of witte tekst leesbaar is op die kleur en welke Tailwind-kleur het dichtst in de buurt komt.
Typ een deel van een naam of een HEX-code in het zoekvak om de tabel te filteren.
Kies een familie, zoals Blauw of Bruin, om alleen die kleuren te zien. Families zijn gegroepeerd op waargenomen tint.
Sorteer op naam, op tint (om de kleuren als spectrum te zien) of op lichtheid (van donker naar licht).
Klik op een waarde om haar te kopiëren. De contrastkolommen tonen de verhouding voor witte en voor zwarte tekst op die kleur.
Benoemde kleuren zijn handig voor prototypes en voorbeelden, maar een echt ontwerp heeft meestal exacte merkwaarden nodig. Vervang namen vóór de lancering door HEX of custom properties.
Sommige namen zijn misleidend: darkgray (#A9A9A9) is lichter dan gray (#808080), en lightgoldenrodyellow is eerder bleek crème dan geel.
Gebruik transparent en currentColor naast de namen. Het zijn ook CSS-keywords, maar ze horen niet bij de 148 omdat het geen vaste kleuren zijn.
Controleer het contrast voordat u een benoemde kleur voor tekst gebruikt. Veel felle kleuren, zoals yellow, gold en lime, halen het niet op een witte achtergrond.
Veelgestelde vragen
Hoeveel HTML-kleurnamen zijn er?
Er zijn 148 benoemde kleuren in CSS Color Module Level 4, die HTML gebruikt. Negen paren zijn aliassen voor dezelfde kleur: aqua en cyan, fuchsia en magenta, en zeven namen die met gray of grey gespeld kunnen worden, zoals darkgray en darkgrey. De lijst beschrijft dus 139 verschillende kleuren.
Werken kleurnamen in elke browser?
Ja. Alle 148 namen worden door elke huidige browser ondersteund. De oorspronkelijke 16 namen uit HTML 4, zoals red, navy en teal, werken al tientallen jaren; de rest komt uit de X11-kleurenlijst en wordt ook al lang ondersteund.
Waarom is darkgray lichter dan gray?
De namen komen uit twee verschillende bronnen. gray werd in HTML gedefinieerd op 50% lichtheid (#808080), terwijl darkgray uit de oudere X11-kleurenlijst komt, waar het #A9A9A9 was. Toen de lijsten werden samengevoegd, bleven beide waarden zoals ze waren.
Wat is rebeccapurple?
Het is #663399, in 2014 aan CSS toegevoegd ter nagedachtenis aan Rebecca Meyer, de dochter van CSS-auteur Eric Meyer. Het is de meest recente kleurnaam die aan CSS is toegevoegd.
Moet ik kleurnamen of HEX-codes gebruiken?
Gebruik voor echt ontwerpwerk HEX-, RGB-, HSL- of OKLCH-waarden, bij voorkeur opgeslagen als custom properties, omdat namen maar 148 vaste punten dekken. Namen zijn prima voor snelle tests, documentatie en lesgeven, waar leesbaarheid belangrijker is dan precisie.
Waar de namen vandaan komen
HTML 4 definieerde 16 basiskleurnamen: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal en aqua. Browsers hadden ook een veel langere lijst overgenomen uit het X Window System, en CSS3 maakte die lijst officieel. CSS Color Level 4 voegt rebeccapurple toe en laat de rest ongewijzigd.
Omdat de X11-namen door mensen zijn gekozen en niet met een formule, zijn ze ongelijk verdeeld. Er zijn veel bijna-witte tinten en meerdere bijna identieke groenen, terwijl sommige tinten helemaal geen naam hebben. Als u de tabel op tint sorteert, ziet u de gaten duidelijk.
De extra kolommen lezen
OKLCH beschrijft een kleur als lichtheid, chroma (hoe kleurrijk ze is) en tint, in een ruimte die zo is ontworpen dat gelijke stappen er gelijk uitzien. Dat is handig om paletten te bouwen vanuit een benoemde kleur, omdat alleen de lichtheid veranderen de tint hetzelfde laat ogen.
De contrastkolommen gebruiken de WCAG 2-formule. Voor gewone lopende tekst is 4.5:1 of meer nodig en voor grote tekst 3:1. De Tailwind-kolom noemt de class uit het standaardpalet van Tailwind die er het meest op lijkt, met een verschilgetal: onder 2 is het verschil nauwelijks te zien.
Naam
HEX
RGB
HSL
OKLCH
Op wit
Op zwart
Dichtstbijzijnde Tailwind
Rood
Roze
Oranje
Geel
Bruin
Groen
Cyaan
Blauw
Paars
Wit
Zwart en grijs
Kopiëren
Alle 148 in één oogopslag, op tint
Alle 148 kleurnamen
Zoek op naam of HEX
Sorteren op
Naam
Tint (spectrum)
Lichtheid (donker naar licht)
{n} getoond
· {v} gekopieerd
Kleurfamilie
Alle
Benoemde kleuren in CSS en HTML
Staal
verschil {d}
Groene contrastwaarden halen 4.5:1, genoeg voor lopende tekst. Het Aa-voorbeeld gebruikt zwart of wit, afhankelijk van wat beter leesbaar is.