Aller au contenu
Outil du Jour
Ajoutez en favorisCtrl+D

Convertisseur de couleur (HEX, RGB, HSL, HSV, CMYK)

Collez une couleur dans n'importe quel format ou utilisez le sélecteur pour obtenir toutes les conversions, un aperçu visuel et le ratio de contraste pour l'accessibilité.

Reconnaît HEX, RGB(A), HSL(A), HSV/HSB, CMYK et les noms CSS.

Contraste sur fond clair: 3.24:1 AA (grand texte)

Contraste sur fond sombre: 6.49:1 AA (texte normal)

Astuce : faites varier l'opacité pour prévisualiser des overlays (ex. boutons, badges, etc.).

HEX

#1e90ff
#1e90ffff

RGB / RGBA

rgb(30, 144, 255)
rgba(30, 144, 255, 1)
rgb(30 144 255)

HSL / HSLA

hsl(209.6, 100%, 55.9%)
hsla(209.6, 100%, 55.9%, 1)
hsl(209.6 100% 55.9%)

HSV / HSB

hsv(209.6, 88.2%, 100%)

CMYK

cmyk(88.2%, 43.5%, 0%, 0%)

FAQ

Quels formats sont supportés ?

HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), RGB et RGBA (syntaxes CSS3 et CSS4), HSL et HSLA, HSV/HSB ainsi que CMYK. Les noms CSS (ex. 'dodgerblue') sont aussi reconnus.

Comment gérer l'alpha (transparence) ?

Utilisez RGBA ou HSLA, le curseur d'opacité, ou un HEX sur 8 chiffres (#RRGGBBAA). L'alpha est conservé entre conversions.

Le contraste est-il vérifié ?

Oui. L'outil calcule le ratio de contraste WCAG entre la couleur et le fond (clair/sombre) et indique la conformité AA/AAA pour le texte.

HSV et HSB, c'est pareil ?

Oui. HSV est équivalent à HSB (Hue–Saturation–Value/Brightness). Les conversions affichées utilisent la même base.

Outils connexes

Comprendre les différents formats de couleur

Une même couleur peut s'écrire de plusieurs façons selon le contexte : le HEX (#3498db) domine en développement web car il est compact et facile à copier-coller dans une feuille de style, le RGB (rgb(52, 152, 219)) reste le format le plus intuitif pour raisonner en mélange de lumière rouge, verte et bleue, tandis que le HSL (hsl(204, 70%, 53%)) sépare la teinte, la saturation et la luminosité — ce qui le rend bien plus pratique pour éclaircir, assombrir ou désaturer une couleur sans recalculer les trois composantes RGB à la main.

Pourquoi utiliser HSL ou HSV plutôt que RGB ?

Quand on ajuste une palette graphique, modifier directement les valeurs RGB pour « rendre une couleur plus claire » demande de recalculer les trois canaux dans les bonnes proportions. En HSL, il suffit d'augmenter la composante de luminosité (le troisième nombre) en gardant la teinte et la saturation identiques. HSV (ou HSB, Hue-Saturation-Value/Brightness) fonctionne sur le même principe mais avec une logique de « valeur » plus proche de la façon dont un logiciel de dessin ou un sélecteur de couleur affiche généralement sa roue chromatique — c'est le format que l'on retrouve dans la plupart des pipettes à colorimètre.

CMJN, un format pensé pour l'impression

Le CMJN (Cyan, Magenta, Jaune, Noir — CMYK en anglais) fonctionne différemment des trois formats précédents : il décrit un mélange de pigments qui absorbent la lumière plutôt qu'un mélange de lumière émise par un écran. C'est le format utilisé par les imprimantes et les logiciels de PAO pour calculer la quantité d'encre à déposer. Convertir du RGB (pensé pour l'écran) vers du CMJN (pensé pour le papier) est une opération approximative : le rendu final dépend aussi du papier, de l'encre et du profil colorimétrique de l'imprimante, donc la conversion donne un ordre de grandeur fiable mais pas une garantie de rendu identique à l'impression.

Pourquoi vérifier le contraste, pas seulement la couleur

Une couleur de texte qui semble lisible à l'œil peut échouer aux critères d'accessibilité WCAG si le contraste avec son arrière-plan est insuffisant, en particulier pour les personnes malvoyantes ou daltoniennes. Le ratio de contraste AA (minimum recommandé pour la plupart des textes) exige un rapport d'au moins 4,5:1 entre le texte et le fond, tandis que le niveau AAA (plus exigeant, recommandé pour les contenus importants) demande 7:1. Vérifier ce ratio avant de valider une palette évite de découvrir un problème d'accessibilité une fois le site déjà en ligne.