Noms de Couleurs CSS en Ligne
Reference complete des 148 couleurs CSS nommees - avec valeurs HEX, RGB, HSL et conversion instantanee.
Showing 148 colors
Reference gratuite
148 couleurs CSS nommees - reference complete
Les 148 couleurs
Reference complete de toutes les couleurs CSS nommees definies dans CSS Color Level 4.
HEX, RGB et HSL
Consulte l'equivalent HEX, RGB et HSL de chaque couleur nommee pour l'utiliser dans ton CSS.
Contraste WCAG
Verifie si chaque couleur respecte les exigences d'accessibilite WCAG 2.1 AA et AAA.
Copie instantanee
Clique sur n'importe quelle valeur pour la copier directement dans ton presse-papiers.
Comment ça marche
Trois étapes, sans complications
Recherche par nom de couleur ou valeur
Tape un nom de couleur CSS (ex. : 'tomato', 'rebeccapurple', 'cornflowerblue') ou sa valeur HEX/RGB pour la trouver instantanement dans le tableau de reference.
Consulte les valeurs equivalentes
Pour chaque couleur CSS nommee, obtiens la valeur HEX a 6 chiffres, les composantes RGB (0-255), les valeurs HSL (teinte en degres, saturation et luminosite en %) et le ratio de contraste WCAG.
Copie la valeur dont tu as besoin
Clique sur n'importe quelle valeur pour la copier dans le presse-papiers. Utilise-la directement dans ton CSS, Figma, Tailwind ou n'importe quel outil de design.
FAQ
Des questions ?
La specification CSS Color Level 4 du W3C definit exactement 148 couleurs nommees, dont la speciale 'transparent' (equivalente a rgba(0,0,0,0)) et l'alias 'rebeccapurple' (ajoute en 2014 en hommage a Rebecca Meyer, fille de l'auteur CSS Eric Meyer, decedee a l'age de 6 ans). Les 146 autres noms proviennent du systeme de couleurs X11 du MIT, standardise par le W3C dans CSS2.1 (1998) et reaffirme dans CSS3. CSS definit aussi 'currentColor' et 'inherit', mais ce sont des mots-cles d'heritage plutot que de vraies valeurs de couleur, ils ne font donc pas partie des 148.
Les couleurs X11 sont issues du fichier rgb.txt du serveur X Window System (MIT X Consortium, 1985). Il contenait initialement une liste de couleurs creee par Paul Raveling de l'USC Information Sciences Institute, basee sur le systeme Resene Colours de Nouvelle-Zelande. Au fil des versions du serveur X, la liste a ete etendue et modifiee par differents contributeurs, creant des incoherences historiques (certaines couleurs ont des variantes avec et sans espace : 'dark red' vs 'darkred'). Quand le W3C a adopte ces noms pour CSS2.1, ils les ont soigneusement selectionnes pour eliminer les ambiguites, mais ont conserve des noms pittoresques comme 'blanchedalmond', 'papayawhip', 'peachpuff', 'lemonchiffon' et 'cornsilk', qui viennent de noms de desserts americains et de materiaux textiles populaires dans les annees 1980.
Les couleurs CSS nommees sont ideales pour : le prototypage rapide et le code de demonstration ou la lisibilite importe plus que la precision, le code educatif ou les noms descriptifs aident a comprendre l'intention (ex. : background: lightgray est plus lisible que background: #d3d3d3), les valeurs de debogage temporaires, et les cas ou la couleur exacte peut varier selon l'implementation du navigateur (bien qu'en pratique les navigateurs modernes soient coherents). Pour la production, les valeurs HEX ou HSL sont preferables : elles sont explicites, ne necessitent pas que le developpeur connaisse la liste des noms, et sont plus faciles a modifier par programmation. Des frameworks comme Tailwind CSS et les systemes de design modernes utilisent leurs propres palettes, pas les noms CSS standard.
Les WCAG (Web Content Accessibility Guidelines) 2.1 du W3C definissent des ratios de contraste minimaux pour un texte lisible. Le niveau AA (minimum legal dans de nombreuses juridictions) exige un ratio de 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt+ ou 14pt+ en gras). Le niveau AAA (excellence) exige 7:1 pour le texte normal. Le ratio se calcule entre la luminance relative du texte et du fond. De nombreuses couleurs CSS nommees ne satisfont pas ces exigences : 'yellow' (#FFFF00) sur fond blanc a un ratio de 1,07:1 (illisible), tandis que 'black' (#000000) sur blanc a 21:1 (maximum possible). Des couleurs comme 'navy', 'darkgreen', 'maroon' et 'midnightblue' ont un bon contraste sur blanc. Les outils d'inspection de Chrome et Firefox affichent le ratio WCAG directement lors de la selection d'un element.
CSS Color Level 4 (brouillon W3C en cours) introduit des fonctions de couleur avancees qui vont bien au-dela des 148 noms. oklch() et oklab() sont des espaces de couleur perceptuellement uniformes ou le meme delta numerique produit des variations de couleur visuellement egales (contrairement a HSL ou le meme delta de luminosite a des effets tres differents selon la teinte). La fonction color-mix() permet de melanger deux couleurs : color-mix(in oklch, blue 30%, red) produit un melange perceptuellement naturel. color-contrast() (encore en brouillon) selectionne automatiquement la couleur de plus fort contraste dans une liste. display-p3 et rec2020 permettent d'acceder au large gamut de couleurs des ecrans HDR modernes, qui offrent plus de 25% de couleurs supplementaires par rapport a sRGB. Ces fonctions sont de plus en plus supportees depuis 2022-2023.
Le 7 juin 2014, Rebecca Alicia Meyer, la fille de 6 ans d'Eric A. Meyer (co-fondateur du CSS Working Group, auteur des livres de reference CSS 'CSS: The Definitive Guide' et createur du CSS Reset), est decedee d'un glioblastome (tumeur cerebrale de grade IV). Le jour de son deces, la communaute CSS a propose de nommer la couleur #663399 (un violet qui etait sa favorite) 'rebeccapurple' en son honneur. La proposition a ete approuvee par le CSS Working Group et ajoutee a la specification CSS Color Level 4 le 14 juin 2014 sous le numero d'issue #24 du depot W3C. C'est la seule couleur CSS ajoutee pour des raisons emotionnelles et humanitaires, et la seule parmi les 148 a avoir une histoire personnelle documentee qui ne provient pas du systeme X11.
Histoire des couleurs CSS : de X11 (MIT 1985) a CSS Color Level 4, WCAG 2.1 et oklch
L'histoire des couleurs nommees en CSS debute en 1985 au laboratoire d'informatique du MIT avec le developpement du serveur X Window System. Le fichier rgb.txt de X11 R3 (publie en 1988) contenait la premiere liste standardisee de couleurs par nom pour les interfaces graphiques sous Unix et les systemes bases sur X. Cette liste a ete compilee initialement par Paul Raveling, partiellement inspire par le systeme Resene Colours de Nouvelle-Zelande, et a ete etendue par plusieurs contributeurs au fil des versions X11 R4 (1989), R5 (1991) et R6 (1994). Quand Tim Berners-Lee et le nascent consortium W3C ont commence a definir les standards CSS en 1994-1996, l'adoption du systeme de noms X11 etait le choix naturel : tous les developpeurs de l'ere Unix connaissaient deja ces noms. CSS1 (1996) ne definissait que 16 couleurs nommees (les memes 16 que HTML 3.2). CSS2.1 a etendu la liste a 147 couleurs du systeme X11, plus 'orange' deja largement utilisee. CSS Color Level 3 (2011) a officialise la liste de 147+1 noms. CSS Color Level 4 a ajoute 'rebeccapurple' en 2014, atteignant les 148 actuelles.
Les 148 couleurs CSS nommees presentent des curiosites techniques et historiques que tout developpeur web devrait connaitre. L'inconsistance la plus notable est que CSS reconnait a la fois 'grey' et 'gray' (et leurs variantes : darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, etc.) comme des couleurs identiques, heritant de l'ambiguite orthographique anglaise. Un autre cas particulier est 'lime' (#00FF00) vs 'green' (#008000) : en CSS, 'green' n'est pas le vert pur RGB mais un vert fonce a 50% d'intensite, tandis que 'lime' est le vert pur RGB. Les couleurs 'aqua' et 'cyan' sont des synonymes parfaits (#00FFFF), tout comme 'fuchsia' et 'magenta' (#FF00FF). La couleur 'rebeccapurple' a la valeur #663399, equivalente a hsl(270, 50%, 40%). Pour le developpement web accessible, les couleurs CSS nommees avec le meilleur contraste sur fond blanc sont 'black' (ratio 21:1), 'navy' (ratio 13,87:1) et 'darkgreen' (ratio 9,53:1).
Dans le contexte du developpement web moderne, les couleurs CSS nommees restent pertinentes mais doivent etre comprises dans l'ecosysteme plus large des specifications de couleur. CSS Color Level 4 introduit le modele de couleur oklch (Oklab-based Lightness Chroma Hue), qui surmonte les limitations de HSL : dans HSL, deux couleurs avec la meme luminosite L mais une teinte H differente semblent avoir une luminosite visuelle differente (le jaune parait bien plus lumineux que le bleu a la meme valeur L), tandis qu'oklch est perceptuellement uniforme. La syntaxe est oklch(lightness% chroma hue), par exemple : oklch(70% 0.25 145) pour un vert vif. Pour les projets en production avec CSS moderne : (1) definir la palette de base comme proprietes personnalisees (variables CSS) : --color-primary: oklch(60% 0.2 250) ; (2) utiliser color-mix() pour creer des variantes ; (3) n'appliquer les noms CSS qu'en fallback ou dans les prototypes. Dans Tailwind CSS 4.0 (sorti en 2025), la palette de couleurs par defaut a ete redefinie en oklch, remplacant les valeurs HEX des versions precedentes.