Trois notations, une couleur
Choisissez une couleur visuellement ou tapez un code HEX, et l'outil affiche les trois notations CSS cote a cote — cliquez sur une valeur pour la copier. Elles decrivent exactement la meme couleur, simplement dans des systemes de coordonnees differents :
| Format | Exemple | Ce que signifient les nombres |
|---|---|---|
| HEX | #7c5cfc | Rouge, vert, bleu en paires hex, 00–ff |
| RGB | rgb(124, 92, 252) | Les memes trois canaux en decimal, 0–255 |
| HSL | hsl(252, 96%, 67%) | Teinte sur la roue chromatique (0–360°), saturation, luminosite |
Exemple concret : lire #7c5cfc
HEX vers RGB est une conversion de base directe : 7c = 7×16+12 = 124 rouge, 5c = 92 vert, fc = 252 bleu. Le bleu est le canal le plus fort avec un peu de rouge melange, donc la couleur se situe dans la plage des violets — le HSL le confirme : la teinte 252° se trouve entre le bleu (240°) et le magenta (300°), la saturation 96 % signifie qu'elle est presque pure, et la luminosite 67 % la place du cote pale du point median. HEX et RGB sont des notations interchangeables des memes valeurs ; le HSL est un veritable remappage, ce qui explique pourquoi ses valeurs semblent sans rapport au premier abord.
Quel format quand
- HEX est le choix compact par defaut pour le CSS, les remises de design et les chartes graphiques — facile a copier, difficile a mal saisir.
- RGB correspond a la facon dont les ecrans et les API graphiques fonctionnent reellement, et s'etend naturellement a la transparence sous forme
rgba(). - HSL est le format pour ajuster les couleurs : besoin d'un etat de survol ? Gardez la teinte et la saturation, baissez la luminosite de 10 %. Besoin d'un accent complementaire ? Tournez la teinte de 180°. Faire ce calcul en HEX est penible ; en HSL, c'est un seul nombre.
Un flux de travail pratique : choisissez votre couleur de marque avec le selecteur visuel, copiez la valeur HSL, et derivez votre palette (survol, bordures, arriere-plans) en ne faisant varier que la luminosite — les nuances restent visuellement liees automatiquement.
Regles de saisie et confidentialite
Le champ de texte accepte des codes HEX complets a six chiffres avec un # en tete (les formes courtes comme #fff doivent etre etendues en #ffffff). Le selecteur met a jour tous les formats en direct, et les valeurs HSL sont arrondies a des nombres entiers — reconvertir peut decaler une valeur de ±1, ce qui est invisible a l'ecran. Toute la conversion tourne entierement dans votre navigateur ; rien n'est envoye a un serveur.