HEX vs RGB vs HSL vs CMYK : Quel format de couleur utiliser et quand

Même couleur, quatre langages différents

Regardez ce corail. C'est exactement la même couleur, mais elle peut s'écrire de quatre manières différentes :

Chaque format a son utilité. Choisir le mauvais ne cassera pas votre projet, mais choisir le bon vous fera gagner du temps, évitera les erreurs de conversion et maintiendra la cohérence de votre marque sur toutes les plateformes.

Ce guide explique exactement quand utiliser chacun, avec des exemples réels et des références rapides.

HEX : Le standard du web

Qu'est-ce que c'est : Un code hexadécimal à 6 chiffres représentant les valeurs rouge, vert et bleu. Commence toujours par #. Exemple : #FF6F61 signifie 255 de rouge, 111 de vert, 97 de bleu.

Quand utiliser HEX

• Feuilles de style CSS — C'est le format par défaut que la plupart des développeurs web utilisent et attendent.
• Outils de design — Figma, Sketch et Canva affichent HEX en évidence dans leurs sélecteurs de couleur.
• Chartes graphiques — La plupart des chartes graphiques listent les couleurs en HEX car c'est court et facile à copier-coller.
• Communication — Quand vous devez partager une couleur exacte sur Slack ou par e-mail, HEX est universellement compris.

Quand NE PAS utiliser HEX

• Quand vous avez besoin de transparence — HEX ne supporte pas l'alpha nativement. Vous pouvez utiliser le HEX à 8 chiffres (#FF6F6180), mais le support est inconsistant entre les outils.
• Manipulation programmatique des couleurs — Éclaircir ou assombrir une couleur HEX nécessite une conversion préalable.
• Design pour l'impression — L'impression utilise CMYK. Envoyer du HEX à une imprimerie garantit un décalage de couleur.

Exemple réel : Variables CSS

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB : Le modèle de couleur d'écran

Qu'est-ce que c'est : Trois nombres (0–255) représentant le rouge, le vert et le bleu, les vraies couleurs de lumière émises par votre écran. Exemple : rgb(255, 111, 97).

Quand utiliser RGB

• Transparence (RGBA) — rgba(255, 111, 97, 0.5) donne un contrôle exact de l'opacité. C'est la méthode la plus largement supportée pour les couleurs semi-transparentes en CSS.
• Développement d'apps — Swift, Kotlin et Flutter utilisent des valeurs RGB en interne. Travailler en RGB évite les conversions inutiles.
• Éclairage LED et IoT — Les bandes LED et ampoules connectées attendent des valeurs RGB.
• Mathématiques des couleurs — Mélanger deux couleurs ou interpoler entre elles est de l'arithmétique simple en RGB.

Quand NE PAS utiliser RGB

• Design pour l'impression — Les valeurs RGB ne correspondent pas directement au mélange d'encres. Convertissez toujours en CMYK avant d'envoyer à l'imprimerie.
• Ajuster la saturation ou la luminosité — Changer la saturation en RGB nécessite des formules complexes. HSL est bien plus facile pour cela.

Exemple réel : React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL : Le format du designer

Qu'est-ce que c'est : Trois valeurs — Teinte (0–360°, position sur la roue chromatique), Saturation (0–100%%, de gris à vibrant) et Luminosité (0–100%%, de noir à blanc). Exemple : hsl(5, 100%%, 69%%).

Quand utiliser HSL

• Systèmes de design — Créez une gamme de couleurs complète en gardant la teinte et la saturation fixes et en ne changeant que la luminosité.
• Mode sombre — Générer des variantes sombres est aussi simple que réduire la luminosité. Pas de devinettes, pas de formules.
• Génération programmatique de couleurs — Besoin de 12 couleurs distinctes équidistantes ? Incrémentez la teinte de 30° en gardant saturation et luminosité identiques.
• Accessibilité — Vérifier le contraste est plus intuitif quand on peut lire la valeur de luminosité directement.

Quand NE PAS utiliser HSL

• Communication inter-équipes — La plupart des gens ne pensent pas en teinte/saturation/luminosité. HEX ou RGB sont souvent plus clairs en conversation.
• Workflows d'impression — HSL n'a pas d'équivalent direct en impression. Convertissez en CMYK d'abord.

Exemple réel : Gamme de couleurs avec Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK : Le format d'impression

Qu'est-ce que c'est : Quatre valeurs — Cyan, Magenta, Jaune et Noir (Key). Contrairement au RGB (qui ajoute de la lumière), CMYK est soustractif — il décrit combien d'encre absorbe la lumière du papier blanc. Exemple : 0, 56, 62, 0.

Quand utiliser CMYK

• Tout ce qui est imprimé — Cartes de visite, affiches, emballages, magazines. Si ça passe par une imprimerie, ça doit être en CMYK.
• InDesign et workflows d'impression — Concevez en CMYK dès le départ pour éviter les surprises avec des couleurs hors gamut.
• Épreuves couleur — Les épreuves à l'écran simulent la sortie de l'imprimante, ce qui ne fonctionne que si vos couleurs source sont déjà en CMYK.

Quand NE PAS utiliser CMYK

• Écrans — Les moniteurs utilisent la lumière (RGB). Les valeurs CMYK doivent être converties, et la conversion est toujours une approximation.
• Retouche photo — Travaillez en RGB pendant la retouche. Convertissez en CMYK uniquement en dernière étape si le document sera imprimé.

Exemple réel : Export depuis Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

Tableau de référence rapide

Aide-mémoire : Type de projet → Format de couleur

Conversions : Ce qu'il faut savoir

• HEX ↔ RGB — Conversion sans perte. Ce sont des représentations différentes du même modèle. #FF6F61 est exactement rgb(255, 111, 97).
• RGB ↔ HSL — Conversion sans perte. Ce sont des expressions mathématiques différentes du même ensemble de couleurs.
• RGB → CMYK — Conversion avec perte. La gamme de couleurs CMYK est inférieure à celle du RGB. Les couleurs vibrantes d'écran deviennent souvent ternes à l'impression.
• CMYK → RGB — Le résultat dépend du profil ICC utilisé. La même valeur CMYK peut paraître différente avec des profils différents.

L'app Color Picker Camera affiche les quatre formats simultanément — pointez vers n'importe quelle couleur du monde réel et obtenez HEX, RGB, HSL et CMYK instantanément. Sans conversion manuelle.

Erreurs courantes (et comment les éviter)

1. Envoyer du RGB à l'imprimerie

Les imprimantes mélangent des encres, pas de la lumière. Si vous envoyez un fichier RGB, le logiciel de l'imprimerie devinera la conversion CMYK et les résultats correspondent rarement à ce que vous voyez à l'écran. Concevez toujours pour l'impression en CMYK dès le départ.

2. Utiliser HEX pour la transparence

Le HEX à 8 chiffres (#FF6F6180) existe, mais de nombreux outils ne le reconnaissent pas. Utilisez rgba() ou hsla() pour une transparence fiable.

3. Construire un système de design uniquement en HEX

Générer des teintes claires et foncées à partir d'un code HEX nécessite des essais et erreurs. HSL permet de changer la luminosité directement, rendant les gammes de couleurs prévisibles et cohérentes.

4. Convertir CMYK → HEX et s'attendre à la même couleur

CMYK a une gamme plus petite que RGB/HEX. Quand vous reconvertissez, la couleur est approximée et peut paraître terne ou légèrement altérée. Vérifiez toujours visuellement.

Questions fréquentes

Quelle est la différence entre HEX et RGB ?

Aucune en termes de couleurs disponibles. Les deux couvrent les mêmes 16,7 millions de couleurs. HEX est une façon plus courte d'écrire des valeurs RGB en notation hexadécimale. #FF6F61 = rgb(255, 111, 97). La seule différence pratique est la transparence : RGB a RGBA intégré, tandis que le HEX à 8 chiffres a un support limité.

Quand dois-je utiliser CMYK ?

Chaque fois que votre design sera imprimé physiquement : cartes de visite, brochures, affiches, emballages. S'il ne sera visible que sur un écran, restez avec HEX, RGB ou HSL.

HSL est-il meilleur que RGB ?

Ce n'est pas meilleur, c'est plus facile à appréhender pour les designers. Si vous devez créer un schéma de couleurs, générer des thèmes en mode sombre ou vérifier le contraste d'accessibilité, HSL est plus intuitif. Pour le développement d'apps où les frameworks attendent des valeurs RGB, utilisez RGB.

Existe-t-il une app qui affiche les 4 formats de couleur en même temps ?

Oui. Color Picker Camera vous permet de pointer votre téléphone vers n'importe quelle couleur du monde réel et de voir instantanément HEX, RGB, HSL et CMYK sur un seul écran. Disponible pour iOS et Android.

En résumé

Utilisez HEX pour le web. Utilisez RGB pour les apps et les écrans. Utilisez HSL pour les systèmes de design et les thèmes. Utilisez CMYK pour l'impression.

Si vous travaillez avec des couleurs du monde réel — un mur peint, un échantillon de tissu, un logo sur une enseigne — Color Picker Camera agit comme votre calculatrice de couleurs. Pointez, capturez et obtenez les quatre formats instantanément.

Télécharger pour iOS Télécharger pour Android