Convertisseur de couleurs/ HEX · RGB · HSL · HSV · CMYK

Convertissez entre les formats HEX, RGB, HSL, HSV et CMYK — avec un sélecteur de couleurs en direct et une palette de nuances.

HEX
Nuances
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)

Cet outil a-t-il résolu votre problème ?

Exemples de code

CSS / Tailwind
/* CSS custom properties */
:root {
  --color-primary: #3b82f6;         /* HEX */
  --color-primary-rgb: 59, 130, 246; /* RGB values only */
}

/* Usage */
.button {
  background: var(--color-primary);
  color: hsl(210, 40%, 98%);        /* HSL */
  border: 1px solid rgb(59 130 246 / 30%); /* CSS 4 syntax */
}

/* Tailwind config */
// tailwind.config.js
colors: { brand: '#3b82f6' }
JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

// RGB → HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}

// npm: chroma-js (full-featured)
import chroma from 'chroma-js';
chroma('#3b82f6').rgb()   // [59, 130, 246]
chroma('#3b82f6').hsl()   // [0.58, 0.89, 0.60]
chroma.scale(['white','#3b82f6']).colors(6)
Python
import colorsys

# HEX → RGB
hex_str = '#3b82f6'
rgb = tuple(int(hex_str[i:i+2], 16) for i in (1, 3, 5))
# (59, 130, 246)

# RGB → HSL (0-1 range)
r, g, b = (v / 255 for v in rgb)
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")

# pip install colour-science
import colour
colour.sRGB_to_XYZ([0.23, 0.51, 0.96])
Swift / iOS
import SwiftUI

// HEX to Color
extension Color {
  init(hex: String) {
    let hex = hex.trimmingCharacters(
      in: .alphanumerics.inverted)
    var int = UInt64()
    Scanner(string: hex).scanHexInt64(&int)
    let r = Double((int >> 16) & 0xFF) / 255
    let g = Double((int >> 8)  & 0xFF) / 255
    let b = Double( int        & 0xFF) / 255
    self.init(red: r, green: g, blue: b)
  }
}

Color(hex: "#3b82f6")

Questions fréquentes

Quelle est la différence entre HEX, RGB et HSL ?
HEX (hexadécimal) est le format web le plus courant — ex. #FF5733 — et représente essentiellement le RGB en base 16. RGB spécifie directement l'intensité des canaux rouge, vert et bleu (0–255). HSL utilise la teinte (Hue), la saturation et la luminosité (Lightness), plus intuitif pour ajuster les couleurs.
Quelle est la différence entre HSV et HSL ?
HSV (Teinte, Saturation, Valeur) et HSL (Teinte, Saturation, Luminosité) sont deux modèles de couleur adaptés à la perception humaine. Différence clé : en HSV, V=100% donne la teinte pure la plus lumineuse. En HSL, L=50% donne la teinte la plus pure — L=100% est blanc, L=0% est noir. Photoshop et Figma utilisent HSB (≈ HSV) ; CSS utilise HSL.
Qu'est-ce que le CMYK et pourquoi le web ne l'utilise-t-il pas ?
CMYK (Cyan, Magenta, Jaune, Noir/Key) est le modèle colorimétrique de l'industrie de l'impression, basé sur le mélange soustractif des encres. Le web et les écrans utilisent le RGB additif (mélange de lumière). CSS ne supporte pas nativement le CMYK — les designers convertissent du RGB au CMYK avant l'impression.
Comment utiliser les couleurs HEX en CSS ?
CSS accepte : #RRGGBB à 6 chiffres (ex. #3b82f6), le raccourci #RGB à 3 chiffres (ex. #38f = #3388ff), et #RRGGBBAA à 8 chiffres pour l'alpha (ex. #3b82f680 = 50% d'opacité). Les navigateurs modernes supportent aussi la syntaxe CSS Color Level 4 color(srgb ...).
Comment le contraste des couleurs est-il calculé ?
Le WCAG recommande un rapport de contraste d'au moins 4,5:1 (AA) ou 7:1 (AAA) pour le texte courant sur fond. Le contraste est calculé via la luminance relative : linéariser les valeurs RGB, puis calculer (L1 + 0,05) / (L2 + 0,05) où L1 est la luminance de la couleur la plus claire.
Comment les nuances de couleur sont-elles générées ?
La palette de nuances maintient la teinte (H) et la saturation (S) d'origine tout en faisant varier la luminosité HSL (L) sur 6 valeurs (90% à 15%). Cela reflète la génération des palettes Tailwind CSS — utile pour construire rapidement une gamme de couleurs de marque.