Convertisseur de couleurs

Une couleur, trois dialectes

Dans une journée de travail normale, la même couleur arrive dans trois costumes différents : la charte graphique vous donne un code HEX, une bibliothèque de canevas ou de graphiques veut les chiffres RGB, et le CSS moderne se manipule plus agréablement en HSL. Cette page garde les trois synchronisés — saisissez dans le champ qui correspond à ce qu'on vous a donné, et les deux autres se réécrivent au fur et à mesure, avec le nuancier qui montre à quoi les chiffres ressemblent réellement. Le HEX abrégé fonctionne aussi : collez #f80 et il se développe en #ff8800, exactement comme un navigateur le lirait. Il n'y a pas de sélecteur de couleur avec lequel lutter ; l'objectif ici est de traduire précisément une valeur que vous avez déjà.

Construire une palette avec HSL

HSL justifie sa place dès l'instant où vous avez besoin de variations d'une couleur plutôt que de la couleur elle-même. Gardez la teinte fixe et déplacez seulement la luminosité : baissez-la de dix points pour un état de survol, montez-la de quarante pour un fond teinté, et chaque variante reste reconnaissablement la même couleur — quelque chose de presque impossible à faire en modifiant directement les chiffres HEX. Réduire la saturation donne la version adoucie et grisée qui convient aux boutons désactivés et aux bordures discrètes. Comme les champs se mettent à jour les uns les autres en direct, un flux de travail rapide consiste à coller votre HEX de marque, relever le HSL, ajuster un chiffre, et recopier le HEX frais — une petite palette en moins d'une minute, sans logiciel de design.

Des limites honnêtes, et une astuce voisine

Deux choses que ce convertisseur ne fait volontairement pas. Il n'a pas de canal alpha — le champ RGB parle rgb(), pas rgba() — donc la transparence est quelque chose que vous ajoutez ensuite dans votre CSS, là où elle a sa place. Et les valeurs HSL sont arrondies à des nombres entiers pour la lisibilité, ce qui signifie qu'un aller-retour HEX vers HSL vers HEX peut dériver d'un point — invisible à l'écran, mais bon à savoir si vous comparez des fichiers de style. L'outil est gratuit et sans limite, comme tous nos outils pour développeurs. Une association qui vaut la peine d'être retenue : une fois que cette page vous a dit exactement quelle couleur est le fond d'un logo, notre outil de transparence d'image peut retirer précisément cette couleur de l'image — un duo pratique lors de la préparation de visuels pour un site web.

Trois façons de décrire la même couleur

HEX et RGB décrivent une couleur par l'intensité de la lumière rouge, verte et bleue (avec simplement des notations différentes) — HSL la décrit plutôt par teinte, saturation et luminosité, ce qui est souvent plus intuitif pour choisir ou ajuster une nuance à la main.