Couleur · T-07
Créer une échelle de couleurs
Une couleur en entrée, onze nuances en sortie : du presque blanc au presque noir, avec des pas égaux pour l’œil. Chaque pas montre tout de suite si un texte blanc ou noir y est lisible.
Vos fichiers restent sur votre appareil
Questions
À savoir
Pourquoi en OKLCH ?
En OKLCH, un pas égal en luminosité est aussi un pas égal pour l’œil. En HSL, le jaune paraît bien plus clair que le bleu à la même valeur. Vous obtenez ainsi une échelle qui paraît aussi régulière dans chaque teinte.
Ma propre couleur reste-t-elle dans l’échelle ?
Oui, par défaut votre couleur se trouve exactement au pas qui correspond le mieux à sa luminosité, avec un cadre rose. Si vous désactivez cette option, vous obtenez une échelle entièrement calculée.
Quel pas utiliser pour le texte ?
Regardez les chiffres de contraste : si AA figure à côté de blanc, un texte blanc y est lisible ; à côté de noir, un texte noir. Pour du texte sur une page blanche, on prend en général 600 ou plus foncé.
Comment ça marche
Créer une échelle de couleurs en trois étapes
Choisissez votre couleur
Votre couleur de marque, dans n’importe quelle notation. Kleurstaal la place au pas qui correspond le mieux à sa luminosité.
Regardez l’échelle
Onze pas avec leur code et leur contraste sur blanc et sur noir. AA s’affiche quand un texte normal est lisible.
Emportez le code
En variables CSS, pour Tailwind 4 ou 3, ou en JSON, en HEX ou en OKLCH.