Convertisseur de Couleurs

Convertissez les couleurs entre les formats RGB, HEX, HSL, HSV et CMYK

Color Converter
H: 0°
S: 100%
L: 50%
H: 0°
S: 100%
V: 100%
C: 0%
M: 100%
Y: 100%
K: 0%

Guide Complet de Conversion des Couleurs

Guide complet sur les modèles de couleurs, formats, conversions et applications professionnelles de design

Comprendre les Modèles de Couleur

Modèles de Couleur Numériques

  • •HEX : hexadécimal à 6 chiffres (#RRGGBB), 16,7 millions de couleurs
  • •RGB : Rouge/Vert/Bleu (0–255 chacun), modèle additif pour les écrans
  • •RGBA : RGB + transparence Alpha (0–1)
  • •HSL : Teinte (0–360°)/Saturation/Luminosité (0–100%)
  • •HSV/HSB : Teinte/Saturation/Valeur (alternative à HSL)

Modèles de Couleur pour l'Impression et l'Industrie

  • •CMYK : Cyan/Magenta/Jaune/Noir (0–100%), soustractif pour l'impression
  • •Pantone (PMS) : couleurs spot standardisées pour la cohérence de marque
  • •LAB (CIELAB) : indépendant du périphérique, perceptuellement uniforme
  • •LCH : Luminosité/Chroma/Teinte (perceptuel)
  • •XYZ : tristimulus CIE 1931, standard scientifique

Référence des Formats de Couleur

Conversion HEX et RGB

  • •HEX vers RGB : analyser les paires (#FF6B35 → R=255, G=107, B=53)
  • •RGB vers HEX : convertir chaque canal en hex à 2 chiffres
  • •Raccourci CSS : #RGB (3 chiffres) = #RRGGBB
  • •Alpha en HEX : 8 chiffres #RRGGBBAA
  • •Exemple : Blanc = #FFFFFF = rgb(255,255,255)

Relation HSL et RGB

  • •Teinte : 0°=rouge, 60°=jaune, 120°=vert, 180°=cyan, 240°=bleu, 300°=magenta
  • •Saturation 0% = gris, 100% = couleur pleine
  • •Luminosité 0% = noir, 50% = normale, 100% = blanc
  • •Rouge : HSL(0°,100%,50%) = RGB(255,0,0)
  • •Bleu : HSL(240°,100%,50%) = RGB(0,0,255)

Relation CMYK et RGB

  • •RGB→CMYK : K=1−max(R,G,B) ; C=(1−R−K)/(1−K) ; M=(1−G−K)/(1−K) ; Y=(1−B−K)/(1−K)
  • •Rouge pur RGB(255,0,0) = CMYK(0%,100%,100%,0%)
  • •Noir pur RGB(0,0,0) = CMYK(0%,0%,0%,100%)
  • •Blanc RGB(255,255,255) = CMYK(0%,0%,0%,0%)

Applications Professionnelles

Design Web et UI

  • •Syntaxe de couleur CSS (hex, rgb(), hsl(), oklch())
  • •Jetons de couleur pour le mode sombre
  • •Ratios de contraste WCAG (4.5:1 pour le texte normal)
  • •Variables de couleur de marque dans les systèmes de design
  • •Valeurs hex pour Tailwind/CSS-in-JS
  • •Création de dégradés avec rotation de teinte HSL

Design Graphique et Identité de Marque

  • •Correspondance de couleur Pantone pour l'identité de marque
  • •Conversion CMYK pour l'impression offset
  • •Noir riche vs. noir standard pour les grandes surfaces
  • •Profils de couleur (sRGB vs CMYK) pour la remise de fichiers
  • •Paramètres de surimpression
  • •Séparations de couleur spot

Photographie et Vidéo

  • •Étalonnage des couleurs dans les espaces Rec.709 / Rec.2020
  • •Couleur LAB pour l'édition perceptuelle
  • •Création de LUT (Look-Up Table)
  • •Référence de teinte de peau (approximativement teinte 180–220 en HSL)
  • •Calibrage des couleurs avec X-Rite ColorChecker
  • •Contenu HDR (gamme plus large)

Visualisation de Données

  • •Palettes séquentielles (clair à foncé) pour les données ordonnées
  • •Palettes divergentes pour deux extrêmes
  • •Palettes qualitatives pour les catégories
  • •Palettes adaptées aux daltoniens (éviter le rouge-vert seul)
  • •Uniformité perceptuelle dans l'espace LAB
  • •Accessibilité dans les graphiques (WCAG 1.4.1)

Meilleures Pratiques de Conversion de Couleur

Précision et Espaces de Couleur

  • •HEX/RGB sont sRGB par défaut — précisez l'espace de couleur pour la gamme élargie
  • •La conversion LAB nécessite un point blanc (standard D65)
  • •Les valeurs CMYK dépendent du profil de couleur ICC
  • •La correspondance des couleurs entre écrans varie selon l'étalonnage du moniteur
  • •Vérifiez toujours les couleurs d'impression avant la production finale

Considérations d'Accessibilité

  • •Ratio de contraste minimum WCAG AA : 4.5:1 (texte normal), 3:1 (grand texte)
  • •WCAG AAA : 7:1 (normal), 4.5:1 (grand)
  • •Environ 8% des hommes ont un daltonisme rouge-vert — testez avec Coblis ou similaire
  • •Ne vous fiez pas uniquement à la couleur pour transmettre une information
  • •Testez avec une conversion en niveaux de gris

Exemples de Couleurs par Catégorie

Couleurs Web-Safe et Courantes

  • •Blanc : #FFFFFF = rgb(255,255,255) = hsl(0°,0%,100%)
  • •Noir : #000000 = rgb(0,0,0)
  • •Rouge : #FF0000 = rgb(255,0,0) = hsl(0°,100%,50%)
  • •Marine : #000080 = rgb(0,0,128) = hsl(240°,100%,25%)
  • •Orange : #FFA500 = rgb(255,165,0)
  • •Gris : #808080 = rgb(128,128,128)
  • •Vert : #008000 = rgb(0,128,0)

Couleurs de Marque

  • •Rouge Coca-Cola : #F40009 (CMYK 0/100/100/4)
  • •Bleu Facebook : #1877F2
  • •Bleu Google : #4285F4
  • •Début de dégradé Instagram : #F58529
  • •Orange Amazon : #FF9900
  • •Vert Spotify : #1DB954
  • •Noir Apple : #1D1D1F

Exemples de Systèmes de Design

  • •Tailwind blue-500 : #3B82F6 = hsl(217°,91%,60%)
  • •Tailwind red-500 : #EF4444
  • •Material primary blue : #1976D2
  • •Bootstrap primary : #0D6EFD
  • •shadcn/ui foreground : #09090B
  • •Texte discret : #71717A
  • •Destructif : #DC2626

Questions Fréquentes

Quelle est la différence entre RGB et CMYK ?▾
RGB (Rouge, Vert, Bleu) est un modèle additif pour les écrans qui mélange la lumière. RGB complet (255,255,255) = blanc. CMYK (Cyan, Magenta, Jaune, Noir) est un modèle soustractif pour l'impression qui mélange les encres. CMYK complet (100,100,100,100) = presque noir. Les couleurs vives à l'écran peuvent paraître ternes à l'impression car l'encre ne peut pas reproduire toute la gamme RGB.
Pourquoi la couleur de mon écran semble différente à l'impression ?▾
Les écrans émettent de la lumière avec le modèle RGB, qui a une gamme plus large que le modèle CMYK utilisé par les imprimantes. Les couleurs vives et saturées — bleus électriques, verts néon, oranges vifs — ne peuvent souvent pas être reproduites avec de l'encre sur papier. Convertissez toujours en CMYK et faites un BAT (bon à tirer) avant de finaliser vos créations de marque ou d'emballage.
Qu'est-ce que la notation de couleur HEX ?▾
Un code couleur HEX est un nombre hexadécimal à 6 chiffres précédé de #, comme #FF5733. Les deux premiers chiffres sont le canal rouge (00–FF), les deux du milieu sont le vert et les deux derniers sont le bleu. Chaque paire représente 0–255 en base 16. Les codes courts comme #F00 sont des abréviations de #FF0000. Un HEX à 8 chiffres (#RRGGBBAA) inclut le canal alpha (opacité).
Comment vérifier le contraste de couleur pour l'accessibilité ?▾
Utilisez la formule de ratio de contraste WCAG : (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont les luminances relatives des deux couleurs. WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt+ ou 14pt gras). WCAG AAA exige 7:1 pour le texte normal. Des outils comme WebAIM Contrast Checker calculent cela instantanément.
Quelle est la différence entre HSL et HSV ?▾
Les deux utilisent Teinte et Saturation, mais diffèrent dans le troisième composant. HSL (Luminosité) définit 50% comme la couleur 'pure' : 0% est noir, 100% est blanc, 50% est pleinement saturé. HSV (Valeur/Luminosité) définit 100% comme la couleur pure : 0% est toujours noir quelle que soit la teinte. HSL est plus courant en CSS et design web ; HSV est plus courant dans les logiciels d'édition d'image comme Photoshop.
Quel format de couleur utiliser pour le design web ?▾
Pour le design web, HEX est le format le plus utilisé et lisible pour les couleurs statiques. Utilisez hsl() en CSS quand vous avez besoin d'ajuster la luminosité ou la teinte par programmation (idéal pour les jetons de design et les thèmes). Utilisez rgba() quand vous avez besoin de transparence. Pour les navigateurs modernes, oklch() offre une manipulation de couleur perceptuellement uniforme et est de plus en plus recommandé pour les systèmes de design.