Convertisseur de Couleurs - Outil en ligne gratuit

Fonctionnalités

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Sélecteur de couleur visuel

Aperçu en direct

Sortie en variables CSS

Comment Utiliser

1. Choisissez une couleur (ou cliquez sur la surface, collez un HEX, utilisez la pipette, ou appuyez sur Espace pour une couleur aléatoire).

2. Tous les formats — HEX, RGB, HSL, OKLCH — se convertissent en direct dans les deux sens.

3. Copiez une valeur seule ou tout le bloc de variables CSS ; changez la surface pour juger la couleur sur blanc, gris ou sombre.

À propos de cet outil

Les designers choisissent les couleurs à l'œil, le CSS attend une chaîne et chaque outil parle un format différent. Ce convertisseur synchronise une même couleur en HEX, RGB, HSL et OKLCH : modifiez n'importe quel champ ou utilisez le sélecteur, et tout le reste se met à jour instantanément. HEX et RGB décrivent les canaux rouge, vert et bleu ; HSL décrit teinte, saturation et luminosité, plus faciles à ajuster à la main ; OKLCH est un format perceptuel plus récent de CSS Color Level 4, où des pas de luminosité égaux paraissent égaux à l'œil, ce qui le rend idéal pour des palettes cohérentes. Vous pouvez copier une seule valeur ou un bloc prêt à l'emploi de propriétés personnalisées CSS, et prévisualiser la couleur sur fond blanc, gris ou sombre avant de l'utiliser.

Questions Fréquentes

Quel format utiliser en CSS ?

HEX et rgb() fonctionnent partout et conviennent aux couleurs fixes. hsl() est pratique pour ajuster la luminosité ou la saturation à la main. oklch() est pris en charge par les navigateurs actuels et convient le mieux aux palettes systématiques, car sa luminosité est perceptuellement uniforme.

Pourquoi des couleurs HSL à 50 % de luminosité paraissent-elles si différentes ?

HSL est un réarrangement mathématique du RGB, pas un modèle de la vision humaine : un jaune à 50 % paraît donc bien plus lumineux qu'un bleu à 50 %. La luminosité d'OKLCH est conçue pour correspondre à la luminosité perçue, d'où son usage croissant dans les design systems.

Pourquoi une valeur convertie peut-elle varier légèrement au retour ?

HEX et RGB stockent des entiers de 0 à 255, alors que HSL et OKLCH utilisent des décimales. L'arrondi lors de la conversion peut décaler un canal d'un cran, ce qui est invisible à l'œil.

Puis-je prélever une couleur ailleurs sur mon écran ?

Dans les navigateurs compatibles avec l'API EyeDropper, comme Chrome et Edge sur ordinateur, le bouton pipette permet de prélever n'importe quel pixel de l'écran. Les autres navigateurs affichent le sélecteur de couleur standard.

Que contient le bloc de variables CSS ?

Il liste la même couleur sous forme de propriétés personnalisées dans plusieurs formats, par exemple --color-hex, --color-rgb, --color-hsl et --color-oklch, pour que vous les colliez dans :root et utilisiez le format dont votre code a besoin.