Générateur de teintes claires
Générez des teintes plus claires en mélangeant une couleur avec du blanc par étapes régulières. Saisissez une couleur dans n’importe quel format CSS, choisissez de 2 à 20 étapes et un espace de mélange, puis obtenez un tableau avec les valeurs HEX, RGB, HSL et OKLCH de chaque teinte, en commençant par la couleur d’origine. Le mélange sRGB reproduit le fonctionnement des outils de teintes classiques et de Sass, tandis qu’OKLab produit des étapes perceptuellement régulières. Idéal pour les arrière-plans, les états au survol et les gammes.
Foire aux questions
Qu’est-ce qu’une teinte claire ?
Une teinte claire est une couleur mélangée avec du blanc. Elle conserve sa teinte et devient plus claire et plus pâle, contrairement à une nuance, mélangée avec du noir, ou à un ton, mélangé avec du gris.
Comment les étapes sont-elles réparties ?
Avec N étapes, la ligne k mélange la couleur avec une proportion de blanc égale à (k - 1) / N : 10 étapes donnent donc 0 %, 10 %, 20 %, et ainsi de suite jusqu’à 90 %. La première ligne correspond toujours à la couleur d’origine, et le blanc pur ne figure jamais dans la liste.
Quelle est la différence entre le mélange sRGB et OKLab ?
Le mélange sRGB fait la moyenne des valeurs de canal encodées en gamma, comme le font Sass mix() avec du blanc et la plupart des générateurs de teintes claires classiques. Le mélange OKLab s’effectue dans un espace perceptuel : les étapes de luminosité paraissent donc plus régulières et les teintes claires perdent moins rapidement leur intensité.
Quels formats d’entrée puis-je utiliser ?
Codes hexadécimaux avec ou sans #, noms de couleurs CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() et cmyk(). Saisissez une couleur par exécution.
Combien de teintes claires puis-je générer ?
De 2 à 20 par exécution, avec 10 par défaut. Le nombre comprend la couleur d’origine sur la première ligne.
Quelles valeurs le tableau affiche-t-il ?
Pour chaque étape : la proportion de blanc, le code hexadécimal, rgb(), hsl() et oklch() en syntaxe CSS moderne. Les canaux RGB sont des nombres entiers, les pourcentages HSL comportent jusqu’à deux décimales, et la luminosité et la chroma OKLCH jusqu’à quatre.
Que deviennent les couleurs transparentes ?
L’alpha de la couleur d’entrée est conservé pour chaque teinte claire, car le blanc est mélangé avec le même alpha. Les codes hexadécimaux ont alors 8 chiffres et les fonctions CSS se terminent par l’alpha après une barre oblique.
Que deviennent les couleurs hors sRGB ?
Le mélange utilise la couleur complète, mais HEX, RGB et HSL ne peuvent afficher que sRGB. Les étapes hors gamut sont donc converties en sRGB à l’aide de l’algorithme Color 4 CSS dans ces colonnes. La colonne OKLCH conserve la valeur non convertie.
Comment utiliser les teintes claires dans CSS ?
Copiez les valeurs hexadécimales ou oklch() dans des propriétés personnalisées telles que --brand-100 et --brand-200. Pour effectuer le mélange dans le navigateur, color-mix(in oklab, var(--brand) 80%, white) produit la même teinte claire à 20 % que le réglage OKLab.
Puis-je utiliser du texte blanc sur une teinte claire ?
En général, non, car les teintes claires offrent peu de contraste avec le blanc. Utilisez du texte sombre sur des teintes claires et vérifiez chaque combinaison avec un outil de vérification du contraste ; le texte normal doit atteindre au moins 4.5:1 pour WCAG AA.