Passer au contenu principal

Convertisseur HEX / RGB / HSL / HSB / CMJN — Tous les formats de couleur

Convertissez instantanément vos couleurs entre HEX, RGB, HSL, HSB (Photoshop), CMJN et RGBA. Vérification du contraste WCAG, nuances et teintes automatiques, historique des couleurs consultées.

#3B82F6
#
← version courte ← avec alpha
R
G
B
rgb( )
H °
S %
L %
hsl( )
H °
S %
B %
hsb( )
C %
M %
J %
N %
cmyk( )
rgba( )
hsla( )
Informations détaillées
Nuances & teintes
Contraste WCAG
Couleurs CSS nommées proches
Historique

Convertisseur HEX, RGB, HSL : guide complet

Les couleurs en informatique peuvent être exprimées dans plusieurs espaces colorimétriques, chacun adapté à un usage différent. Notre convertisseur permet de passer instantanément d'un format à l'autre : HEX, RGB, HSL, HSB/HSV, CMJN et RGBA.

Les formats de couleur en détail

#HEX — Notation hexadécimale

Format le plus courant sur le web. Chaque paire de chiffres représente R, G, B en base 16. #FF0000 = rouge pur. Peut s'abréger en 3 caractères si chaque paire est doublée : #FF6600 → #F60.

rgb() — Rouge Vert Bleu

Chaque canal varie de 0 à 255 (256 valeurs). Modèle additif : rouge + vert + bleu = blanc. rgb(255,0,0) = rouge. Avec transparence : rgba(255,0,0,0.5).

hsl() — Teinte Saturation Luminosité

Le plus intuitif : Hue (0-360°) = couleur sur la roue, Saturation (0-100%) = vivacité, Lightness (0-100%) = clair/foncé. Idéal pour créer des variantes d'une couleur.

hsb() — Teinte Saturation Luminance

Utilisé dans Photoshop et Illustrator. Similaire au HSL mais Brightness (0 = noir, 100 = couleur pure). Plus naturel pour choisir une couleur à la main.

cmyk() — Cyan Magenta Jaune Noir

Modèle soustractif utilisé en imprimerie. Les valeurs représentent la quantité d'encre de chaque couleur. Le noir (K) est séparé pour économiser l'encre.

Luminance relative & WCAG

La luminance relative mesure la clarté perçue par l'œil humain. Elle sert au calcul du ratio de contraste WCAG pour vérifier l'accessibilité texte/fond.

Questions fréquentes

HEX et RGB représentent exactement la même information mais dans des notations différentes. RGB utilise trois nombres décimaux de 0 à 255 pour rouge, vert, bleu... HEX et RGB représentent exactement la même information mais dans des notations différentes. RGB utilise trois nombres décimaux de 0 à 255 pour rouge, vert, bleu. HEX encode ces mêmes valeurs en base 16 (hexadécimal) en une chaîne de 6 caractères précédée du #. Exemple : rgb(59, 130, 246) = #3B82F6.

Les deux utilisent Hue (teinte) et Saturation, mais diffèrent sur le troisième composant. HSL utilise la Lightness (luminosité) : 0% = noir, 50% = couleur pure,... Les deux utilisent Hue (teinte) et Saturation, mais diffèrent sur le troisième composant. HSL utilise la Lightness (luminosité) : 0% = noir, 50% = couleur pure, 100% = blanc. HSB/HSV utilise la Brightness (éclat) : 0% = noir, 100% = couleur à pleine intensité. Photoshop et Illustrator utilisent HSB, les navigateurs web utilisent HSL.

La notation HEX courte (#RGB) n'est possible que si chaque paire de caractères est identique. Par exemple, #FF6600 peut s'écrire #F60, mais #3B82F6 ne peut pas ... La notation HEX courte (#RGB) n'est possible que si chaque paire de caractères est identique. Par exemple, #FF6600 peut s'écrire #F60, mais #3B82F6 ne peut pas être abrégé car ses paires (3B, 82, F6) ne sont pas des doublets. Si la version courte affiche —, votre couleur ne peut pas être abrégée.

Utilisez le slider Alpha pour ajuster la transparence de 0% (invisible) à 100% (opaque). L'outil génère automatiquement les formats rgba() et hsla() corresponda... Utilisez le slider Alpha pour ajuster la transparence de 0% (invisible) à 100% (opaque). L'outil génère automatiquement les formats rgba() et hsla() correspondants, ainsi que la notation HEX8 (#RRGGBBAA) supportée par tous les navigateurs modernes depuis CSS4.

La luminance relative est une valeur entre 0 (noir absolu) et 1 (blanc pur) qui mesure la clarté perçue par l'œil humain selon un modèle linéaire. Elle sert de ... La luminance relative est une valeur entre 0 (noir absolu) et 1 (blanc pur) qui mesure la clarté perçue par l'œil humain selon un modèle linéaire. Elle sert de base au calcul du ratio de contraste WCAG : un ratio ≥ 4.5:1 est requis pour le texte normal (niveau AA), ≥ 7:1 pour le niveau AAA.
Publicité

Outils de la même catégorie

Générateur de dégradé CSS Encodeur / Décodeur URL Minifieur CSS / JS / HTML Générateur de Favicon Convertisseur binaire/décimal/hexadécimal Visualiser code HTML en ligne JSON Formatter Online Base64 Encoder Decoder

Outils populaires

Calculateur Matériaux Calculateur Pente Toiture Générateur Planning Travaux Simulateur Coût Rénovation Calculateur Coût Embauche