onlinetools.dev

Convertisseur de couleurs

Convertissez des couleurs entre HEX, RGB, HSL et OKLCH avec aperçu en direct

Exécution locale
loading…
À propos de cet outil

Saisissez une couleur dans n’importe quelle notation courante — #hex, rgb(), hsl() ou un nom de couleur CSS — et obtenez tous les formats à la fois : HEX, RGB, HSL et OKLCH, à côté d’un aperçu en direct. Les canaux alpha sont préservés d’un format à l’autre, et la sortie utilise la syntaxe CSS moderne (canaux séparés par des espaces) qui se colle proprement dans les feuilles de style actuelles.

OKLCH est inclus parce que c’est là que va la couleur en CSS : contrairement à HSL, son axe de luminosité est perceptuellement uniforme — deux couleurs de même L paraissent réellement aussi lumineuses l’une que l’autre, et ajuster la teinte ne change pas accidentellement la luminosité perçue. Convertir une palette existante en OKLCH est la première étape vers des gammes de couleurs cohérentes.

Les calculs de conversion s’exécutent localement avec les transformations publiées sRGB↔OKLab, et les valeurs font l’aller-retour : le RGB obtenu depuis une entrée HSL est exactement ce que le navigateur calculerait.

Questions fréquentes

Pourquoi les luminosités HSL et OKLCH ne concordent-elles pas ?
La luminosité HSL est une propriété géométrique des valeurs RGB, pas de la vision humaine — le jaune hsl(60 100% 50%) paraît bien plus lumineux que le bleu hsl(240 100% 50%) malgré un L identique. L’axe L d’OKLCH est conçu pour correspondre à la perception : à L égal, luminosité apparente égale. Ce désaccord est la raison d’être même d’OKLCH.
Que signifie la valeur alpha et où va-t-elle dans chaque format ?
Alpha est l’opacité, de 0 (transparent) à 1 (opaque). En hexadécimal à 8 chiffres, c’est l’octet final (#RRGGBBAA) ; dans la syntaxe fonctionnelle moderne, elle suit une barre oblique : rgb(76 141 255 / 0.5). Ce convertisseur propage l’alpha automatiquement dans chaque format.
Toute couleur OKLCH peut-elle s’afficher en sRGB ?
Non — OKLCH couvre des gamuts larges, et certaines combinaisons chroma/luminosité n’ont pas d’équivalent sRGB. Convertir depuis le sRGB (comme le fait cet outil) reste toujours représentable ; dans l’autre sens, les couleurs hors gamut doivent être écrêtées ou remappées — c’est pourquoi un vert P3 éclatant paraît plus terne sur un écran sRGB.
Pourquoi rgb(76 141 255) avec des espaces plutôt que des virgules ?
CSS Color Module Level 4 a standardisé les canaux séparés par des espaces avec un /alpha optionnel, et tous les navigateurs modernes le prennent en charge. La forme à virgules fonctionne toujours, mais la forme à espaces est celle qu’utilisent les nouvelles spécifications (et cet outil).
Outils associés