Convertisseur de Couleurs

Convertissez entre HEX, RGB, HSL et CMYK instantanément.

#6366F1
Sélecteur de couleur
Cliquez pour choisir une couleur

HEX

RGB

HSL

CMYK

Ajuster RGB

R 99
G 102
B 241

Palette rapide

Guide des formats de couleur

Comprendre les espaces colorimétriques

En tant que designer et développeur front-end, je jongle constamment entre formats de couleur. Les designers fournissent du HEX, Figma exporte en RGB, les imprimeurs demandent du CMYK. Comprendre ces formats évite les erreurs de conversion et les surprises d'impression.

Formats expliqués

HEX (#RRGGBB)

Format hexadécimal utilisé en CSS. 6 caractères représentant rouge, vert, bleu (00-FF). Compact et universel pour le web.

RGB (R, G, B)

Rouge, Vert, Bleu de 0 à 255. Modèle additif : les couleurs s'additionnent vers le blanc. Natif des écrans.

HSL (H, S%, L%)

Teinte (0-360°), Saturation, Luminosité. Plus intuitif pour ajuster une couleur : changer la luminosité sans altérer la teinte.

CMYK (C, M, Y, K)

Cyan, Magenta, Jaune, Noir. Modèle soustractif pour l'impression. La conversion depuis RGB est approximative.

Bonnes pratiques

  • Accessibilité — Vérifiez le contraste (WCAG recommande 4.5:1 minimum pour le texte)
  • Cohérence — Utilisez des variables CSS pour centraliser vos couleurs
  • Print — Toujours convertir en CMYK pour l'impression, les couleurs RGB peuvent paraître ternes
  • Transparence — Utilisez RGBA ou HSLA pour les opacités en CSS

Questions fréquentes

Pourquoi mes couleurs imprimées sont différentes de l'écran ?

Les écrans utilisent RGB (lumière additive), les imprimantes CMYK (encre soustractive). Certaines couleurs RGB vives (bleu électrique, vert fluo) sont hors gamut CMYK et seront approximées. Utilisez toujours un profil colorimétrique et faites des épreuves.

HEX 3 ou 6 caractères ?

#RGB est un raccourci de #RRGGBB. #F00 = #FF0000 (rouge). Chaque caractère est doublé. Utile pour économiser des octets, mais moins précis (16 valeurs par canal vs 256). Le format 6 caractères est préférable pour la précision.

Comment choisir des couleurs accessibles ?

Le ratio de contraste WCAG recommande 4.5:1 pour le texte normal, 3:1 pour le grand texte. Utilisez HSL pour ajuster : gardez la teinte, modifiez la luminosité. Un texte sombre sur fond clair (ou inversement) avec luminosités éloignées garantit un bon contraste.

Qu'est-ce que HEX avec alpha (#RRGGBBAA) ?

Format HEX étendu avec 2 caractères supplémentaires pour l'opacité (00 = transparent, FF = opaque). #FF000080 = rouge à 50% d'opacité. Supporté par les navigateurs modernes. Alternative : rgba() qui est plus lisible pour les humains.