Mode d’emploi
- Saisissez ou collez une couleur, par exemple #1e90ff, rgb(30 144 255) ou oklch(65% 0.18 250). Vous pouvez aussi cliquer sur le sélecteur de couleur.
- Vérifiez l’échantillon pour vous assurer qu’il correspond à la couleur souhaitée.
- Copiez le format souhaité dans la liste. Les valeurs avec transparence conservent leur alpha.
Fonctionnement
Formats acceptés : HEX avec 3, 4, 6 ou 8 chiffres (les 4e et 8e chiffres correspondent à alpha), rgb() et rgba() avec des nombres ou des pourcentages, hsl() et hsla(), hwb(), oklch() et cmyk() avec des pourcentages ou des nombres de 0 à 100. La syntaxe classique avec des virgules et la syntaxe moderne avec des espaces et « / alpha » sont toutes deux prises en charge. La teinte accepte deg, turn, rad et grad. Les noms de couleurs comme « tomato » ne sont pas interprétés ; utilisez le sélecteur de couleur ou saisissez un code.
Toutes les conversions passent par sRGB. HSL et HWB ne font que réorganiser les valeurs RGB et se convertissent donc exactement. OKLCH est un espace perceptuel : des écarts égaux de luminosité semblent produire des différences à peu près égales, ce qui en fait un format utile pour créer des palettes. Le calcul utilise les matrices OKLab publiées. Certaines couleurs OKLCH ne peuvent pas être affichées en sRGB ; l’outil le signale et affiche la couleur affichable la plus proche.
CMYK est calculé selon la formule simplifiée courante (K = 1 − le canal RGB le plus élevé). Le résultat réel à l’impression dépend du papier, de l’encre et du profil ICC. Considérez donc ces valeurs comme un point de départ, et non comme des spécifications d’impression.
Exemples
D’un code HEX de marque au CSS
Un guide de style indique #0b5d1e. Collez ce code pour obtenir rgb(11, 93, 30) pour les anciennes versions de CSS, hsl(133.9, 78.8%, 20.4%) pour ajuster la luminosité manuellement, et une valeur oklch() pour les fonctions de couleur modernes de CSS.
Lire une couleur avec transparence
rgba(0, 0, 0, 0.5) se convertit en #00000080. Les deux derniers chiffres HEX (80) indiquent alpha : 128 sur 255, soit environ 50 %.
Vérifier une valeur OKLCH issue d’un fichier de conception
oklch(70% 0.4 150) est un vert très saturé que les écrans sRGB ne peuvent pas afficher. L’outil le signale et indique la couleur sRGB la plus proche, pour vous montrer que le rendu sera différent sur la plupart des écrans.
Foire aux questions
Pourquoi la conversion en HSL puis en retour modifie-t-elle parfois le code HEX d’une unité ?
HEX stocke des nombres entiers de 0 à 255 pour chaque canal. Les valeurs des autres formats sont arrondies à l’affichage (HSL à une décimale) ; la conversion d’une valeur arrondie peut donc différer d’une unité au retour. Copiez la valeur HEX si vous avez besoin de l’original exact.
La valeur CMYK convient-elle à l’impression ?
Non, pas à elle seule. Elle utilise une formule simplifiée sans profil de couleur. Les imprimantes utilisent des profils comme FOGRA ou GRACoL, qui produisent des valeurs différentes. Demandez conseil à votre imprimeur ou faites la conversion dans une application avec gestion des couleurs.
Qu’est-ce que OKLCH et peut-on l’utiliser dans CSS ?
OKLCH décrit une couleur selon sa luminosité perçue, sa chroma (intensité de la couleur) et sa teinte. Les versions actuelles des principaux navigateurs prennent en charge oklch() dans CSS. Prévoyez une valeur de repli HEX ou rgb() si vous prenez en charge d’anciens navigateurs.
Que signifie un code HEX à 8 chiffres ?
#RRGGBBAA : les deux derniers chiffres indiquent l’opacité, de 00 (entièrement transparent) à ff (entièrement opaque). La forme à 4 chiffres #RGBA fonctionne de la même façon, avec un chiffre par canal.
Confidentialité
Les couleurs sont converties dans votre navigateur. Aucune donnée saisie n’est envoyée ni enregistrée.