Convertisseur de Couleurs
Convertissez et visualisez les couleurs instantanément.
Options Avancées
Notre Convertisseur de Couleurs gratuit aide les designers et développeurs à convertir rapidement.
Gagnez du temps et réduisez les erreurs.
Fonctionnalités Avancées
- Conversion par lots
- Aperçu de dégradé CSS
- Opacité supportée
- Contrôle de contraste
- Suggestions d'harmonie des couleurs
Pourquoi la conversion des couleurs est importante
Une couleur précise assure des designs accessibles.
FAQ — Convertisseur de Couleurs
Frequently Asked Questions
Comment utiliser le convertisseur de couleurs
-
Entrez votre valeur de couleur
Saisissez ou collez n'importe quelle valeur de couleur : HEX (#3b82f6), RGB (59, 130, 246), HSL (217, 91 %, 60 %) ou CMYK. L'outil détecte automatiquement le format. -
Voir toutes les conversions instantanément
Tous les formats équivalents sont mis à jour en temps réel : HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK et propriété personnalisée CSS. Copiez n'importe quelle valeur en un seul clic. -
Utilisez le sélecteur de couleurs
Cliquez sur l'échantillon de couleur ou utilisez le sélecteur de couleurs natif du navigateur pour choisir visuellement une couleur et obtenir tous ses équivalents de format en une seule fois. -
Copiez et utilisez dans votre projet
Cliquez sur le bouton Copier de n'importe quel format pour l'envoyer dans votre presse-papiers. Collez-le directement dans CSS, Sass, Tailwind config, Figma ou vos flux de travail d'impression.
Exemples de conversions
La même couleur bleue exprimée dans tous les formats pris en charge :
| Format | Value | Usage |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, Figma |
| RGB | rgb(59, 130, 246) | CSS, Canvas API |
| RGBA | rgba(59, 130, 246, 1) | CSS with opacity |
| HSL | hsl(217, 91%, 60%) | CSS, design tokens |
| CMYK | C:76 M:47 Y:0 K:4 | Print / offset |
| HSV | 217°, 76%, 96% | Image editors |
Cas d'utilisation courants
Conception Web et interface utilisateur
Convertissez les couleurs HEX de la marque en HSL pour les propriétés personnalisées CSS et la configuration Tailwind, afin de garantir une cohérence thématique entre les modes clair et sombre.
Impression et prépresse
Convertissez les couleurs RVB ou HEX de l'écran en CMJN pour l'impression, afin d'éviter l'écueil courant des couleurs qui semblent magnifiques à l'écran, mais qui paraissent ternes à l'impression. convertir des données JSON, CSV et XML
Directives relatives à la marque
Documentez une palette complète de marques dans tous les formats (HEX pour le numérique, CMYK pour l'impression, référence Pantone) à partir d'une source unique et fiable.
Contrôles d'accessibilité
Récupérez les valeurs exactes des couleurs pour les tester dans un vérificateur de contraste, afin de vous assurer que les combinaisons de texte et d'arrière-plan répondent aux exigences WCAG AA ou AAA.
Workflows des développeurs
Convertissez rapidement les couleurs des outils de conception (Figma HEX) en variables CSS HSL pour créer des thèmes dynamiques et manipuler les couleurs de manière programmatique.
Comment ça marche
Toutes les conversions s'effectuent instantanément dans votre navigateur, sans aucune intervention du serveur.
L'outil analyse votre saisie en valeurs RVB normalisées (0-255 par canal), puis applique des formules de conversion standard à chaque format cible.
HSL (teinte, saturation, luminosité) est dérivé du RVB en trouvant le canal min/max, en calculant la luminosité comme leur moyenne, puis en calculant la saturation et l'angle de teinte.
Le CMJN est calculé à partir du RVB à l'aide de la formule suivante : K = 1 - max(R,G,B) ; C = (1-R-K)/(1-K) ; etc. Notez que la conversion RVB→CMJN dépend du périphérique utilisé : le CMJN à l'écran est une approximation, et non un profil d'impression.
À qui s'adresse cet outil ?
Développeurs front-end
Traduisez les jetons de conception entre les formats CSS et vérifiez rapidement les valeurs de couleur pendant le développement.
Concepteurs UI/UX
Convertissez les nuanciers Figma ou Sketch dans n'importe quel format requis par votre système de conception ou votre framework CSS.
Concepteurs graphiques
Convertissez les couleurs RVB de la marque en CMJN avant d'envoyer les illustrations à l'imprimerie, afin d'éviter toute surprise liée au décalage des couleurs.
Responsables de marque
Conservez une palette de couleurs unique pour tous les formats (numériques et imprimés) sans changer d'outil.
Testeurs d'accessibilité
Extrayez des valeurs chromatiques précises à utiliser dans les vérificateurs de contraste et les audits d'accessibilité.
Conseils pour travailler avec les couleurs
- Utilisez HSL dans les propriétés personnalisées CSS (--color-primary: hsl(217, 91%, 60%)) afin de pouvoir ajuster la luminosité avec calc() pour les états de survol et de désactivation.
- Demandez toujours une épreuve avant impression lorsque vous utilisez des conversions CMJN à partir de RVB — la correspondance des couleurs entre l'écran et l'impression nécessite un profil de couleur du périphérique.
- Utilisez le sélecteur de couleurs du navigateur pour prélever des couleurs directement à partir de captures d'écran ou d'éléments graphiques, sans avoir à copier les valeurs manuellement.
- Après la conversion, testez vos couleurs dans un vérificateur de contraste afin de confirmer que votre palette est conforme à la norme WCAG AA (4,5:1) pour le corps du texte.
- Enregistrez la palette de couleurs de votre marque dans tous les formats (HEX, RGB, CMYK) dans la documentation de votre système de conception afin d'éviter les conversions répétées.
Pourquoi une conversion précise des couleurs est-elle importante ?
- Les valeurs de couleur incohérentes entre les équipes de conception et de développement sont l'une des principales causes d'incohérence visuelle dans les produits commercialisés.
- Les espaces colorimétriques RVB et CMJN occupent des gammes différentes : les couleurs qui semblent vives à l'écran peuvent paraître ternes à l'impression sans une conversion appropriée.
- Le CSS HSL facilite considérablement la création de thèmes dynamiques (mode clair/foncé, teintes) par rapport au HEX, mais nécessite une conversion HEX-HSL précise pour démarrer.
- Les audits de conformité de la marque nécessitent des couleurs dans plusieurs formats : un seul convertisseur élimine les erreurs manuelles et permet de gagner des heures de va-et-vient.
Performance et confidentialité
Chaque conversion de couleur s'effectue entièrement dans votre navigateur à l'aide du langage JavaScript standard. Aucune valeur de couleur, palette ou donnée d'utilisation n'est jamais envoyée à un serveur. L'outil répond en moins de 10 ms par conversion, fonctionne hors ligne après la première visite et ne nécessite aucun compte ni inscription.
Note pédagogique : explication des espaces colorimétriques
RVB (additif)
Le RVB mélange la lumière rouge, verte et bleue. Tous les canaux à 255 = blanc ; tous à 0 = noir. Utilisé par les écrans, les appareils photo et les navigateurs Web.
HEX (abréviation Web)
HEX est codé en RVB en base 16. #3b82f6 = R:59, G:130, B:246. Il est identique au RVB, mais il s'agit simplement d'une notation plus compacte pour CSS et HTML.
HSL (perceptuel)
Le HSL sépare la teinte (angle de la roue chromatique 0-360°), la saturation (intensité) et la luminosité (clarté). Plus facile à comprendre que le RVB pour les designers.
CMJN (soustractif)
Le CMJN mélange les encres cyan, magenta, jaune et noir (key). Il soustrait du papier blanc. Le RVB tramé offre une gamme plus large : certaines couleurs RVB vives ne peuvent pas être reproduites en CMJN.
Dépannage
Le saviez-vous ?
La notation HEX a été introduite dans le langage HTML en 1996 avec la spécification HTML 3.2. Avant cela, les navigateurs ne reconnaissaient que 16 couleurs nommées (comme « rouge » et « bleu »). La palette complète de couleurs Web s'est élargie à 140 couleurs nommées avec CSS1, mais le format HEX est resté dominant, et l'est toujours, plus de 25 ans plus tard.
Le seul convertisseur de couleurs dont vous avez besoin
Que vous soyez développeur et que vous convertissiez des jetons Figma en CSS, designer et que vous fassiez le lien entre l'écran et l'impression, ou testeur d'accessibilité et que vous vérifiiez les rapports de contraste, cet outil gratuit convertit instantanément tous les principaux formats de couleurs, sans appel au serveur ni stockage de données. Entrez votre couleur, copiez le format dont vous avez besoin et reprenez votre travail de création.