Convertisseur de couleurs

Comment utiliser Convertisseur de couleurs

1. Saisissez la couleur dans n'importe quel format.
2. Consultez la conversion vers les autres.
3. Copiez le format dont vous avez besoin.

Quel format pour quel usage

Ils ne sont pas interchangeables en pratique, même s'ils décrivent la même couleur.

HEX est ce que l'on copie depuis une maquette. Compact et universel, mais opaque : devant #3A7BD5, impossible de dire si la couleur est claire ou foncée sans la voir.

HSL a longtemps été la réponse à ce problème, puisqu'il sépare la teinte de la clarté. Son défaut est que sa clarté ne correspond pas à la perception : un jaune à 50 % paraît bien plus clair qu'un bleu à 50 %.

OKLCH règle précisément cela. Son axe de clarté correspond à la perception humaine, donc deux couleurs de même L paraissent aussi claires l'une que l'autre malgré des teintes différentes. Pour construire une échelle cohérente, la différence est considérable.

OKLCH permet en outre de décrire des couleurs hors de l'espace sRGB, ce qui exploite les écrans à gamut étendu. Prévoyez une valeur de repli pour les navigateurs anciens.

Le canal alpha

La transparence s'écrit de plusieurs façons, qu'il vaut mieux connaître.

En HEX, on peut ajouter deux chiffres à la fin : #3A7BD580 correspond à peu près à la même couleur à 50 % d'opacité. Compact mais illisible.

En RGB et HSL, la syntaxe moderne utilise une barre oblique : rgb(58 123 213 / 50%). L'ancienne syntaxe avec virgules et rgba() fonctionne toujours, mais la moderne est recommandée.

Ne confondez pas l'alpha d'une couleur avec la propriété opacity. L'alpha n'affecte que cette couleur ; opacity affecte tout l'élément et ses descendants, texte compris.

Et un avertissement sur le contraste : une couleur semi-transparente change de contraste selon ce qui se trouve derrière. Vérifiez le contraste avec la couleur effectivement obtenue, pas avec la couleur d'origine.

Variables et mode sombre

La façon de stocker les couleurs compte plus que le format lui-même.

Déclarez vos couleurs en variables CSS dans :root et utilisez-les toujours par ce biais. Changer une palette devient une modification de quelques lignes plutôt qu'une chasse aux valeurs dans tout le fichier.

Nommez ces variables par leur rôle et non par leur apparence : --couleur-texte et --couleur-surface vieillissent bien mieux que --bleu-clair, qui n'aura plus de sens dès que la teinte changera.

Pour le mode sombre, redéfinissez uniquement les variables à l'intérieur de la requête de média prefers-color-scheme. Si vous déclarez une couleur uniquement dans ce bloc et pas à l'extérieur, le mode clair se retrouve sans valeur — une panne silencieuse très répandue.

N'inversez pas la palette telle quelle. Le blanc pur sur noir pur éblouit ; un gris très clair sur un gris très foncé fonctionne généralement mieux. Et les couleurs saturées paraissent plus intenses sur fond sombre : il vaut mieux leur retirer un peu de saturation.

Questions fréquentes