Selecteur de couleur : convertir HEX, RGB, RGBA, HSL

Les formats de couleurs en CSS

Le CSS supporte plusieurs façons d'exprimer une couleur. Chaque format a ses avantages selon le contexte d'utilisation.

• HEX — #RRGGBB — 6 caractères hexadécimaux. Compact, lisible. Ex: #ff5733
• RGB — rgb(R, G, B) — valeurs de 0 à 255. Intuitif pour les développeurs. Ex: rgb(255, 87, 51)
• RGBA — rgba(R, G, B, A) — comme RGB avec transparence (0–1). Ex: rgba(255, 87, 51, 0.5)
• HSL — hsl(H, S%, L%) — Teinte, Saturation, Luminosité. Plus naturel pour ajuster les couleurs. Ex: hsl(11, 100%, 60%)
• HSLA — hsla(H, S%, L%, A) — HSL avec transparence. Ex: hsla(11, 100%, 60%, 0.5)

Convertir RGBA en HEX et inversement

Une couleur reste la même quel que soit son format : rgba(52, 152, 219, 1), #3498DB et hsl(204, 70%, 53%) décrivent exactement la même teinte. Convertir revient simplement à réécrire les mêmes canaux rouge, vert et bleu dans une autre notation.

De RGBA vers HEX

Le format HEX encode chaque canal RGB (0–255) sur deux caractères hexadécimaux (00–FF). La conversion ignore le canal alpha, sauf si vous utilisez la notation HEX à 8 chiffres #RRGGBBAA.

// rgba(52, 152, 219, 0.5) → HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}
rgbToHex(52, 152, 219); // "#3498db"

// Avec alpha sur 8 chiffres (#RRGGBBAA)
const a = Math.round(0.5 * 255).toString(16).padStart(2, '0'); // "80"
// résultat : #3498db80

De HEX vers RGBA

L'opération inverse découpe la chaîne HEX en trois paires et convertit chaque paire de base 16 vers base 10.

// #3498db → rgba(52, 152, 219, 1)
function hexToRgb(hex) {
  const n = parseInt(hex.slice(1), 16);
  return {
    r: (n >> 16) & 255,
    g: (n >> 8) & 255,
    b: n & 255,
  };
}
hexToRgb('#3498db'); // { r: 52, g: 152, b: 219 }

Le sélecteur ci-dessus fait tout cela pour vous : collez n'importe quel code couleur (rgba(), rgb(), hsl(), hsla() ou HEX) dans le champ « Coller un code couleur » et obtenez instantanément les cinq formats équivalents, prêts à copier.

Quand utiliser chaque format

• ✅ HEX — Variables CSS, tokens de design, valeurs statiques, compatibilité maximale
• ✅ RGB/RGBA — Quand vous avez besoin de transparence ou que vous calculez des valeurs dynamiquement en JS
• ✅ HSL — Idéal pour créer des palettes : il suffit de changer la luminosité pour avoir des variantes claires/sombres
• ✅ HSLA — Overlays, ombres colorées semi-transparentes

/* Exemple avec HSL pour un système de couleurs */
--color-primary:       hsl(204, 70%, 53%);
--color-primary-light: hsl(204, 70%, 70%);
--color-primary-dark:  hsl(204, 70%, 35%);

Accessibilité et contraste des couleurs

Les normes WCAG (Web Content Accessibility Guidelines) imposent un ratio de contraste minimum entre le texte et son fond :

• AA Normal — ratio ≥ 4.5:1 pour texte normal
• AA Large — ratio ≥ 3:1 pour grands textes (18px+)
• AAA — ratio ≥ 7:1 pour une accessibilité maximale

Outils de palettes de couleurs populaires

• Coolors.co — générateur de palettes harmonieuses, très populaire
• Adobe Color — roue chromatique avancée, règles d'harmonie (complémentaire, triadique...)
• Tailwind CSS Colors — palette standardisée prête à l'emploi
• Material Design Colors — système de couleurs de Google
• Open Color — palette open source optimisée pour les UI
• Paletton — outil de création de palettes complémentaires