color/

Les noms de couleur ne sont pas pris en charge : vous obtiendrez le message « Format non reconnu ». Vous pouvez saisir du HEX (3, 4, 6 ou 8 chiffres, # facultatif), rgb() / rgba(), hsl() / hsla() et oklch(), avec des arguments séparés par des virgules, ou par des espaces avec une barre oblique pour l'opacité (par exemple rgb(255 0 0 / 50%)). La teinte en HSL peut porter une unité deg, rad, grad ou turn. La sortie est toujours en HEX, RGB, HSL et OKLCH ; il n'y a ni CMYK ni HSV.

Ce sont les deux derniers chiffres, au format #RRGGBBAA, comme en CSS. La forme #AARRGGBB souvent utilisée sous Android place l'alpha en premier : déplacez les deux premiers chiffres à la fin avant de coller. Deux chiffres hexadécimaux ne donnent que 256 niveaux, donc 80 (128 en décimal) se convertit en 0,502 et non en un 0,5 rond ; dans l'autre sens, une opacité de 0,5 donne 80 à la fin du HEX.

Quand une couleur sort de ce que le sRGB peut afficher, l'outil écrête séparément les canaux rouge, vert et bleu pour les ramener dans la plage valide, et affiche la couleur écrêtée. Les valeurs comme rgb() au-dessus de 255 ou une saturation ou luminosité HSL au-dessus de 100 % sont écrêtées sans message ; seul OKLCH affiche l'avis « Hors du gamut sRGB », car il peut décrire des couleurs plus vives que le sRGB. L'OKLCH affiché est alors recalculé à partir de la couleur écrêtée et diffère donc de ce que vous avez saisi. Sur un écran à gamut étendu, écrire oklch() directement en CSS peut donner un rendu plus vif que l'aperçu ici.

L'outil ne compare votre couleur qu'avec le blanc pur et le noir pur, en la traitant comme la couleur du texte sur fond blanc puis sur fond noir ; vous ne pouvez pas choisir un autre fond. Il suit WCAG 2.x : chaque canal sRGB est converti en valeur linéaire, pondéré par 0,2126, 0,7152 et 0,0722 pour obtenir la luminance relative L, et contraste = (L le plus clair + 0,05) ÷ (L le plus sombre + 0,05). Pour deux autres couleurs quelconques, appliquez vous-même la même formule.

AA et AAA sont les deux niveaux de conformité de WCAG pour le contraste du texte, AAA étant plus strict. Pour le texte normal, AA exige 4,5 : 1 et AAA 7 : 1 ; pour le grand texte, AA exige 3 : 1 et AAA 4,5 : 1. L'outil marque chacun comme « conforme » ou « non conforme ». Le « grand texte » désigne du 18 pt (environ 24 px) ou plus, ou du gras à partir de 14 pt (environ 18,7 px). Pour un site web, la cible est généralement AA.

La couleur est d'abord mélangée au fond selon son opacité, puis le contraste est calculé sur le résultat. La ligne « Sur fond blanc » la mélange sur du blanc pur et la ligne « Sur fond noir » sur du noir pur : une même couleur semi-transparente correspond donc à une couleur différente dans chaque ligne. Si le fond réel de votre page n'est ni blanc ni noir pur, le résultat différera : à vérifier vous-même.

Non. Le sélecteur est un contrôle intégré au navigateur et ne peut choisir que des couleurs HEX opaques à 6 chiffres. Après avoir choisi une couleur avec lui, le champ est remplacé par #rrggbb et l'opacité précédente est perdue ; pour une couleur semi-transparente, saisissez directement un HEX à 8 chiffres ou rgb(255 0 0 / 50%) dans le champ. Quand le champ contient une couleur semi-transparente, le sélecteur n'en montre que la partie opaque.

Copiez-les dans une règle :root et elles sont prêtes à l'emploi. Les quatre lignes sont le HEX, les trois nombres R G B séparés par des espaces, les trois valeurs H S L et le oklch() complet. --color-rgb et --color-hsl ne contiennent pas l'opacité, ce qui permet de l'ajuster à la volée, comme dans rgb(var(--color-rgb) / 50%) ; cette syntaxe espace-barre oblique demande un navigateur assez récent. Quand la couleur elle-même est semi-transparente, seuls --color et --color-oklch en contiennent l'opacité.