Guide de l’outil
À propos de Convertisseur de couleur
Color Converter transforme les couleurs entre HEX, RGB, HSL et HSV pour CSS du front-end, transmission du design et nettoyage de variables de thème.
Saisissez #4f46e5, rgb(...) ou hsl(...) pour normaliser la couleur en formats copiables.
Comment utiliser Color Converter
- Collez une valeur HEX, RGB, RGBA, HSL ou HSLA.
- Convertissez et vérifiez les sorties HEX, RGB, HSL et HSV.
- Utilisez l’aperçu de couleur puis copiez un format ou tous les formats.
Cas d’utilisation
- Convertir un HEX de maquette en CSS rgb() ou hsl().
- Ajuster lightness et saturation en HSL pour tester des hover states.
- Normaliser des color tokens pendant le nettoyage d’un thème.
Formats couleur et limites
HEX, RGB, HSL et HSV décrivent la même couleur avec des coordonnées différentes. Ce converter conserve la couleur RGB; alpha dans RGBA ou HSLA est accepté mais pas conservé en sortie.
- Un HEX 3 chiffres devient un HEX 6 chiffres.
- Les canaux RGB doivent rester entre 0 et 255.
- HSL utilise des pourcentages pour S/L et hue tourne de 0 à 360 degrés.
- HSV est courant dans les pickers, HSL est souvent meilleur pour ajuster les thèmes CSS.
Questions fréquentes sur Convertisseur de couleur
- Convertit-il HEX to RGB et RGB to HEX?
- Oui. Une entrée HEX produit RGB/HSL/HSV, et une entrée RGB produit HEX/HSL/HSV.
- Pourquoi alpha manque-t-il?
- L’outil se concentre sur les couleurs opaques, donc alpha de RGBA/HSLA est ignoré.
- Mes couleurs sont-elles envoyées?
- Non. Parsing, conversion, preview et copie s’exécutent localement dans le navigateur.
Conversion et lisibilité
Changer de format ne garantit pas le contraste. Avant texte, boutons ou liens, testez la couleur sur le fond réel avec contraste WCAG, marque et états UI.
Choisir le bon format de couleur CSS
La même couleur peut être écrite en HEX, RGB, HSL ou HSV, mais chaque format convient à un travail de maintenance différent.
- Utilisez HEX pour des valeurs compactes de design handoff et des variables de thème stables.
- Utilisez CSS rgb() ou hsl() pour alpha, variables ou composition dynamique.
- Utilisez HSL pour les variantes hover, active, plus claires ou plus sombres, car hue, saturation et lightness sont plus lisibles que RGB brut.
Checks accessibilité avant publication
La conversion garde les valeurs équivalentes, mais ne prouve pas la lisibilité, la clarté des états ni la conformité contraste.
- Vérifiez textes et boutons sur le vrai fond avec les règles de contraste WCAG.
- Ne communiquez pas erreur, succès ou disabled uniquement par la couleur; ajoutez texte, icônes ou changements de forme.
- Pour les couleurs de marque sur links ou focus rings, vérifiez aussi hover, active, disabled et selected.