Convertisseur de couleurs : HEX, RGB, HSL et HSV sans prise de tête

J'ai perdu le compte du nombre de fois où j'ai été en train d'écrire du CSS et j'avais besoin de convertir un code hexadécimal en RGB. Le designer envoie #4A90E2, le code nécessite rgb(74, 144, 226), et pour une raison quelconque mon cerveau ne peut pas faire ce calcul à la volée. Peut-être que le vôtre peut — mais le mien, certainement pas.

Dans les projets réels, cela arrive constamment. Les fichiers de design sont remplis de codes HEX, les propriétés CSS personnalisées peuvent avoir besoin de HSL pour les variantes de thème, et les API Canvas ou les attributs SVG veulent parfois du RGB. Ces formats ne fonctionnent pas bien ensemble, et passer de l'un à l'autre manuellement est une tâche fastidieuse et source d'erreurs.

C'est le problème que résout un convertisseur de couleurs. Collez une couleur dans n'importe quel format, récupérez-la dans les quatre formats principaux instantanément.

Pourquoi plusieurs formats de couleurs existent

L'existence de plusieurs formats de couleurs n'est pas un accident — chacun a été conçu pour un cas d'usage différent, et chacun a de vraies forces.

HEX (#RRGGBB) est le format le plus ancien et le plus universellement supporté dans les contextes web. Il est compact, facile à copier depuis les DevTools du navigateur, et presque tous les outils de design le sortent par défaut. L'inconvénient est qu'il est complètement non intuitif à lire.

RGB (rouge, vert, bleu) correspond à la façon dont les moniteurs d'ordinateurs fonctionnent réellement. Les valeurs vont de 0 à 255. Il est essentiel quand vous avez besoin de transparence (rgba(74, 144, 226, 0.5)).

HSL (teinte, saturation, luminosité) est le format que les designers tendent à aimer une fois qu'ils le découvrent. La valeur pratique : vous pouvez rendre une couleur de bouton légèrement plus claire au survol en ajustant simplement la valeur L. Ce n'est pas possible intuitivement avec HEX.

HSV (teinte, saturation, valeur) est étroitement lié à HSL mais fonctionne différemment aux extrêmes. La plupart des interfaces de sélection de couleurs dans les outils de design fonctionnent en interne avec HSV.

Comment utiliser le convertisseur de couleurs

Rendez-vous sur /tools/color-converter.

Étape 1 : Saisir la couleur de départ. Vous pouvez taper ou coller une valeur dans l'un des quatre formats. La saisie HEX accepte la forme à six caractères (#4A90E2) ou la forme abrégée à trois caractères (#48F).

Étape 2 : Voir la prévisualisation en temps réel. Pendant que vous tapez, un échantillon de couleur se met à jour en temps réel afin que vous puissiez voir à quoi ressemble la couleur.

Étape 3 : Copier le format dont vous avez besoin. Chaque champ de sortie a un bouton de copie. Cliquez dessus, et la valeur est dans votre presse-papiers, prête à être collée dans votre CSS.

Cas d'utilisation pratiques

Propriétés CSS personnalisées et design tokens. Lors de la construction d'un système de design, vous pourriez définir votre couleur primaire comme --color-primary: hsl(210, 72%, 59%). Mais votre designer vous a donné #4A90E2. Le convertisseur comble ce fossé.

API Canvas et SVG. La propriété fillStyle du canvas HTML accepte toute chaîne de couleur CSS. Mais certaines bibliothèques tierces peuvent avoir besoin de tableaux RGB comme [74, 144, 226].

Vérification de l'accessibilité du contraste des couleurs. Lors de l'utilisation d'un vérificateur de contraste des couleurs, vous devez souvent fournir des couleurs dans des formats spécifiques.

Exports d'outils de design. Figma exporte les couleurs en HEX par défaut. Sketch donne souvent des valeurs RGB. Pouvoir convertir dans le format que votre projet utilise évite les changements de contexte constants.

Outils associés

• Sélecteur de couleurs : Choisissez visuellement une couleur, copiez son code HEX, et collez-le dans le convertisseur pour obtenir HSL ou RGB.
• Vérificateur de contraste des couleurs : Après la conversion, vérifiez les ratios de contraste WCAG.
• Générateur de palette de couleurs : Générez une palette complète depuis une couleur de base, puis convertissez chaque couleur dans le format dont votre projet a besoin.

Limites : soyons honnêtes

Les espaces de couleurs d'impression ne sont pas pris en charge. CMYK n'a pas d'équivalent direct dans les espaces de couleurs RGB pour écran. Pour la conversion entre couleurs écran et impression, vous aurez besoin d'un logiciel de gestion des couleurs dédié.

Les espaces de couleurs perceptuellement uniformes ne sont pas couverts. Les navigateurs modernes commencent à supporter OKLCH et OKLAB. Ce convertisseur se concentre sur les quatre formats qui couvrent la grande majorité des besoins pratiques actuels.

La précision des couleurs dépend de l'étalonnage du moniteur. Un #4A90E2 sur un moniteur non étalonné a l'air différent de celui sur un moniteur professionnel étalonné.

Conclusion

La conversion de format de couleur est l'une de ces petites tâches récurrentes qui restent agaçantes si vous essayez de les faire manuellement. Le calcul hexadécimal-RGB nécessite toujours plusieurs essais, et se rappeler l'équivalent HSL d'une couleur de marque de mémoire est pratiquement impossible.

Avoir un convertisseur élimine entièrement cette friction. Saisir une couleur, obtenir les quatre formats, copier ce dont vous avez besoin. Si vous travaillez régulièrement sur le design UI ou le CSS, essayez le convertisseur de couleurs. Et si vous construisez un système de couleurs, jetez un oeil au générateur de palette de couleurs.