# Générateur de tons de couleur

Générez des tons d’une couleur en la mélangeant à du gris neutre par étapes régulières, ce qui réduit la saturation tout en conservant la teinte. 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 pour chaque ton, en commençant par la couleur d’origine. Pratique pour créer des palettes adoucies, des états désactivés, des surfaces discrètes et des variantes de marque plus sobres.

## Foire aux questions

### Qu’est-ce qu’un ton ?

Un ton est une couleur mélangée à du gris. Il conserve sa teinte et devient plus doux, contrairement à une teinte claire, mélangée à du blanc, ou à une teinte foncée, mélangée à du noir.

### Quel gris est utilisé ?

Le gris moyen sRGB #808080, rgb(128 128 128). Les couleurs claires deviennent donc légèrement plus foncées et les couleurs foncées légèrement plus claires à mesure qu’elles s’en rapprochent. Pour mélanger avec un autre gris, utilisez le mélangeur de couleurs avec le gris de votre choix.

### Comment les étapes sont-elles réparties ?

Avec N étapes, la ligne k mélange la couleur avec (k - 1) / N de gris : 10 étapes donnent donc 0 %, 10 %, 20 %, et ainsi de suite jusqu’à 90 %. La première ligne correspond toujours à votre couleur d’origine ; le gris pur ne figure jamais dans la liste.

### En quoi un ton diffère-t-il d’une réduction de la saturation HSL ?

Réduire la saturation HSL conserve la luminosité HSL, tandis que le mélange avec du gris rapproche aussi la luminosité de la valeur moyenne. Les tons ressemblent donc à la couleur vue à travers un filtre gris, ce qui convient aux arrière-plans adoucis et aux états désactivés.

### 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, selon l’approche classique des nuanciers de tons façon peinture et de Sass mix(). Le mélange OKLab s’effectue dans un espace perceptuel, de sorte que la chroma diminue plus régulièrement d’une étape à l’autre.

### 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 tons 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 gris, le code hexadécimal, rgb(), hsl() et oklch() dans la syntaxe moderne CSS. 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 et à large gamut ?

L’alpha de l’entrée est conservé pour chaque ton ; les codes hexadécimaux ont donc 8 chiffres. Les étapes hors gamut sont converties en sRGB avec l’algorithme CSS Color 4 dans les colonnes HEX, RGB et HSL, tandis que la colonne OKLCH conserve la valeur non convertie.

### Comment recréer un ton dans CSS ?

Copiez la valeur hexadécimale ou oklch(), ou laissez le navigateur effectuer le mélange avec color-mix(in oklab, var(--brand) 70%, #808080) pour obtenir le ton à 30 % du réglage OKLab. color-mix() fonctionne dans tous les principaux navigateurs actuels.

Votre publicité ici ?

[Envoyez-nous un e-mail](mailto:hi@dennn.is?subject=Publicit%C3%A9%20sur%20OneClick%20Pro)

[Annonce La suite de plugins prête pour les agents de WordPress.](https://sleekwp.com/?ref=oneclickpro)