Aller au contenu
SPCXTools

Convertisseur de couleurs

Convertissez n'importe quelle couleur entre les formats HEX, RGB, HSL, HSV et CMYK, et vérifiez son contraste.

Fonctionne en local — vos fichiers ne quittent pas votre appareil

Chargement de l’outil…

Comment utiliser : Convertisseur de couleurs

  1. 1Saisissez ou collez une couleur dans n'importe quel format — par exemple #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) ou un nom CSS comme tomato — ou utilisez le sélecteur de couleurs.
  2. 2Retrouvez la même couleur en HEX, RGB, HSL, HSV et CMYK et copiez le format dont vous avez besoin.
  3. 3Vérifiez le rapport de contraste sur fond blanc et noir pour voir si le texte dans cette couleur est lisible.
  4. 4Cliquez sur un échantillon dans la gamme de teintes et nuances pour explorer des versions plus claires et plus foncées.

Convertissez les couleurs entre tous les formats courants

Les designers, développeurs et marketeurs jonglent constamment avec les couleurs entre des outils qui parlent des langages différents : le CSS demande du HEX ou du HSL, une charte graphique liste du RGB et du CMYK, et une application de design affiche du HSB. Ce convertisseur de couleurs prend une couleur dans n'importe lequel de ces formats et l'affiche dans tous les autres simultanément, avec une copie en un clic pour chacun. Il vérifie également le contraste du texte pour l'accessibilité et génère une gamme de teintes et de nuances.

Fonctionnalités

  • N'importe quel format d'entrée : HEX (3, 4, 6 ou 8 chiffres), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, des triplets de nombres simples et les noms de couleurs CSS.
  • Tous les formats de sortie à la fois : HEX, RGB, HSL, HSV et CMYK, chacun avec un bouton de copie.
  • Prise en charge de la transparence — les valeurs alpha sont conservées en HEX8, RGBA et HSLA.
  • Sélecteur de couleurs natif pour choisir une couleur visuellement.
  • Vérificateur de contraste WCAG sur fond blanc et noir, avec les résultats AA pour le texte de taille normale et large.
  • Teintes et nuances de 10 % à 90 % de luminosité ; cliquez sur n'importe quel échantillon pour le charger.

Explication des formats de couleur

  • HEX — #RRGGBB en hexadécimal, le format le plus courant en web design. Une quatrième paire optionnelle définit la transparence.
  • RGB — rouge, vert et bleu de 0 à 255 ; la façon dont les écrans créent réellement les couleurs.
  • HSL — teinte (la position sur le cercle chromatique), saturation (intensité) et luminosité. Facile à ajuster manuellement : ne modifiez que la luminosité pour obtenir des versions plus claires ou plus foncées de la même couleur.
  • HSV / HSB — teinte, saturation et valeur (brillance), utilisé par la plupart des sélecteurs de couleurs dans les outils de design.
  • CMYK — pourcentages d'encre cyan, magenta, jaune et noir (key) utilisés en impression.

Exemple

Le bleu ciel #0EA5E9 correspond à rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) et environ cmyk(94%, 29%, 0%, 9%). Son contraste sur fond blanc est d'environ 2.8:1 — suffisant pour les grands titres et les icônes, mais trop faible pour le corps de texte, qui nécessite 4.5:1. Sur fond noir, il atteint environ 7.6:1, ce qui est largement validé.

Conseils pour travailler avec les couleurs

  • Créez vos palettes en HSL. Gardez la teinte et la saturation fixes et variez la luminosité pour créer des états de boutons, des arrière-plans et des bordures cohérents.
  • Vérifiez le contraste dès le début. De nombreuses couleurs de marque sont trop claires pour du texte sur fond blanc ; utilisez une nuance plus foncée de la gamme pour le texte et la couleur originale pour les accents.
  • Ne vous fiez pas uniquement à la couleur pour transmettre une information — ajoutez des icônes ou des libellés pour les personnes atteintes de déficiences de la vision des couleurs.
  • Attendez-vous à des différences à l'impression. Les couleurs RGB vives, en particulier les bleus et les verts éclatants, paraissent souvent plus ternes en CMYK.

Vous travaillez aussi avec des images ? Le Convertisseur d'images change les formats entre JPG, PNG et WebP. Pour encoder une petite image ou une icône pour le CSS, utilisez l'outil Base64.

Questions fréquentes

Comment convertir du HEX en RGB ?
Une couleur HEX est composée de trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu. Convertissez chaque paire de la base 16 à la base 10 : dans #FF8800, FF = 255, 88 = 136 et 00 = 0, la couleur est donc rgb(255, 136, 0). La notation abrégée à trois chiffres comme #F80 double d'abord chaque chiffre.
Quelle est la différence entre HSL et HSV (HSB) ?
Les deux décrivent une couleur par sa teinte (0–360°) et sa saturation, mais utilisent une troisième valeur différente. En HSL, une luminosité de 50 % correspond à la couleur pure, 0 % au noir et 100 % au blanc. En HSV/HSB, une valeur ou une brillance de 100 % correspond à la couleur pure à saturation maximale, et 0 % au noir. Les applications de design comme Photoshop et Figma utilisent souvent HSB dans leurs sélecteurs de couleurs, tandis que le CSS utilise HSL.
La conversion CMYK est-elle précise pour l'impression ?
Les valeurs CMYK sont une conversion mathématique depuis le RGB, ce qui est utile comme point de départ. L'impression réelle dépend de l'imprimante, de l'encre et du papier, définis par des profils colorimétriques ICC. Pour un travail d'impression professionnel, effectuez la conversion dans votre logiciel de design en utilisant le profil de votre imprimeur.
Que signifient les rapports de contraste ?
Les Règles pour l'accessibilité des contenus web (WCAG) mesurent le contraste entre le texte et l'arrière-plan sur une échelle de 1:1 à 21:1. Un texte de taille normale nécessite au moins 4.5:1 pour valider le niveau AA, et un texte de grande taille (environ 24 px, ou 18.7 px en gras) nécessite 3:1. Le vérificateur indique si la couleur est validée sur un fond blanc et sur un fond noir.
Quels formats d'entrée sont pris en charge ?
HEX à 3, 4, 6 ou 8 chiffres (avec ou sans #), rgb() et rgba(), hsl() et hsla(), hsv() ou hsb(), cmyk(), trois nombres simples comme 255 136 0, et les noms de couleurs CSS comme rebeccapurple. La syntaxe avec des virgules et la syntaxe moderne avec des espaces sont toutes deux acceptées, y compris la transparence comme rgb(14 165 233 / 50%).

Outils similaires

Convertisseur d'imagesConvertissez des photos et des graphiques entre les formats JPG, PNG, WebP et AVIF — par lots, sans envoyer vos fichiers.Convertisseur de casseChangez la casse de votre texte — de la casse de titre au snake_case — et visualisez tous les formats en un coup d'œil.Encodage & Décodage Base64Convertissez du texte et des fichiers en Base64 et inversement, avec une prise en charge complète de l'UTF-8 et du Base64URL.Générateur de box-shadowAjustez des ombres douces, nettes, superposées ou internes avec un aperçu en direct et copiez le CSS.Simulateur de daltonismePrévisualisez vos images à travers les yeux d'une personne daltonienne pour garantir l'accessibilité de vos designs.Vérificateur de contraste de couleursVérifiez si votre texte est suffisamment lisible — et obtenez la couleur la plus proche qui respecte les normes WCAG.