Guide de conversion HEX, RVB, HSL pour les équipes produit

Guide de conversion HEX, RGB, HSL pour les équipes de produit

Les designers fournissent des codes HEX dans Figma. Les ingénieurs écrivent RGB dans le code. HSL est ce que vous voulez réellement pour la manipulation de couleurs programmatique. Voici comment les trois formats sont liés et quand utiliser chacun.

Les trois formats

HEX -- #FF5733

Deux chiffres hexadécimaux par canal : #RRGGBB. Chaque paire va de 00 à FF (0 à 255 en décimal). La norme web depuis les années 1990. Compact, universellement pris en charge, mais opaque à la lecture humaine.

RGB -- rgb(255, 87, 51)

Trois valeurs décimales, 0-255 par canal. Ce que CSS rgb() utilise. Légèrement plus lisible que HEX mais toujours difficile à ajuster mentalement ("rendre 20% plus clair" n'est pas évident en RGB).

HSL -- hsl(11, 100%, 60%)

Teinte (0-360 degrés sur la roue chromatique), Saturation (0-100%), Luminosité (0-100%). Conçu pour les humains : vous pouvez raisonner sur les relations de couleur directement.

Quand utiliser chacun

Pourquoi HSL gagne pour les systèmes de thèmes

Avec HSL, la manipulation de couleurs est arithmétique :

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% de luminosité */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% de luminosité */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* désaturé */
}

Changer --hue en 210 et votre palette entière passe de l'orange au bleu. Essayez cela avec HEX.

Éclaircir : augmenter L. 60% → 80% = plus clair.

Assombrir : diminuer L. 60% → 40% = plus foncé.

Désaturer : diminuer S. 100% → 40% = plus atténué.

Couleur complémentaire : ajouter 180 à H. 11 → 191.

Feuille de conversion

HEX → RGB : Diviser en paires, convertir hexadécimal en décimal.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (simplifié) :

Ne pas mémoriser les formules. Utilisez l'outil de sélection de couleurs pour convertir entre les trois formats instantanément.

CSS moderne : oklch()

CSS Color Level 4 a introduit oklch() -- luminosité uniformément perceptive. Contrairement à HSL, les valeurs L égales ont réellement l'air également lumineuses sur les teintes. Si vous démarrez un nouveau système de conception en 2025+, envisagez oklch() aux côtés de HSL.

Liens connexes