Comment ça marche
Une même couleur peut s'écrire de nombreuses façons. HEX (#RRGGBB) et RGB décrivent le mélange de rouge, vert et bleu ; HSL et HSV la décrivent par teinte, saturation et luminosité, plus intuitifs pour choisir des variantes ; et CMYK vise l'impression.
Cet outil prend une couleur en HEX, RGB ou HSL et la traduit instantanément vers tous les formats, y compris les espaces modernes de CSS Niveau 4 comme HWB, LAB, LCH, OKLab, OKLCh et les fonctions color() (Display P3, Rec. 2020, ProPhoto).
Le sélecteur visuel et les contrôles numériques permettent d'ajuster la couleur et de voir comment toutes les valeurs changent simultanément. Tout est calculé dans votre navigateur.
Exemples
#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)Le rouge pur : maximum dans le canal rouge, zéro en vert et bleu.#3b82f6rgb(59 130 246)Chaque paire de chiffres hexadécimaux (3b, 82, f6) est la valeur 0-255 d'un canal : 59, 130 et 246.#ffffffrgb(255 255 255) · hsl(0 0% 100%)Le blanc a les trois canaux au maximum ; en HSL, luminosité 100 %.Cas d'usage
- Convertir une couleur d'une charte graphique en HEX vers le format RGB ou HSL demandé par votre CSS ou framework.
- Obtenir l'équivalent CMYK d'une couleur écran pour préparer un support d'impression.
- Explorer les espaces colorimétriques modernes (OKLCh, Display P3) lors de l'ajustement d'une palette à large gamut.
Questions fréquentes
Qu'est-ce que le canal alpha et comment s'écrit-il en HEX ?
L'alpha est l'opacité, de 0 (transparent) à 100 %. En HEX, il s'ajoute comme une paire de chiffres à la fin : #RRGGBBAA. Par exemple, #ff000080 est du rouge à 50 % d'opacité.
Quelle est la différence entre HSL et HSV ?
Les deux utilisent la teinte et la saturation, mais le troisième axe diffère : HSL utilise la luminosité (où 100 % est blanc) et HSV utilise la valeur ou luminosité (où 100 % est la couleur la plus intense). HSL est généralement plus pratique pour générer des teintes claires et foncées.
Pourquoi OKLab et OKLCh existent-ils ?
Ce sont des espaces perceptivement uniformes : des distances égales entre les valeurs correspondent à des différences visuelles similaires. Ils produisent des dégradés et des ajustements de luminosité plus naturels que HSL, et CSS les prend en charge depuis le Niveau 4.
Le CMYK affiché est-il exact pour l'impression ?
C'est une conversion approximative de référence. Le résultat réel d'impression dépend du profil de couleur, de l'encre et du papier, donc pour un travail professionnel il vaut mieux utiliser le profil ICC de l'imprimeur.