Entrez une Couleur
Sélecteur de Couleur Visuel
Entrez un code HEX à 6 chiffres avec ou sans le préfixe #
Entrez une Couleur à Convertir
Tapez un code HEX, entrez des valeurs RGB ou HSL, utilisez le sélecteur de couleur, ou cliquez sur 'Couleur Aléatoire' pour commencer. Tous les formats se mettent à jour en direct.
Comment utiliser le tableau des codes de couleur
Entrez votre couleur
Tapez un code HEX directement (par exemple, #FF5733) dans le champ HEX, entrez des valeurs RGB décimales (0–255 chacune), saisissez des valeurs HSL ou CMYK, ou cliquez sur l'échantillon de couleur pour ouvrir le sélecteur de couleur visuel. Vous pouvez également cliquer sur 'Couleur aléatoire' pour une inspiration instantanée. Tous les méthodes d'entrée mettent à jour le résultat en direct au fur et à mesure que vous tapez.
Voir tous les formats convertis
Le panneau des résultats montre votre couleur en HEX, RGB, HSL, HSV, CMYK et format entier simultanément. Chaque format a un bouton de copie pour que vous puissiez récupérer exactement ce dont vous avez besoin. Utilisez le bouton 'Tout copier' pour copier chaque format en une seule fois, ou exportez au format CSV pour documentation.
Générer des nuances, teintes et vérifier l'accessibilité
Faites défiler les résultats pour voir une bande de 9 nuances (variantes plus sombres) et 9 teintes (variantes plus claires) — cliquez sur n'importe quel échantillon pour charger cette variante dans le convertisseur. La section de contraste WCAG montre les ratios de contraste par rapport au blanc et au noir, avec des indicateurs de passage AA/AAA pour vérifier que votre couleur respecte les normes d'accessibilité.
Parcourir la référence des couleurs nommées
Passez à l'onglet 'Tableau des couleurs nommées' pour explorer toutes les 140 couleurs nommées CSS organisées par famille (rouges, verts, bleus, violets, etc.). Chaque ligne montre l'échantillon de couleur, le nom CSS, le code HEX et les valeurs RGB. Cliquez sur 'Utiliser la couleur' sur n'importe quelle ligne pour la charger instantanément dans le convertisseur.
Questions Fréquemment Posées
Quelle est la différence entre les codes de couleur HEX et RGB ?
HEX et RGB décrivent exactement la même couleur en utilisant différents systèmes de notation. RGB sépare les canaux rouge, vert et bleu en trois entiers décimaux de 0 à 255. Par exemple, rgb(59, 130, 246) est un bleu moyen. HEX représente ces mêmes trois valeurs en hexadécimal (base-16) : 59 devient 3B, 130 devient 82, et 246 devient F6, donnant #3B82F6. HEX est plus compact et est le format standard pour HTML et CSS. RGB est plus facile à lire mathématiquement et est utilisé dans CSS ainsi que dans les logiciels de design graphique. Les deux sont équivalents — toute couleur exprimable dans un format peut être exprimée dans l'autre.
Pourquoi HSL est-il meilleur pour les ajustements de design que HEX ou RGB ?
HSL (Teinte, Saturation, Luminosité) sépare l'identité de couleur pure (teinte, 0–360 degrés) de sa vivacité (saturation) et de sa clarté ou obscurité (luminosité). Cela le rend beaucoup plus intuitif pour le travail de design. Par exemple, pour rendre une couleur 20% plus claire, il suffit d'augmenter la valeur L de 20 — en HEX ou RGB, la même opération nécessiterait de calculer les trois canaux séparément. HSL est également la façon dont les humains décrivent naturellement les couleurs : 'un bleu clair, moyen' correspond directement à une saturation élevée et une luminosité intermédiaire à une teinte bleue. CSS prend en charge nativement la notation hsl(), et des outils de design comme Figma utilisent des modèles similaires à HSL en interne. De nombreux systèmes de design définissent des tokens de couleur en HSL pour cette raison.
Qu'est-ce que le CMJN et quand devrais-je l'utiliser ?
CMJN signifie Cyan, Magenta, Jaune et Noir (Key) — les quatre couleurs d'encre utilisées dans l'impression couleur. Contrairement à RGB, qui additionne la lumière (mélange additif), CMJN soustrait la lumière en superposant des encres qui absorbent certaines longueurs d'onde (mélange soustractif). C'est pourquoi une couleur qui semble vive à l'écran peut apparaître plus terne une fois imprimée — le gamut RGB (plage de couleurs affichables) est plus large que ce que l'impression CMJN peut reproduire. Utilisez des valeurs CMJN lors de la préparation de fichiers pour l'impression professionnelle, y compris les cartes de visite, brochures, affiches et emballages. La plupart des imprimeries professionnelles et des logiciels de design (Adobe Illustrator, InDesign) travaillent en CMJN pour les projets d'impression. Pour le design web et d'écran, restez avec HEX ou RGB.
Qu'est-ce que le ratio de contraste WCAG et pourquoi est-ce important ?
Le ratio de contraste WCAG (Web Content Accessibility Guidelines) mesure à quel point une couleur de premier plan et une couleur de fond apparaissent différentes pour une personne ayant une vision faible ou une déficience visuelle. Il est calculé en utilisant la luminance relative — une mesure de la luminosité perçue. Un ratio de 1:1 signifie aucun contraste (même couleur), tandis que 21:1 est le contraste maximum (noir sur blanc). La norme WCAG AA exige 4.5:1 pour le texte normal et 3:1 pour le texte large. La norme WCAG AAA exige 7:1. Respecter ces normes garantit que votre site web est lisible pour les utilisateurs ayant des déficiences visuelles et est souvent requis pour la conformité légale avec l'ADA (Americans with Disabilities Act) et les normes WCAG 2.1/2.2. Cet outil calcule automatiquement les ratios de contraste par rapport au blanc et au noir pour toute couleur que vous entrez.
Comment les nuances et les teintes sont-elles générées ?
Une nuance est créée en mélangeant une couleur avec du noir — mathématiquement, en multipliant chaque canal RGB par un facteur inférieur à 1. Par exemple, une nuance de rouge à 50% (255, 0, 0) serait (128, 0, 0). Une teinte est créée en mélangeant avec du blanc — en mélangeant la valeur du canal d'origine vers 255. Une teinte de rouge à 50% serait (255, 128, 128). Cet outil génère 9 nuances espacées uniformément (du presque noir à l'original) et 9 teintes espacées uniformément (de l'original au presque blanc), vous donnant 19 variantes au total. Ces bandes sont très utiles pour construire des palettes de systèmes de design — par exemple, Tailwind CSS utilise une échelle de 10 nuances similaire de 50 (la plus claire) à 950 (la plus sombre) pour chacune de ses 22 familles de couleurs.
Quelles sont les 140 couleurs nommées CSS ?
Les 140 couleurs nommées CSS sont un ensemble de mots-clés de couleur définis dans la spécification de couleur CSS (CSS Colors Level 4). Elles incluent des couleurs web classiques comme 'rouge', 'bleu' et 'vert', ainsi que des noms descriptifs comme 'bleu de myosotis', 'rose lavande' et 'crème de papaye'. Chaque nom correspond à une valeur HEX/RGB spécifique qui est cohérente à travers tous les navigateurs et systèmes d'exploitation. Elles proviennent du système de couleurs X11 utilisé dans les environnements Unix et ont été ensuite standardisées pour CSS. Bien que pratiques pour les couleurs courantes, les couleurs nommées ne couvrent qu'une infime fraction des 16,7 millions de couleurs représentables en RGB 24 bits. Pour un travail de design précis, utilisez toujours des valeurs HEX ou RGB plutôt que de vous fier aux couleurs nommées, car les noms peuvent être trompeurs (par exemple, 'gris' et 'grey' sont légèrement différents).