Sélecteur de couleurs : Hex, RGB, HSL — et le contrôle du contraste que j'ai sauté

Notre marque Orange est #E99537. J'aime ça. Il fait chaud, ce n'est pas la même orange que tout le monde, et il se trouve à côté de notre bleu sans se battre.

Je l'ai utilisé comme couleur de lien sur le blanc pendant des mois.

Ensuite, j'ai effectivement exécuté les chiffres. #E99537 sur #FFFFFF donne un rapport de contraste de 2.38:1. WCAG 2.1 SC 1.4.3 Nécessite 4,5:1 pour le texte normal. Il n'est même pas effacé de la barre 3:1 pour grand texte. Chaque lien orange de ce site était, selon la norme, qui me préoccupait, illisible - et cela m'avait parfaitement convenu, sur mon moniteur, dans mon bureau, avec mes yeux.

C'est le truc avec la couleur : votre perception n'est pas une mesure. #E99537 Sur notre marine #0F172A scores 7.50:1, confortablement AAA. Même couleur, verdict complètement différent et aucune quantité de loucher ne m'aurait dit. Vous devez le calculer.

le cueillette de couleurs Sur Toolz.dev convertit entre HEX, RGB et HSL et vous montre le rapport de contraste, dans le navigateur, sans téléchargement. Ce guide est ce que j'aurais aimé lire avant d'expédier ces liens.

tl;dr : manier jeter un sort sur Pour les valeurs statiques, HSL Chaque fois que vous avez besoin de faire dériver de une couleur (états de survol, palettes, mode sombre) car la légèreté est un nombre dont vous pouvez soustraire, et RGBA/HSLA Quand vous avez besoin d'alpha. Le contraste est 4,5:1 pour le corps du texte et 3:1 pour le texte volumineux - vérifiez-le, ne le regardez pas. cueillette de couleurs fait les conversions et le ratio. Ensuite, arrêtez-vous au Générateur de gradient.

Hex, RGB, HSL : quelle est la différence réelle ?

Ils décrivent tous les mêmes couleurs sRGB. Ce qui diffère, c'est à quelles questions chacun rend facile de répondre.

jeter un sort sur

Trois octets en hexadécimal. #4466EE est rouge 44 (68), vert 66 (102), bleu EE (238). sténographie #RGB Fonctionne uniquement lorsque chaque paire est doublée — #FF0000 s'effondre à #F00, mais #4466EE ne peut pas être raccourci. Le formulaire à 8 chiffres ajoute alpha : #4466EE80 est à peu près 50% opaque.

C'est la valeur par défaut de CSS parce qu'elle est compacte et sans ambiguïté. Il est également complètement opaque pour la lecture humaine, c'est pourquoi je n'ai jamais regardé un code hexadécimal et je ne savais pas quoi changer pour le rendre un peu moins saturé.

RGB

Trois mêmes canaux, décimaux, 0–255. La syntaxe moderne CSS Color 4 laisse tomber les virgules : rgb(68 102 238 / 80%). RGB est ce que vous voulez dans JavaScript, Canvas et WebGL, car c'est le format que tout ce qui est en aval consomme réellement et vous pouvez y faire de l'arithmétique.

HSL - celui qui gagne sa place

teinte (0–360° autour de la roue), saturation (0–100%), légèreté (0–100%). #4466EE est hsl(228, 83%, 60%).

Voici pourquoi cela compte. Un état de survol de bouton doit être "de la même couleur, légèrement plus foncée." En hexadécimal, c'est une question sans réponse. En HSL, c'est la soustraction :

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

Quatre états, une teinte, aucun outil de conception. C'est 90 % de la raison pour laquelle HSL est dans ma boîte à outils.

Le hic - et c'est un vrai - c'est que la légèreté de HSL est non perceptif. hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (Bleu) Les deux réclament une légèreté de 50 %, et l'un d'eux brûlera vos rétines tandis que l'autre est presque noire. C'est le problème que résout Oklch.

Ok, brièvement

CSS Niveau de couleur 4 amène oklch(L C H), où je suis perçu légèreté. Deux couleurs avec la même L ont vraiment l'air tout aussi brillantes. C'est le bon outil pour générer une rampe de tonalité où chaque étape est espacée de manière uniforme, et c'est ce que j'utiliserais pour un nouveau système de conception aujourd'hui. C'est aussi pourquoi linear-gradient(in oklch, blue, yellow) Ne devient pas gris au milieu — voir le Guide du générateur de dégradé CSS.

cmJ

Imprimer uniquement. CSS n'a pas de CMJN. Si un guide de marque vous remet des valeurs CMJN, quelqu'un doit les convertir en sRGB, et la conversion est approximative car les gammes diffèrent réellement - il existe des cyans qu'une imprimante peut atteindre que votre moniteur ne peut pas, et vice versa. obtenir l'un et Valeurs définies dans le guide de la marque plutôt que de convertir l'une en une autre et d'espérer.

Comment puis-je convertir entre eux ?

Hex → RGB est juste une conversion de base. #4466EE → Diviser en 44, 66, EE → 68, 102, 238.

RGB → HSL consiste à trouver des canaux maximum/min, en tirant la légèreté de leur moyenne, puis à la saturation et à la teinte à partir de là. C'est quinze lignes de code, et j'ai écrit ces quinze lignes de mémoire exactement zéro fois. Pour un ponctuel, le cueillette de couleurs le fait-il instantanément. Pour le code :

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

et celui qui compte réellement - la luminance relative et le rapport de contraste, directement de la Définition WCAG:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

Notez ces coefficients verts : 0,2126 rouge, 0,7152 vert, 0,0722 bleu. Le vert porte à peu près soixante-dix pour cent de la luminosité perçue. C'est pourquoi un vert vif et un bleu vif à la même légèreté HSL ne se ressemblent en rien, et c'est la raison pour laquelle les espaces de couleur perceptives existent.

Quels rapports de contraste dois-je réellement atteindre ?

Quelques chiffres réels, tous calculés plutôt que devinés :

Deux choses tombent de cette table.

#767676 est le gris le plus clair qui passe AA sur blanc. non #888, pas #999. Chaque "texte secondaire muet" que je vois dans la nature est une ou deux couleurs. mérite d'être mémorisé.

La même couleur de marque peut passer et échouer selon l'endroit où vous la placez. Notre orange est inutilisable comme lien sur le blanc et excellent comme accent sur la marine. Ce n'est pas un défaut de couleur, c'est une contrainte sur l'endroit où la couleur est autorisée à vivre. Une fois que je l'ai encadré de cette façon, la décision de conception est devenue plus facile, pas plus difficile.

Comment créer une palette qui ne se bat pas elle-même ?

Choisissez une teinte. Variez la légèreté. C'est la méthode entière, et HSL le rend mécanique :

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

Remarquez que la saturation baisse légèrement à l'extrémité sombre. Maintenir la saturation constante alors que la légèreté chute produit des étapes qui semblent de plus en plus dures et au néon - une petite désaturation au fond est ce qui rend une rampe conçue plutôt que générée.

puis nommez les choses par rôle, pas par apparence, donc une nouvelle image de marque est un changement sur une ligne au lieu d'un fichier de recherche et de remplacement dans une quarantaine de fichiers :

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

Le mode sombre n'est pas une inversion

Ne retournez pas votre palette. Deux choses se cassent immédiatement :

1. Les couleurs saturées deviennent plus fortes sur les fonds sombres. Un bleu vif qui se lit comme "professionnel" sur blanc se lit comme "vibrant" sur presque noir. Soulevez la légèreté, baissez un peu la saturation.
2. Les arrière-plans noirs purs provoquent la haleine — Texte lumineux sur #000 Frottis pour les personnes astigmates. Utilisez un bleu gris très foncé (#0F172A, #111827) à la place. Cela vous donne également un endroit où aller pour des surfaces surélevées, ce que le noir pur ne fait pas.

Schémas d'harmonie, honnêtement

La règle à laquelle je reviens sans cesse : Un accent primaire, un accent, une rampe grise. Tout ce qui au-delà doit justifier son existence.

Quoi d'autre qui fait trébucher les gens ?

La couleur seule ne suffit jamais

Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de déficience en vision des couleurs. Si Red-Means-Error et Green-Means-Success est votre ne Signal, une tranche significative de vos utilisateurs voit deux badges gris identiques. Ajoutez une icône, ajoutez un mot. WCAG SC 1.4.1 est explicite à ce sujet et cela vous coûte un <span>.

Le test d'une seconde : capture d'écran de votre interface utilisateur, désamorcez-le et voyez s'il fonctionne toujours. Si ce n'est pas le cas, la couleur fait un travail porteur, elle ne devrait pas faire seule.

Les bagues de mise au point ont également besoin de contraste

Les indicateurs de mise au point sont des composants de l'interface utilisateur et relèvent de la règle 3:1 contre adjacent Couleurs - ce qui signifie qu'une bague de mise au point doit contraster à la fois avec l'élément qu'elle entoure et la page derrière. Un contour bleu subtil sur un bouton bleu est un échec commun et complètement invisible.

Concevoir en gris d'abord

Construisez la mise en page entière en niveaux de gris. Cela oblige la hiérarchie à venir de la taille, du poids et de l'espacement - c'est là que la hiérarchie il faut que venir de. Ajoutez de la couleur en dernier, comme accent. Les interfaces construites de cette manière sont accessibles presque par accident et survivent en mode sombre sans réécriture.

Utilisation du sélecteur de couleurs

1. Ouvrez le cueillette de couleurs.
2. Faites glisser le spectre ou collez une valeur connue dans le champ HEX, RGB ou HSL, les autres sont mis à jour par étapes.
3. Notez le HSL. C'est votre format de travail.
4. Générez la rampe en maintenant H et S et en l'étape L.
5. Vérifiez chaque paire de textes/arrière-plans par rapport à la ligne 4.5:1 avant Il va dans une feuille de style, pas après qu'un client vous en ait envoyé un e-mail.

Tout fonctionne dans votre onglet. Rien n'est téléchargé - vous pouvez le confirmer dans le panneau réseau DevTools en une dizaine de secondes.

Questions fréquentes

Quelle est la différence entre HEX et RGB ?

Rien, sémantiquement, ils codent les trois mêmes canaux sRGB. Hex les écrit en base 16 (#4466EE), RGB en décimale (rgb(68 102 238)). Hex est plus compact et est la convention CSS ; RGB est plus facile à calculer avec JavaScript. Choisir par contexte, pas par principe.

Quel format de couleur dois-je utiliser en CSS ?

Hex pour les valeurs statiques que vous ne faites que transcrire. HSL à tout moment faire dériver de Une couleur - états de survol, états désactivés, rampe tonale, variante en mode sombre - parce que la légèreté est un nombre que vous pouvez ajuster. HSLA ou RGBA lorsque vous avez besoin d'alpha. Oklch si vous construisez un nouveau système de conception et que vous voulez des étapes perceptives.

Comment savoir si mes couleurs sont accessibles ?

Calculez le rapport de contraste. WCAG 2.1 AA a besoin de 4,5:1 pour le texte normal, 3:1 pour le texte volumineux (18 pt ou 14 pts) et pour les composants de l'interface utilisateur. Ne jugez pas à l'œil — #E99537 Sur le blanc, ça a l'air bien et obtient 2,38:1. Vérifiez également qu'aucune information n'est transmise par la couleur seule.

Quel est le gris le plus clair que je puisse utiliser pour le texte sur blanc ?

#767676, qui atterrit à 4,54:1 - à peine au-dessus de la ligne 4,5: 1 AA. #999999 n'est que 2,85:1 et échoue. Si vous voulez AAA, #595959 Atteint exactement 7,00:1.

Pourquoi la légèreté HSL ne correspond-elle pas à la luminosité perçue ?

Parce que HSL est une simple transformation mathématique de RGB, pas un modèle de vision humaine. L'œil est beaucoup plus sensible au vert qu'au bleu - la formule de luminance WCAG pèse le vert à 0,7152 et le bleu à 0,0722 - donc hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (bleu) Ne se ressemblent en rien malgré les deux prétendant 50% de légèreté. Oklch existe spécifiquement pour résoudre ce problème.

Comment créer une palette de mode sombre ?

N'inversez pas la lumière. Construisez une deuxième palette : un fond gris-bleu foncé plutôt que du noir pur (le noir pur provoque une haleine pour les lecteurs avec astigmatisme), des versions plus légères et légèrement moins saturées de vos accents et un texte éteint plutôt que blanc. #FFFFFF. Échangez-les avec des propriétés personnalisées CSS sous prefers-color-scheme: dark.

Quelle est la meilleure couleur pour un bouton d'appel à l'action ?

Il n'y en a pas. Les preuves de "orange convertissent le mieux" est mince et surtout folklorique. Ce qui compte, c'est que le CTA contraste avec tout ce qui l'entoure et que la même couleur signifie la même chose partout sur le site. Si votre page est principalement bleue, un CTA orange fonctionne, en raison du contraste, pas de l'orange.

Puis-je utiliser les couleurs CMJN sur le Web ?

Non - CSS n'a pas de notation CMJN, et les gammes ne sont pas mappées proprement, donc toute conversion est une approximation. Si vous avez besoin d'une cohérence de la marque sur l'impression et l'écran, définissez les deux valeurs dans le guide de marque dès le départ plutôt que de les convertir en une autre.

Comment convertir une couleur hexagonale en RGB ?

Divisez l'hexagone à six chiffres en trois paires et lisez chaque paire sous la forme d'un nombre de base-16 de 0 à 255. #4466EE se transforme rgb(68, 102, 238): 44 est 68, 66 est 102 et EE est 238. une sténographie à trois chiffres telle que #46E Se développe d'abord en doublant chaque chiffre. Le sélecteur de couleurs effectue cette conversion instantanément, dans les deux sens.

Qu'est-ce qu'un code couleur hexagonal ?

Un code de couleur hexadécimal est une représentation en base 16 d'une couleur sRGB à six chiffres, utilisant chacun deux chiffres pour les canaux rouge, vert et bleu après un #. #FFFFFF est blanc et #000000 est noir. Un septième et huitième chiffre en option ajoute un canal alpha (opacité), comme dans #4466EE80.

arrivée

Le travail des couleurs a deux moitiés et la plupart d'entre nous ne font que la première. Choisir une palette est la moitié amusante et subjective. Le vérifier - luminance, contraste, lisibilité des couleurs, comportement sombre - est la moitié qui est juste arithmétique, et c'est la moitié qui décide si les gens peuvent réellement lire ce que vous avez construit.

Le calcul n'est pas difficile. C'est juste quelque chose que vous devez faire décorer, et je ne l'ai pas fait, pendant des mois, sur mon propre site, dans une couleur que j'ai choisie moi-même.

le cueillette de couleurs Convertit entre HEX, RGB et HSL et vous donne le rapport de contraste, gratuit et entièrement dans votre navigateur. associez-le à la Générateur de gradient Pour les mélanges qui retiennent leur contraste bout à bout, et voyez le reste de l'étagère dans le Guide des outils de productivité des développeurs.