Daltonisme vert
Daltonisme rouge
Daltonisme bleu
148 Couleurs CSS Nommées
Cliquez sur n'importe quelle couleur pour la charger dans le sélecteur. Recherchez par nom ou valeur hexadécimale.
| Aperçu | Nom | Hex | RGB |
|---|
Les 148 couleurs CSS nommées standard conformément à la spécification CSS Color Level 4.
Comment fonctionnent les codes couleur
Codes Hex
Un code couleur hexadécimal comme #FF5733 encode la couleur sous forme de trois nombres hexadécimaux à 2 chiffres : rouge (FF = 255), vert (57 = 87), bleu (33 = 51). La plage hex va de #000000 (noir) à #FFFFFF (blanc). La notation abrégée comme #F60 s'étend en #FF6600.
RGB
RGB spécifie l'intensité des lumières rouge, verte et bleue, chacune de 0 à 255. rgb(255, 0, 0) est du rouge pur ; rgb(0, 0, 255) est du bleu pur. Vous pouvez aussi spécifier l'alpha : rgba(255, 87, 51, 0,5) est semi-transparent à 50 %.
HSL
HSL (Teinte, Saturation, Luminosité) est plus intuitif : la teinte est l'angle de couleur (0°=rouge, 120°=vert, 240°=bleu), la saturation est l'intensité de la couleur (0%=gris, 100%=vif) et la luminosité est la clarté (0%=noir, 50%=normal, 100%=blanc). Idéal pour les variations de couleur par programmation.
CMYK
Utilisé en impression : Cyan, Magenta, Jaune et Clé (Noir). La conversion depuis RGB est approximative — les flux d'impression professionnels utilisent des profils ICC pour plus de précision. Les valeurs affichées sont indicatives ; vérifiez toujours avec votre imprimeur.
Exemple concret
La couleur CSS tomato est #FF6347. Décomposition : R=255 (FF), V=99 (63), B=71 (47). En HSL : teinte≈9°, saturation=100 %, luminosité=64 %. Contraste WCAG vs blanc : ~3,0:1 (échec AA pour le texte normal). Vs noir : ~7,0:1 (succès AAA). Utilisez donc le texte tomato sur des fonds sombres pour une meilleure lisibilité.
Questions fréquentes
Qu'est-ce qu'un code couleur hexadécimal ?
Un code couleur hexadécimal est un nombre hexadécimal à 6 chiffres (comme #FF5733) représentant une couleur par mélange de lumières rouge, verte et bleue. Les deux premiers chiffres sont le rouge, les deux suivants le vert, les deux derniers le bleu — chacun de 00 (aucun) à FF (plein). Les codes à 3 chiffres (#F60) sont une notation abrégée valide où chaque chiffre est doublé.
Quelle est la différence entre RGB et HSL ?
RGB mélange les valeurs de lumière rouge, verte et bleue (0–255 chacune), correspondant au fonctionnement des écrans. HSL décrit la Teinte (angle de couleur 0–360°), la Saturation (vivacité 0–100 %) et la Luminosité (clarté 0–100 %), correspondant à la perception humaine des couleurs. HSL facilite la création de variantes plus claires/sombres en ajustant simplement la valeur L.
Quel rapport de contraste WCAG est nécessaire ?
Le niveau AA de WCAG 2.1 exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt ou 14 pt gras). Le niveau AAA exige respectivement 7:1 et 4,5:1. Ces rapports s'appliquent au texte par rapport à son arrière-plan. Les éléments graphiques décoratifs et les composants d'interface inactifs sont exemptés. Utilisez le vérificateur de contraste ci-dessus pour valider vos combinaisons de couleurs.
Que sont les couleurs complémentaires, analogues et triadiques ?
Les couleurs complémentaires se situent à l'opposé de la roue chromatique (à 180°) et créent un fort contraste. Les couleurs analogues sont adjacentes (±30°) et créent des palettes harmonieuses et cohérentes. Les couleurs triadiques sont équidistantes à 120° et offrent un équilibre vibrant. Les trois types d'harmonie sont affichés dans la section « Harmonies de couleurs » ci-dessus.
La pipette fonctionne-t-elle sur tous les navigateurs ?
L'API EyeDropper est actuellement prise en charge dans Chrome 95+, Edge 95+ et Opera 81+. Elle n'est pas disponible dans Firefox ni Safari. Le bouton pipette est automatiquement masqué sur les navigateurs non pris en charge — le sélecteur de couleur principal et tous les formats de code fonctionnent dans tous les navigateurs modernes.
Que sont les couleurs CSS nommées ?
CSS définit 148 couleurs nommées — d'aliceblue à yellowgreen — que vous pouvez utiliser directement en CSS sans valeurs hex ou rgb. Elles font partie de la spécification CSS Color Level 4 et incluent des couleurs web classiques (red, blue) ainsi que de nombreux noms descriptifs (cornflowerblue, mediumaquamarine). Le tableau complet est consultable ci-dessus.