Convertisseur de couleurs (HEX, RGB, HSL)
Convertissez les couleurs entre HEX (#RRGGBB), RVB (0–255) et HSL (teinte, saturation, luminosité) en temps réel. Ajustez le sélecteur ou saisissez les valeurs pour voir tous les formats mis à jour ensemble — idéal pour CSS, le transfert Figma et les directives de marque. HSL rend les ajustements intuitifs (plus clairs/plus foncés sans changement de teinte) plus faciles que l'édition de chiffres hexadécimaux.
Couleur
Result
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
Quand choisir autre chose
• Lorsque vous devez vérifier le contraste WCAG, utilisez le vérificateur de contraste.
• Lorsque vous avez besoin d'imprimer en CMJN ou Pantone, utilisez des outils spécifiques à l'impression.
• Lorsque vous générez des dégradés complets, utilisez le générateur de dégradés CSS.
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.
L'accessibilité commence dès la conversion
Un beau violet #7C3AED sur blanc peut ne pas offrir de contraste pour un petit texte. Après avoir choisi les couleurs ici, exécutez les paires premier plan/arrière-plan via le vérificateur de contraste. Préférez les ajustements HSL pour corriger les échecs : assombrir le texte ou éclaircir l'arrière-plan tout en préservant la teinte. Ne nombre pas uniquement sur la couleur pour les erreurs — associez-la à des icônes et des étiquettes (WCAG 1.4.1).
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é.
Mes données sont-elles envoyées à un serveur ?
Non.
Cet outil est-il gratuit ?
Oui.