Convertisseur de codes couleur
Les couleurs en développement web peuvent être spécifiées dans plusieurs formats : hex, RGB, HSL et couleurs nommées. Cet outil convertit entre tous les formats, affiche un aperçu visuel, calcule les ratios de contraste pour l'accessibilité et génère des palettes de couleurs complémentaires.
Specifications
Cas d'utilisation courants
- Convertir les couleurs hex fournies par les designers en HSL pour une manipulation plus facile
- Vérifier si la couleur du texte respecte les normes d'accessibilité WCAG
- Générer des palettes de couleurs pour la conception d'interfaces
- Déboguer les valeurs de couleur CSS qui ne s'affichent pas comme prévu
- Trouver l'équivalent hex des couleurs CSS nommées
Fonctionnalites
- Analyser hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA et couleurs nommées
- Convertir instantanément entre tous les formats de couleur
- Sortie HEX8 (hexadécimal 8 chiffres avec alpha)
- Aperçu visuel de la couleur avec bascule fond clair/foncé
- Aperçu de texte d'exemple sur fonds blanc et noir
- Calculer le ratio de contraste WCAG par rapport au noir et au blanc
- Classification couleur claire/foncée
- Générer des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques
- Afficher la luminance et les recommandations d'accessibilité
Exemples
Conseils
- HSL est souvent plus facile à utiliser : H est la teinte, S la saturation, L la luminosité.
- Pour un texte accessible, visez un ratio de contraste d'au moins 4.5:1 (WCAG AA).
- Le format hex 8 chiffres (#RRGGBBAA) inclut la transparence alpha.
- CSS4 introduit de nouveaux espaces colorimétriques comme oklch() pour une meilleure uniformité perceptuelle.
Comprendre Convertisseur de codes couleur
Les valeurs de couleur CSS définissent les couleurs pour le style web en utilisant plusieurs systèmes de notation. Le plus courant est l'hexadécimal (#RRGGBB), où chaque paire de chiffres hex représente les canaux rouge, vert et bleu de 00 (0) à FF (255). Le raccourci #RGB double chaque chiffre (#F00 est égal à #FF0000). La forme à 8 chiffres #RRGGBBAA ajoute un canal de transparence alpha.
Les notations fonctionnelles offrent une spécification de couleur plus intuitive. RGB (rgb(255, 0, 0)) spécifie les canaux en entiers de 0 à 255 ou en pourcentages. HSL (hsl(0, 100%, 50%)) utilise la teinte (roue chromatique de 0 à 360 degrés), la saturation (0-100%) et la luminosité (0-100%), que de nombreux designers trouvent plus intuitive pour créer des palettes et ajuster les couleurs. RGB et HSL prennent tous deux en charge la transparence alpha avec rgba() et hsla() ou la syntaxe moderne rgb(255 0 0 / 50%).
L'accessibilité des couleurs est une préoccupation critique en développement web. WCAG 2.1 définit des ratios de contraste minimaux : 4.5:1 pour le texte normal (Niveau AA), 3:1 pour le texte large et 7:1 pour un contraste amélioré (Niveau AAA). Un contraste insuffisant rend le texte difficile ou impossible à lire pour les utilisateurs ayant une vision réduite ou des déficiences de vision des couleurs.
CSS prend également en charge 148 couleurs nommées (comme rebeccapurple, cornflowerblue, tomato), le mot-clé currentColor et des espaces colorimétriques plus récents comme HWB (teinte-blancheur-noirceur), LAB, LCH et OKLCH qui offrent une manipulation perceptuellement uniforme des couleurs. Les espaces plus récents sont particulièrement utiles pour générer des palettes harmonieuses et des dégradés lisses.
Hex (#FF0000) et RGB (rgb(255,0,0)) spécifient tous deux les valeurs des canaux rouge, vert et bleu — hex utilise la base 16 tandis que RGB utilise des entiers décimaux. HSL (hsl(0,100%,50%)) représente la couleur en utilisant la teinte (la couleur elle-même sur une roue de 0 à 360 degrés), la saturation (intensité) et la luminosité (brillance), que de nombreux développeurs trouvent plus intuitive pour créer des variations. Les trois formats peuvent représenter les mêmes couleurs, mais HSL facilite la production de variantes plus claires, plus foncées ou plus discrètes en ajustant une seule valeur.
Le canal alpha contrôle la transparence sur une échelle de 0 (entièrement transparent) à 1 (entièrement opaque). En notation hex, l'alpha est ajouté comme deux chiffres supplémentaires — #FF000080 représente un rouge transparent à 50% (80 hex = 128 décimal). En notation fonctionnelle, la syntaxe est rgba(255,0,0,0.5) ou la forme moderne rgb(255 0 0 / 50%). La transparence alpha est essentielle pour les superpositions, les filigranes et les éléments d'interface en couches. Pour la conformité WCAG, le Niveau AA exige un ratio de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte large (gras 18px+ ou normal 24px+), tandis que le Niveau AAA exige 7:1 pour le texte normal et 4.5:1 pour le texte large. Les éléments non textuels comme les icônes, bordures et contrôles de formulaire nécessitent un contraste d'au moins 3:1 par rapport aux couleurs adjacentes.
LAB et OKLCH sont des espaces colorimétriques perceptuellement uniformes où des changements numériques égaux produisent des différences de couleur visuellement égales, les rendant supérieurs pour la génération de palettes et de dégradés lisses. OKLCH (Luminosité, Chroma, Teinte) est particulièrement utile en CSS car l'ajustement de la luminosité produit des résultats naturels et prévisibles. Les deux sont pris en charge dans le CSS moderne avec les fonctions oklch() et lab().