Dans quels cas l'utiliser ? Passer d'un format de couleur à l'autre selon ce qu'accepte un outil ou un code (CSS accepte les trois, certains logiciels n'en acceptent qu'un), et exporter directement la couleur en variable CSS, SCSS ou en entrée de config Tailwind.
Guide pratique
Une même couleur s'exprime différemment selon l'outil utilisé : un designer sur Figma parlera souvent en HEX, un développeur JavaScript manipulera parfois du RGB, et quelqu'un qui ajuste une teinte préfèrera le HSL, qui sépare teinte, saturation et luminosité de façon plus intuitive pour l'œil humain.
Exemple : le bleu #3B82F6 correspond en RGB à rgb(59, 130, 246), et en HSL à environ hsl(217, 91%, 60%). Partir du HSL est souvent plus pratique pour créer une variante plus claire ou plus sombre de la même teinte : garder la teinte 217 et la saturation à 91 % mais baisser la luminosité à 40 % donne une version plus foncée de ce même bleu, sans avoir à recalculer les valeurs RGB à tâtons.
- Pour un développeur front-end qui reçoit une couleur en HEX d'une maquette et doit l'intégrer en variable CSS.
- Pour créer directement une variable SCSS ou une entrée de palette Tailwind sans taper le code à la main.
- Pour comprendre comment une couleur est réellement composée avant d'en créer une variante cohérente.
L'export direct en format CSS, SCSS ou config Tailwind évite l'étape manuelle de réécriture du code, source fréquente de fautes de frappe dans les projets.
Questions fréquentes
Pourquoi HSL est-il utile en plus de HEX et RGB ?
Parce qu'il sépare la teinte, la saturation et la luminosité, ce qui rend beaucoup plus simple d'éclaircir, foncer ou désaturer une couleur sans recalculer un code HEX à la main.
Le format HEX est-il toujours sur 6 caractères ?
Le plus souvent oui (#RRGGBB), mais il existe aussi une forme courte à 3 caractères (#RGB) et une forme avec transparence à 8 caractères (#RRGGBBAA), non couvertes par cet outil.
Cet outil fait partie de Quiko, une collection de 101 générateurs gratuits.