Comment utiliser : Mélangeur de couleurs
- Saisissez ou choisissez Couleur A et Couleur B.
- Indiquez le nombre d’étapes souhaité (extrémités comprises).
- Sélectionnez un espace d’interpolation : OKLab offre le mélange le plus fluide et le plus régulier.
- Cliquez sur un échantillon pour copier une couleur, ou copiez l’ensemble sous forme de variables CSS, de
color-mix()ou de JSON.
À quoi sert un mélangeur de couleurs ?
Il calcule des couleurs régulièrement espacées entre deux extrémités. Avec 5 étapes entre bleu et ambre, vous obtenez le bleu, trois couleurs intermédiaires et l’ambre. C’est utile pour les dégradés à plusieurs arrêts, les échelles de visualisation de données, les indicateurs de progression, les bordures subtiles entre deux couleurs de surface et les états de survol thématisés.
Pourquoi l’espace d’interpolation est important
| Espace | Résultat | Idéal pour |
|---|---|---|
| OKLab | Étapes perceptuellement régulières, sans milieu terne | La plupart des interfaces, dégradés, échelles de graphiques |
| OKLCH | Parcourt la roue des teintes et conserve des couleurs vives | Dégradés arc-en-ciel et dégradés de marque |
| sRGB | La valeur par défaut classique des navigateurs ; les milieux peuvent tourner au gris ou au sombre | Reprise de maquettes existantes |
| sRGB linéaire | Mélange physiquement correct de la lumière, milieux plus lumineux | Simulation d’un mélange lumineux réel |
| HSL | Basé sur la teinte, luminosité perçue irrégulière | Balayages rapides de teintes |
Mélanger des couleurs complémentaires, comme bleu et jaune, en sRGB produit un gris terne au centre ; OKLab garde une transition nette. C’est pourquoi le CSS moderne vous permet de choisir explicitement l’espace.
Mélanger des couleurs en CSS natif
Tous les navigateurs actuels prennent en charge color-mix() ainsi que les indications d’interpolation dans les dégradés. Vous pouvez donc souvent vous passer de valeurs codées en dur :
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Les étapes générées restent pratiques pour les outils de design, les modèles d’e-mails, les graphiques dessinés en canvas ou SVG, et partout où les fonctions CSS ne sont pas disponibles. Pour construire une échelle complète du clair au sombre à partir d’une couleur, utilisez le Générateur de couleurs Tailwind ; pour le code de dégradés à plusieurs arrêts, utilisez le Générateur de dégradé CSS.
Aussi recherché comme : mélange de couleurs, interpolation de couleurs, étapes de couleur, color-mix, dégradé en étapes, mélanger deux couleurs.
Outils complémentaires : Mélangeur de couleurs
- Convertisseur OKLCH — Explorez l’espace de couleur OKLCH, perceptuellement uniforme, grâce à des curseurs en temps réel.
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Trouveur de nom de couleur — Collez un code HEX pour obtenir son nom le plus proche, lisible par un humain, ainsi que des noms de tokens propres pour votre CSS, SCSS, JavaScript ou votre configuration Tailwind.
- Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.
Questions fréquentes
Quelle interpolation dois-je utiliser ?
Les couleurs extrêmes sont-elles comprises dans le nombre d’étapes ?
Qu’est-ce que color-mix() en CSS ?
color-mix(in oklab, red, blue 30%) mélange deux couleurs directement dans le navigateur. Cette fonction est prise en charge par tous les navigateurs actuels et fonctionne avec les variables CSS, si bien que les mélanges se mettent à jour automatiquement avec votre thème.