OKLCH peut vous éloigner des graphistes
(un peu)
Jusqu'à présent on faisait toujours la même chose. On choisissait une couleur de fond. Puis on choisissait une couleur de texte par dessus. Puis on allait vérifier le contraste. Puis on changeait. Puis on revérifiait. Puis c'était toujours pas bon. Sauf si tu avais des outils de graphistes. Et encore, c'était pas toujours bon. Surtout si tu voulais faire un thème sombre et un thème clair. C'est quand même 2 fois plus de travail.
Avec OKLCH on PEUT ne PLUS faire ça.
On n'écrit plus des couleurs. On écrit des RÈGLES de couleurs.
Tu dis une seule fois : "si le fond est plus sombre que 50% de luminosité, le texte est blanc. Sinon il est noir". Et c'est terminé. Plus jamais tu ne repenses au contraste. Plus jamais tu n'as de problème d'accessibilité. Enfin, si, mais c'est différent.. on y reviendra. Regarde déjà l'exemple
C'est pas un truc. Il faut penser mathématique. On dit à la classe
"prend la variable --bg puis applique les valeurs OKLCH
que tu trouves dans la variable --clr-brand.
Mais ATTENTION !, pour l'hue', tu ne prends pas la valeur de
--clr-brand, tu calcules une nouvelle teinte. tu prends la teinte d'orgine de la variable et tu ajoutes + 45°.
Le vrai problème c'est le résultat entre 40% et 60% de luminosité. C'est la zone grise. Rien n'est jamais vraiment noir ou vraiment blanc. Le contraste est toujours un peu merdique.
Donc on améliore la sélection des variables avec une déclaration déjà pré-établie. Voici un exemple de ce qu'il est possible d'avoir (moi j'ai fais plus simple, mais je ferais la démo plus bas) :
Alors attention, je décortique :
--bg, je dit qu'il faut enlever
0.3 de l et
0.3 de c et
une petite transparence de 0.8 (20% de transparence en gros)--bg.h
exacte de fond sans la modifier.Résultat : tu peux choisir uniquement en changeant les variables pour choisir ton constraste. Tu peux faire du noir et blanc, du sombre, du clair, du rouge, du..... bref. Le contraste sera propre.
Mais le truc chiant : Faut pas oublier de vérifier
si on change --h-brand, c'est pas 100% parfais.
Voilà exactement ce que ça donne avec les 4 angles de la roue. Dans tous les cas le texte est toujours parfaitement lisible. Tu peux changer la valeur de `--h-brand` à 330 dans le CSS, tout s'actualisera automatiquement.
calc(l - 0.4)
passe pas
-calc(l - 0.4)
sa pique hein?
L'oeil perçoit une harmonie
Cela passe, mais...
on force sur
l et c
on force sur
l et c
on force sur
l et c
on force sur
l et c
on force + sur
l et c
on force + sur
l et c
ha, est-ce plus contrasté ?
cette nuance est plus facile ?
C'est là qu'on voit la différence et l'importance des contrastes, chromas. Un jour, peut-être qu'on pourra calculer des variables sur des variables pré-existantes. J'ai essayé de faire un truc, mais cela n'a pas marché. Je vous montre.
Alors, c'est tordu. Il y a des clamp() pour faire en sorte que ça marche à la fois
pour les couleurs claires et les couleurs sombres.
En gros, le clamp() sert à limiter les valeurs dans une plage donnée (0 ou 1).
On multiplie par 0.97 pour les couleurs sombres et par 0.03 pour les couleurs claires
pour faire en sorte que le contraste ne soit pas trop fort.
Mais ça ne marche pas.
Je crois que le moteur de calcule panique. Le navigateur n'arrive pas à
prendre la valeur l de la variable --bg pour faire les calculs.
En gros cela aurait permis d'avoir une variable de contraste qui s'adapte automatiquement
à la luminosité de la couleur de fond. Peut-être qu'un jour on aura des if
dans le css ?
Voilà exactement comment je construis maintenant tous mes thèmes. Dans cet ordre. Pas un pas de plus. Pas un pas de moins.
C'est ton Hue. Juste un nombre entre 0 et 360. C'est toute l'identité de ton thème. Tout le reste en dérive. Moi c'est 330. Tu peux mettre ce que tu veux.
85% pour les actions, 50% pour les ombres, 15% pour les fonds sombres. Pas besoin de 12 niveaux. Personne ne voit la différence.
0.35 pour le neon qui pète les yeux, 0.05 pour les éléments neutres. C'est tout.
Une seule ligne. Tu l'écris une fois dans ta vie et tu ne la touches plus jamais.
:hover ? Tu baisses la luminosité de 10%.
:active ? Tu baisse de 20%.
:disabled ? Tu met la chroma à 0.02.
C'est tout. Jamais tu ne redéfinis de couleur.
Sauf pour des objects très ponctuel comme on l'a vu avec le svg.
Il faut être honnête. Ce système n'est pas pour tout le monde.
Si tu es un ou une graphiste qui aime passer du temps à choisir la teinte exacte de bleu qui va bien, les contours par thématiques, les petits détails de reflet, ce système est moins... organique? C'est plus pour avoir "le moins possible". Il n'y a plus les 10 couleurs selon les contextes. Il y a juste des règles qui marchent.
Personnellement, je n'ai plus trop envie d'avoir 10 nuances, des dégradés, des animations d'objects ou des fioritures.
Je veux juste que ça marche.
Je veux juste que ça soit accessible.
Je veux juste que ça soit facile à maintenir.
Je veux juste que ça soit facile à faire évoluer.
Je veux juste que ça soit facile à faire varier pour les utilisateurices.
Si tu es un.e développeureuse qui aime faire du pixel perfect, ce système est moins... complexe? Tu ne peux plus dire "ce bouton doit être exactement à 45° de ton bleu de base". Tu dois juste dire "ce bouton doit être dans la même teinte que le bleu de base". C'est plus pour avoir "le mieux possible". Il y a juste des règles qui fonctionnent.
Tu perds le lien avec le design à l'ancienne ou avec le design professionnalisé.
Tu gagnes un thème qui ne casse pas. Surtout si un jour on a des if.
Perso, comme je ne suis pas graphiste et que je ne suis pas doué avec les couleurs.
Je trouve plus simple.
Alors attention, je ne dis pas qu'on ne peut pas faire de beaux thèmes
très complexes. Juste que ce n'est pas tellement mon objectif. C'est le LAB quoi :D