Entrez un code hex ou un triplet RGB ; nous convertissons aux autres formats et affichons un échantillon.
Les codes couleur ne sont pas arbitraires — ils ont une logique précise qui mérite d'être comprise
Les codes couleur hexadécimaux comme #3A7BD5 encodent trois canaux de couleur — rouge, vert, bleu — sous forme de paires hexadécimales à deux chiffres. #3A vaut 58 en décimal, #7B vaut 123, #D5 vaut 213. Ces trois nombres définissent exactement la quantité de lumière rouge, verte et bleue qui se mélange pour produire la couleur à l'écran. Comme chaque canal va de 0 à 255, il existe 16 777 216 couleurs hexadécimales possibles. CSS, SVG, HTML canvas et la plupart des outils de design acceptent le format hex nativement.
HSL (Teinte, Saturation, Luminosité) est souvent plus utile que RGB pour le travail de design, car il correspond davantage à la façon dont les humains pensent la couleur. La teinte est la position sur la roue chromatique (0 à 360 degrés), la saturation est l'intensité de la couleur, et la luminosité est la clarté. Ajuster uniquement la valeur de luminosité en HSL donne des nuances fiables d'une couleur sans modifier sa teinte — quelque chose qui est véritablement difficile à réaliser de façon prévisible dans l'espace RGB.
Frequently asked questions
Quelle est la différence entre les codes couleur hex à 3 chiffres et à 6 chiffres ?
Le hex à 3 chiffres (#RGB) est l'abréviation du hex à 6 chiffres (#RRGGBB) où chaque chiffre est doublé. Ainsi <code>#A3F</code> se développe en <code>#AA33FF</code>. Cette abréviation ne fonctionne que lorsque les deux chiffres de chaque canal sont identiques. Elle économise quelques caractères en CSS mais représente le même sous-ensemble de 4 096 couleurs parmi les 16,7 millions de couleurs possibles. En cas de doute, utilisez la forme à 6 chiffres — elle est toujours valide et non ambiguë.
Pourquoi les couleurs semblent-elles différentes à l'écran et à l'impression ?
Les écrans utilisent la <strong>synthèse additive</strong> (RGB : lumières additionnées), tandis que les imprimantes utilisent la <strong>synthèse soustractive</strong> (CMYK : l'encre absorbe la lumière). RGB peut représenter des néons vifs et saturés qui ne peuvent tout simplement pas être reproduits en CMYK — ils sont « hors gamut » pour l'impression. Si vous concevez en hex/RGB pour un projet d'impression sans convertir en CMYK, le logiciel de gestion des couleurs de votre imprimante va approximer les couleurs, les rendant souvent plus ternes qu'attendu.
Qu'est-ce que le canal alpha et comment fonctionne-t-il en CSS ?
L'alpha contrôle l'opacité sur une échelle de 0 à 1. En CSS, <code>rgba(58, 123, 213, 0.5)</code> affiche la couleur à 50 % d'opacité. Le format hex à 8 chiffres <code>#3A7BD580</code> encode l'alpha dans les deux derniers chiffres hex — <code>80</code> en hexadécimal vaut 128 en décimal, soit environ 50 % d'opacité. La prise en charge du hex à 8 chiffres est solide dans les navigateurs modernes, mais peut poser des problèmes dans les bases de code de l'ère IE. Le format <code>rgba()</code> est plus sûr pour une large compatibilité.
Comment trouver le code hex d'une couleur que je vois sur un site web ?
La méthode la plus fiable est les DevTools de votre navigateur. Faites un clic droit sur n'importe quel élément, sélectionnez Inspecter, et trouvez la propriété de couleur dans le panneau Styles — Chrome et Firefox affichent tous deux des échantillons de couleur cliquables qui indiquent les valeurs hex, RGB et HSL. Alternativement, des extensions de navigateur comme <strong>ColorZilla</strong> vous permettent d'utiliser une pipette sur n'importe quel pixel de l'écran. Pour les fichiers de design, des outils comme Figma et Adobe XD affichent les valeurs hex directement dans l'inspecteur de remplissage.