Convertir et analyser un code couleur web
Le générateur de code couleur aide à passer d'une couleur HEX à ses équivalents RGB, HSL, nom CSS éventuel et couleur complémentaire. Il est utile lorsqu'un designer fournit un code HEX, lorsqu'un développeur doit écrire une valeur rgb() ou hsl(), ou lorsqu'il faut trouver rapidement une couleur d'accent opposée sur le cercle chromatique. La page synchronise un sélecteur visuel et un champ texte, normalise l'entrée, met à jour l'aperçu et propose des boutons de copie pour chaque résultat.
HEX, RGB et HSL
Le format HEX représente les composantes rouge, verte et bleue sous forme hexadécimale, par exemple #3D7EF7. Le format RGB exprime les mêmes composantes en nombres de 0 à 255, ce qui se lit facilement dans CSS avec rgb(61, 126, 247). Le format HSL sépare la teinte, la saturation et la luminosité : il est souvent plus pratique pour ajuster une couleur, créer des variations ou comprendre pourquoi deux bleus paraissent proches. L'outil convertit HEX vers RGB, puis calcule HSL à partir du maximum, du minimum et de l'écart entre les canaux.
Couleur complémentaire et noms CSS
La couleur complémentaire est calculée en ajoutant 180 degrés à la teinte HSL, puis en reconvertissant le résultat en HEX. Cette valeur peut servir d'accent, d'état actif ou de repère visuel, mais elle doit être testée avec le reste de la palette. La page recherche aussi si le code correspond exactement à un nom CSS standard, comme red, white ou rebeccapurple. Si aucun nom exact n'existe, l'outil affiche un tiret au lieu d'inventer une appellation approximative.
Validation et copie
Le champ texte accepte une valeur avec ou sans dièse, puis la normalise en majuscules lorsqu'elle est valide. Les formats courts ou incomplets ne sont pas forcés en résultat incertain ; l'aperçu n'est mis à jour que lorsqu'une valeur HEX complète peut être interprétée. Chaque bloc de résultat possède un bouton de copie, ce qui accélère le passage vers un fichier CSS, une variable Sass, un thème Bootstrap ou une configuration d'application. Pour un usage en production, vérifiez aussi le contraste entre texte et arrière-plan. Deux couleurs peuvent être mathématiquement complémentaires mais trop lumineuses ensemble, trop agressives pour une interface de travail ou insuffisantes pour des utilisateurs ayant une basse vision.
Cas d'usage fréquents
L'outil est pratique pour documenter une couleur dans une charte, convertir une valeur fournie par un sélecteur graphique, créer une variation HSL ou récupérer rapidement un complément pour un badge, un graphique ou un état de survol.
Commentaires