Générateur de nuances de couleur
Générez des nuances plus sombres en mélangeant une couleur avec du noir 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 nuance, en commençant par la couleur d’origine. Le mélange sRGB reproduit le fonctionnement des outils de nuances classiques et de Sass, tandis qu’OKLab produit des étapes perceptuellement régulières. Idéal pour créer des gammes de couleurs UI.
Foire aux questions
Qu’est-ce qu’une nuance ?
Une nuance est une couleur mélangée avec du noir. Elle conserve sa teinte et s’assombrit, contrairement à une teinte claire, mélangée avec du blanc, 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 noir é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 noir 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 noir et la plupart des générateurs de nuances classiques. Le mélange OKLab s’effectue dans un espace perceptuel : les étapes paraissent donc plus régulières en luminosité et les nuances sombres conservent davantage leur couleur.
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 nuances 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 noir, 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 nuance, car le noir 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 nuances dans CSS ?
Copiez les valeurs hexadécimales ou oklch() dans des propriétés personnalisées telles que --brand-600 et --brand-700. Pour effectuer le mélange dans le navigateur, color-mix(in oklab, var(--brand) 80%, black) produit la même nuance à 20 % que le réglage OKLab.
Les nuances plus sombres sont-elles automatiquement accessibles ?
Non. Vérifiez le contraste du texte avec chaque nuance, car une nuance qui paraît sombre peut tout de même passer sous 4.5:1 face à une autre couleur sombre ou à du texte coloré.