Sélecteur de couleur

Toutes les couleurs de cette page sont exprimées en sRGB, l'espace colorimétrique par défaut du web depuis son adoption par les navigateurs à la fin des années 1990. Un écran mélange de la lumière rouge, verte et bleue, et chaque canal compte 256 niveaux (0–255), soit 16 777 216 couleurs possibles. RGB écrit directement ces trois nombres ; HEX écrit les mêmes trois nombres en base 16, sur deux chiffres chacun, donc #FF6600 correspond à rouge 255, vert 102, bleu 0. La notation abrégée à trois chiffres double chaque chiffre : #F60 équivaut à #FF6600.

HSL et HSB (aussi appelé HSV) décrivent les mêmes couleurs d'une manière plus facile à ajuster à la main. La teinte est un angle sur le cercle chromatique : 0° rouge, 120° vert, 240° bleu. La différence tient au dernier nombre. En HSL, une luminosité de 100 % donne toujours du blanc et 50 % correspond à la version la plus pure de la teinte ; en HSB, une luminosité de 100 % donne la teinte pure et le blanc demande une saturation de 0 %. Les applications de design comme Photoshop et Figma utilisent HSB dans leurs sélecteurs, alors que CSS comprend nativement hsl(), c'est pourquoi les deux sont indiqués plus haut.

Les écrans ajoutent de la lumière ; les imprimantes en retirent avec de l'encre cyan, magenta, jaune et noire. Les deux systèmes couvrent des plages de couleurs différentes, appelées gamuts. Les couleurs d'écran très saturées, comme un vert RGB vif, un bleu électrique ou un orange fluo, sortent de ce que les encres quadrichromiques peuvent reproduire : elles s'impriment plus ternes qu'à l'écran.

Les valeurs CMJN affichées ici utilisent la conversion mathématique simple, sans profil ICC : c'est utile pour un brief approximatif, mais pas pour l'impression en production. Un imprimeur convertit avec un profil adapté à son papier et à sa presse, comme FOGRA39 en Europe ou GRACoL aux États-Unis, et une même couleur RGB peut donner des pourcentages d'encre différents selon le profil. Pour un travail d'impression, transmettez la valeur RGB ou HEX avec le profil demandé par votre imprimeur.

WCAG 2.1 compare la luminance relative de deux couleurs : la plus claire plus 0,05, divisée par la plus foncée plus 0,05. Le résultat va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Le niveau AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte, c'est-à-dire 18 points ou 14 points en gras ; le niveau AAA passe à 7:1 et 4,5:1. Les éléments d'interface comme les bordures de champ et les icônes demandent 3:1 par rapport à leur environnement, selon le critère de succès 1.4.11.

La luminance donne bien plus de poids au vert qu'au bleu, car l'œil y est le plus sensible. C'est pourquoi un texte jaune sur blanc échoue nettement alors qu'un bleu foncé sur blanc passe sans difficulté, même si les deux couleurs paraissent pleinement saturées. Les logos et le texte purement décoratif sont exemptés de cette règle.

La palette d'image lit votre fichier avec le canvas du navigateur, le réduit à 200 pixels maximum sur le grand côté et regroupe les pixels similaires avec la méthode de la coupe médiane décrite par Paul Heckbert en 1982 : la plage de couleurs est divisée encore et encore selon son canal le plus large jusqu'à obtenir six groupes, et la moyenne de chaque groupe devient un échantillon. Les pixels transparents sont ignorés, donc un logo sur fond transparent donne les couleurs du logo.

Une fois les couleurs obtenues, un logo plat fonctionne souvent mieux en vectoriel. Le convertisseur d'image en SVG le vectorise en formes qui conservent ces couleurs exactes, et si vous concevez un en-tête de chaîne, le redimensionneur de bannière YouTube adapte le visuel à 2560 × 1440 px en tenant compte de la zone de sécurité.