Convertisseur de couleurs

HEX, RGB, HSL, OKLCH et nuances

Couleur

HEX (3, 4, 6 ou 8 chiffres), rgb(), rgba(), hsl(), hsla() ou oklch()

Formats

HEX: #3b82f6
RGB: rgb(59 130 246)
HSL: hsl(217.2 91.2% 59.8%)
OKLCH: oklch(62.31% 0.188 259.81)

Nuances

Nom de la palette

Format des valeurs

Nuances calculées en OKLCH : même teinte, luminosité décroissante, chroma réduite aux extrémités pour que chaque palier reste dans sRGB. La couleur saisie prend le palier le plus proche. Cliquez sur une nuance pour copier sa valeur.

Variables CSS

:root {
  --brand-50: oklch(97.1% 0.014 259.815);
  --brand-100: oklch(93.6% 0.031 259.815);
  --brand-200: oklch(88.5% 0.056 259.815);
  --brand-300: oklch(80.8% 0.097 259.815);
  --brand-400: oklch(71.1% 0.151 259.815);
  --brand-500: oklch(62.3% 0.188 259.815);
  --brand-600: oklch(56.7% 0.184 259.815);
  --brand-700: oklch(49.6% 0.165 259.815);
  --brand-800: oklch(43.3% 0.139 259.815);
  --brand-900: oklch(37.9% 0.117 259.815);
  --brand-950: oklch(27.1% 0.083 259.815);
}

Tailwind v4 (@theme)

@theme {
  --color-brand-50: oklch(97.1% 0.014 259.815);
  --color-brand-100: oklch(93.6% 0.031 259.815);
  --color-brand-200: oklch(88.5% 0.056 259.815);
  --color-brand-300: oklch(80.8% 0.097 259.815);
  --color-brand-400: oklch(71.1% 0.151 259.815);
  --color-brand-500: oklch(62.3% 0.188 259.815);
  --color-brand-600: oklch(56.7% 0.184 259.815);
  --color-brand-700: oklch(49.6% 0.165 259.815);
  --color-brand-800: oklch(43.3% 0.139 259.815);
  --color-brand-900: oklch(37.9% 0.117 259.815);
  --color-brand-950: oklch(27.1% 0.083 259.815);
}

À propos de l'outil

Ce convertisseur lit une couleur CSS et l’affiche en HEX, RGB, HSL et OKLCH, avec un bouton de copie pour chaque format. Il accepte le HEX à 3, 4, 6 ou 8 chiffres et les fonctions rgb(), rgba(), hsl(), hsla() et oklch(), avec virgules ou espaces et une éventuelle transparence. Si une couleur OKLCH sort de l’espace sRGB, l’outil le signale et donne la couleur affichable la plus proche.

Il génère aussi une gamme de onze nuances, de 50 à 950, calculées en OKLCH : même teinte, luminosité décroissante, chroma réduite aux extrémités. La couleur saisie occupe le palier dont la luminosité est la plus proche. Vous nommez la palette, choisissez des valeurs OKLCH ou HEX, et copiez le résultat en variables CSS ou en bloc @theme pour Tailwind CSS v4.

Comment l'utiliser

Saisissez une couleur dans le champ Couleur, ou choisissez-la avec le sélecteur.
Dans Formats, copiez la valeur HEX, RGB, HSL ou OKLCH dont vous avez besoin.
Dans Nuances, indiquez le Nom de la palette et le Format des valeurs, OKLCH ou HEX.
Cliquez sur une nuance pour copier sa valeur, ou sur Copier les variables ou Copier le bloc @theme.

Questions fréquentes

Pourquoi utiliser OKLCH plutôt que HSL ?

En OKLCH, la luminosité correspond à la clarté perçue : deux couleurs de même L paraissent aussi claires l’une que l’autre, ce qui n’est pas le cas en HSL. C’est pratique pour construire des nuances régulières, et les navigateurs actuels comprennent oklch() en CSS.

Que se passe-t-il pour une couleur hors du gamut sRGB ?

Une couleur OKLCH peut dépasser ce qu’un écran sRGB affiche. L’outil le signale, garde la valeur OKLCH exacte, et calcule les versions HEX, RGB et HSL en réduisant la chroma, à luminosité et teinte constantes.

Comment utiliser les nuances avec Tailwind CSS ?

Copiez le bloc @theme dans votre CSS principal avec Tailwind v4. Il définit des variables --color-nom-50 à --color-nom-950, ce qui rend disponibles des classes comme bg-nom-500 ou text-nom-900, où nom est le nom de palette saisi.

Les noms de couleur comme red ou navy sont-ils acceptés ?

Non. L’outil lit uniquement les codes hexadécimaux et les fonctions rgb(), rgba(), hsl(), hsla() et oklch(). Pour un nom de couleur CSS, saisissez son équivalent hexadécimal, par exemple #000080 pour navy.