CSS benoemde kleuren
Doorzoekbare referentie voor alle 147 CSS benoemde kleuren. Klik op een swatch om de naam te kopiëren; sorteer op naam, tint of lightness.
Wat zijn CSS benoemde kleuren?
CSS benoemde kleuren zijn een vaste set van 147 keywords — zoals tomato, aliceblue, rebeccapurple — die je overal kunt gebruiken waar een CSS-kleur wordt verwacht, in plaats van een hex-code. Ze worden door elke moderne browser onderschreven, geheugen-vriendelijk om te lezen en historisch geworteld in vroege X Window-paletten en Sinclair Paints-catalogi uit de jaren 80.
Hoe gebruik je deze referentie
Typ in het zoekvak om te filteren op naam (probeer blue, dark of red) of op hex (probeer ff). Zet het sorteer-dropdown op tint om naar een specifieke schaduw te zoeken, of op lightness om donkere of lichte sets te vinden. Klik op een swatch om de CSS-naam naar je klembord te kopiëren.
Wanneer benoemde kleuren gebruiken
Benoemde kleuren zijn geweldig voor snelle prototypes, README-badges, demo-code en elke context waar exacte merkfideliteit niet nodig is. Ze zijn niet geweldig voor productie-design-systems — de exacte hex-waarden zitten vast en passen zelden bij een merkpalet. Voor productie gebruik je liever een hex-code of CSS custom property die je doelbewust hebt gekozen.
Waar de namen vandaan komen
De 147 namen gaan terug naar het X Window System en zijn rgb.txt-bestand uit de late jaren 80, dat zelf namen leende uit een Sinclair Paints-catalogus en diverse andere bronnen. De CSS Working Group nam de set in CSS3 over. Sommige namen klinken vandaag vreemd (papayawhip, blanchedalmond, peachpuff) — ze zijn artefacten van die catalogus-erfenis. rebeccapurple is de enige toevoeging na CSS3.
Kleurgroepen in het benoemde-kleur-palet
Roden & roze: red, crimson, salmon, lightcoral, hotpink, deeppink, pink en familie. Oranjes & bruinen: orange, darkorange, coral, tomato, chocolate, sienna. Gelen: yellow, gold, khaki, lemonchiffon, papayawhip. Groenen: green, lime, forestgreen, seagreen, olive, teal. Blauwen: blue, navy, royalblue, dodgerblue, steelblue, skyblue, aliceblue. Paarse: purple, violet, magenta, orchid, plum, rebeccapurple. Neutrals: black, white, gray/grey, silver, lightgray, dimgray, gainsboro, whitesmoke.
Veelgestelde vragen
Waarom zijn er 147 namen als Wikipedia 140 lijst?
gray als grey, darkgray en darkgrey enzovoort. Het cijfer 140 telt elke kleur één keer en negeert de US/UK-spellingsdoubletten.Is aqua hetzelfde als cyan?
#00FFFF. Hetzelfde voor fuchsia en magenta (#FF00FF). De duplicaten bestaan omdat CSS namen erfde uit twee verschillende bronnen (de oude X11-set en de HTML 4.01-set).Mag ik deze in HTML-attributen als bgcolor gebruiken?
bgcolor is een verouderd HTML-attribuut; gebruik in plaats daarvan CSS. Moderne HTML5 color-input-velden en het SVG-attribuut fill accepteren ook benoemde kleuren.Wat is rebeccapurple en waarom heeft het iemands naam?
rebeccapurple (#663399) werd in 2014 aan de CSS-spec toegevoegd ter herinnering aan Rebecca Meyer, dochter van web-standards-pionier Eric Meyer, die op zes-jarige leeftijd overleed. De CSS Working Group erkende daarmee zowel haar persoon als de familie.Zijn benoemde kleuren trager dan hex-codes?
#fff naar #ffffff resolven. Geen prestatieverschil tijdens runtime.Kan ik mijn eigen benoemde kleuren toevoegen?
:root { --brand-tomato: #FF6347; } en daarna color: var(--brand-tomato);. Onze kleurharmonie-generator levert kant-en-klare custom-property-blokken.