Color Picker avec valeurs OKLCH

Que fait le Color Picker ?

Le picker représente une couleur simultanément dans cinq modèles — HEX, RGB, HSL, HSB et OKLCH — et livre à côté immédiatement six snippets de code pour CSS, Tailwind v4, SwiftUI, Flutter et Figma. Les sliders OKLCH sont le cœur du picker : luminosité, chroma et teinte sont indépendants l’un de l’autre, car les axes sont perceptuellement uniformes. Cela rend le picker plus adapté au travail de design system qu’un slider HSL classique.

Pur client. Chaque valeur reste dans votre navigateur. Pas de serveur, pas de tracking, pas de mur de cookies. Les couleurs Recent ne tiennent que pour la session courante — au rechargement, la rangée est vide.

Pourquoi OKLCH d’abord ?

En HSL, une couleur jaune-vert vive paraît plus claire qu’un violet sombre, bien que les deux aient la même valeur L. Cela tient au fait que HSL calcule la luminosité linéairement à partir de RGB — ce qui ne correspond pas à la façon dont l’œil humain perçoit la lumière. OKLCH résout ce problème parce qu’il opère dans l’espace perceptuel Oklab : même valeur L signifie même luminosité perçue, que la couleur soit verte, bleue ou rouge.

Pour les design systems, cela signifie : une palette de couleurs à luminosité constante et teinte variable fonctionne en OKLCH sans réajustement. En HSL, il faut corriger la luminosité par teinte, sinon les accents sautent.

Alerte gamut P3 et Rec2020

OKLCH peut décrire des couleurs que l’espace sRGB ne peut pas représenter. Sur un écran P3 moderne — tous les appareils Apple depuis 2015, beaucoup de smartphones Android, moniteurs designer modernes — ces couleurs sont visibles. Sur un moniteur sRGB standard, elles sont clampées. Le picker détecte automatiquement cette situation et affiche une petite alerte « hors sRGB » dès que la combinaison OKLCH sélectionnée quitte le triangle sRGB. Vous savez ainsi que vos destinataires verront la couleur différemment selon le moniteur.

Comment fonctionnent EyeDropper et prélèvement de pixel depuis une image ?

Le bouton EyeDropper ouvre la pipette d’écran native du navigateur : un clic n’importe où sur l’écran reprend la couleur du pixel. Disponible dans Chrome à partir de la version 95 et Edge à partir de 95. Dans Firefox et Safari, l’API manque encore — l’outil affiche alors une indication et masque le bouton plutôt que de produire une erreur.

Comme alternative cross-browser, il y a le prélèvement sur image : glissez une image dedans ou ouvrez-la d’un clic, puis cliquez un pixel dans l’image. La pipette lit les valeurs RGB via l’élément <canvas> directement depuis l’image — tout dans le navigateur, aucune transmission à un serveur. Fonctionne avec tout format que le navigateur décode : JPG, PNG, WebP, GIF, SVG, AVIF.

Pourquoi le contraste dual WCAG 2.2 et APCA ?

Une couleur n’est jamais lisible isolément — elle est toujours sur un fond. Le picker affiche donc le contraste contre un fond de référence clair et un sombre en parallèle. Vous voyez ainsi d’un coup d’œil si la couleur convient à une UI Light Mode, Dark Mode ou aux deux.

WCAG 2.2

Le ratio des Web Content Accessibility Guidelines est la référence juridiquement contraignante selon l’European Accessibility Act et les transpositions nationales (par ex. la loi française du 11 février 2005 pour l’accessibilité numérique). Seuils :

• 3,0 — grand texte (≥18 pt ou ≥14 pt gras)
• 4,5 — texte courant (AA)
• 7,0 — texte courant (AAA, niveau le plus élevé)

WCAG mesure le contraste comme un rapport de luminances relatives, mais ne connaît pas de polarité — la valeur est symétrique entre premier plan et arrière-plan.

APCA Lc

L’Accessible Perceptual Contrast Algorithm d’Andrew Somers a été proposé pour WCAG 3 parce qu’il modélise le contraste de façon plus perceptuelle. Les valeurs APCA sont signées : positif signifie texte sombre sur fond clair, négatif l’inverse. Règles empiriques de la recommandation APCA-W3 :

• Lc 75+ — petit texte courant (env. 14 pt)
• Lc 60+ — texte courant plus grand
• Lc 45+ — mises en avant et icônes
• Lc 15+ — composants UI et lignes de séparation

Les valeurs sous 15 sont pratiquement illisibles. L’échelle va d’environ −108 (blanc sur noir) à +108 (noir sur blanc).

Voir WCAG et APCA simultanément aide à classer les cas limites — certaines couleurs passent WCAG juste, mais échouent à APCA et inversement. Pour une marque Light Mode qui atteint tout juste WCAG-AA, un coup d’œil sur la valeur APCA vaut la peine.

Que montre la simulation daltonisme ?

Environ 8 % de tous les hommes et 0,4 % de toutes les femmes en Europe occidentale ont une forme de dyschromatopsie. La plus fréquente est la deutéranopie (déficit du vert), suivie de la protanopie (déficit du rouge). La tritanopie (déficit du bleu) est très rare. Le picker recalcule la couleur sélectionnée selon la méthode de Machado, Oliveira et Fernandes (2009) pour les trois déficits — sur la base de leur modèle physiologique de la réponse des cônes. La théorie originale remonte aux travaux de Brettel, Viénot et Mollon (1997).

Si deux couleurs UI paraissent identiques dans la simulation, elles ne sont pas distinguables pour le déficit concerné. Le rouge et le vert d’un feu tricolore paraissent tous deux jaunâtres-olive en deutéranopie — c’est la raison classique pour laquelle de bonnes cartes de statut portent en plus une icône ou un libellé.

Quels snippets de code le picker délivre-t-il ?

Un clic livre la couleur choisie dans le format requis par votre prochaine étape :

• Variable CSS — --brand: #1A8FE6; pour un stylesheet propre ou une tokens.css.
• Tailwind v4 arbitrary — bg-[oklch(60%_0.18_240)] pour usage unique dans le markup.
• Tailwind v4 @theme — un bloc @theme { --color-brand: ...; } pour un design token.
• SwiftUI — Color(red:, green:, blue:) avec valeurs 0..1 pour apps iOS / macOS.
• Flutter — Color.fromRGBO(26, 143, 230, 1.0) pour code Dart.
• Figma HEX — 1A8FE6 sans # initial, comme Figma l’attend dans le champ Color Picker.

Où sont stockées les couleurs Recent ?

Jusqu’à huit dernières couleurs sélectionnées tiennent comme une petite rangée pour la session courante du navigateur — sans localStorage, sans cookies, sans serveur. Au rechargement, la rangée est vide. C’est une décision délibérée : pas de stockage navigateur signifie aussi pas d’obligation RGPD, pas de mur de cookies, pas de trou dans la politique de protection des données. Pour conserver un set, copiez les snippets de code dans une note ou un stylesheet. Pour partager une seule couleur, utilisez le lien de partage avec OKLCH dans le hash d’URL — #oklch=62.80_0.258_29.23 reconstruit la couleur à l’ouverture.

Comment sont réglés clavier, tactile et tolérance d’entrée ?

Chaque slider accepte les touches fléchées pour des pas de un pour cent ou un degré — bon pour ajuster finement. Tab passe proprement par l’ordre OKLCH → entrée HEX → EyeDropper → image → snippets → contraste → aperçu, pour que l’outil reste utilisable sans souris. Les cibles tactiles font partout au minimum 44 × 44 pixels pour satisfaire WCAG 2.5.5.

Le champ d’entrée HEX tolère avec ou sans # initial, majuscules et minuscules, et peut traiter des valeurs à 3, 4, 6 ou 8 chiffres — le convertisseur étend #FA0 automatiquement à #FFAA00. Dès que l’entrée est parseable, les sliders OKLCH sautent en synchronisation sur la valeur correspondante, et la rangée Recent accueille la couleur.

Quels outils sont liés ?

D’autres outils de l’écosystème kittokit qui correspondent au sujet :

• Convertisseur HEX vers RGB — convertir des couleurs individuelles entre HEX, RGB, HSL et OKLCH, sans interface picker.
• Vérificateur de contraste — vérifier deux couleurs concrètes contre les seuils WCAG, avec aperçu côte à côte.
• Générateur de dégradé CSS — construire des dégradés avec stops OKLCH en interpolation perceptuellement uniforme.
• Générateur Box-Shadow — ombres multicouches avec entrée de couleur OKLCH et presets Material Elevation.