Convertisseur de couleurs (HEX, RGB, HSL)
Convertissez les couleurs entre HEX (#RRGGBB), RVB (0–255) et HSL (teinte, saturation, luminosité) en temps réel.
Comment convertir les couleurs
1. Choisissez une couleur visuellement ou entrez des valeurs HEX, RVB ou HSL.
2. Consultez instantanément les valeurs équivalentes dans tous les formats pris en charge.
3. Ajustez la légèreté HSL pour les états de survol tout en conservant la teinte de la marque.
4. Copiez le format dont votre pile a besoin (#hex pour CSS, rgb() pour les navigateurs modernes).
Exemples de conversion de couleurs
Marque bleu #2563EB
RVB RVB (37, 99, 235) ; HSL hsl(217, 84%, 53%). Assombrir le survol : hsl (217, 84 %, 45 %) sans deviner l'hexagone.
CSS RVB vers HEX pour SVG
rgb(255, 87, 51) → #FF5733 pour les ressources de remplissage SVG et Android XML.
Gris neutre pour les bordures
hsl(220, 10 %, 90 %) → gris froid très clair ; augmentez légèrement la saturation pour les arrière-plans teintés de l'interface utilisateur.
Quand utiliser cet outil
• Lorsque vous traduisez des jetons de conception entre HEX dans Figma et HSL dans des variables CSS.
• Lorsque vous créez des thèmes clairs/sombres cohérents en modifiant la légèreté HSL.
• Lorsque vous documentez les palettes de marque pour les développeurs et les spécialistes du marketing.
Théorie des couleurs pour le travail sur l'interface utilisateur
Les couleurs complémentaires se trouvent en face sur la roue des teintes (espacées de 180°) — contraste élevé, à utiliser avec parcimonie pour les CTA. Les teintes analogues (±30°) semblent harmonieuses pour les tableaux de bord. Le chrome neutre de l'interface utilisateur utilise souvent des bleus ou des gris à faible saturation (HSL 220, 10 %, 96 %) plutôt que du #EEE pur, qui peut paraître chaud/froid sous différents écrans. Limitez la palette de marque à une teinte primaire, 2 à 3 neutres et des verts/rouges sémantiques pour le statut.
Questions fréquentes
À quoi sert le HSL ?
Ajuster la luminosité et la saturation tout en gardant la teinte stable — par ex. primaire, survol principal, sourdine primaire à partir d'une valeur de teinte.
HEX raccourci #RVB ?
#F53 s'étend à #FF5533. Nous acceptons les hexadécimaux à 3 ou 6 chiffres (# facultatif).
sRGB contre display-P3 ?
Cet outil utilise sRGB, standard pour le web CSS. Les écrans à large gamme peuvent s'afficher légèrement différemment.
Alpha/transparence ?
HEX à 8 chiffres (#RRGGBBAA) et rgba() peuvent être pris en charge lorsque l'outil expose les champs alpha — vérifiez l'interface utilisateur.
Pourquoi mes sommes RVB semblent-elles fausses en hexadécimal ?
Chaque canal est compris entre 0 et 255 → deux chiffres hexadécimaux. 255 = FF, pas « 255 » concaténé.