Convertisseur de Couleurs

Qu'est-ce que la conversion de couleurs ?

Un convertisseur de couleurs traduit une valeur de couleur d'une notation à une autre — par exemple, d'un triplet HEX (#6366F1) vers un tuple RGB (99, 102, 241) ou un triple HSL (239, 84%, 67%). Une même couleur peut aussi s'exprimer en triple HSV (239, 59%, 95%). Chaque format encode la même couleur visuelle selon un modèle mathématique différent ; les outils, langages et API attendent des formats variés selon le contexte.

HEX et RGB décrivent tous deux une couleur comme un mélange de lumière rouge, verte et bleue. HEX est une représentation hexadécimale compacte des trois mêmes valeurs de canaux 0-255 que RGB exprime en décimal. HSL (Teinte, Saturation, Luminosité) et HSV (Teinte, Saturation, Valeur) réorganisent ces informations dans un système de coordonnées cylindrique où la teinte est un angle sur la roue chromatique (0-360 degrés), et la saturation, la luminosité ou la brillance sont des pourcentages. Cela rend HSL et HSV plus intuitifs pour créer des nuances plus claires ou plus foncées d'une même teinte.

La conversion entre ces formats repose sur des formules mathématiques bien définies. La spécification W3C CSS Color Module Level 4 documente les algorithmes qu'utilisent les navigateurs pour résoudre toute couleur CSS en triplet sRGB. Les formules sont déterministes : une entrée donnée produit toujours la même sortie, donc les conversions sont sans perte tant que les valeurs ne sont pas arrondies ou écrêtées. La plupart des sélecteurs de couleurs et outils de design s'appuient sur ces mêmes formules en coulisse.

Pourquoi utiliser ce convertisseur de couleurs ?

Les outils de design exportent les couleurs dans un format, votre CSS en attend un autre, et l'API que vous appelez en exige un troisième. Au lieu d'écrire du code de conversion ou de chercher la bonne formule, collez une valeur et obtenez tous les formats en une seule fois.

Cas d'utilisation du convertisseur de couleurs

Référence des formats de couleurs

Le tableau ci-dessous liste les cinq formats de couleurs les plus courants, avec la même couleur indigo (#6366F1) affichée dans chaque notation. HEX et RGB sont les plus largement pris en charge en CSS et JavaScript. HSL est privilégié pour le thème car ajuster la luminosité et la saturation est direct. HSV est le modèle utilisé par la plupart des sélecteurs de couleurs des logiciels de design.

HEX vs RGB vs HSL

Ces trois formats décrivent le même espace colorimétrique sRGB. La différence réside dans la façon dont ils exposent les données, ce qui influe sur la lisibilité et la facilité de manipulation selon le contexte.

Exemples de code

Conversion de couleurs entre HEX, RGB et HSL dans les langages et environnements courants. Chaque exemple utilise la même couleur indigo (#6366F1) pour faciliter la comparaison.

// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]

// RGB → HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return [0, 0, Math.round(l * 100)]
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]

import colorsys

# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#6366f1')  # → (99, 102, 241)

# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)

package main

import (
	"fmt"
	"math"
)

func hexToRGB(hex string) (int, int, int) {
	var r, g, b int
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	return r, g, b
}

func rgbToHSL(r, g, b int) (int, int, int) {
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, int(math.Round(l * 100))
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
	case gf: h = (bf - rf) / d + 2
	case bf: h = (rf - gf) / d + 4
	}
	return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}

func main() {
	r, g, b := hexToRGB("#6366f1")
	fmt.Println(r, g, b)         // → 99 102 241
	fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}

/* Modern CSS supports multiple color formats natively */

/* HEX notation */
.button { color: #6366f1; }

/* RGB functional notation */
.button { color: rgb(99 102 241); }

/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }

/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }

/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }

Foire aux questions