Color
Mixer
Mélangez deux couleurs et obtenez le résultat instantanément — avec les valeurs HEX, RGB et HSL.
① Choisir la Couleur A et la Couleur B ② Faire glisser le curseur pour régler le ratio ③ Copier le résultat mélangé
Couleur A
Couleur B
Préréglages de paires de couleurs:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
Comment fonctionne le mélange de couleurs ?
Mélange de couleurs numérique par interpolation RGB linéaire : résultat = couleur1 + (couleur2 − couleur1) × ratio, appliqué à chaque canal R, G, B. À 50% vous obtenez la moyenne arithmétique ; à 25% le résultat penche à 75% vers la Couleur A. C'est le même algorithme que la fonction CSS
color-mix() et mix-blend-mode, et il reflète le moteur de fusion de Figma. Copiez le résultat en HEX, RGB ou HSL directement dans le code. Pour les design tokens et palettes de marque, chaînez les résultats.Questions fréquemment posées
Le mélangeur utilise l'interpolation linéaire dans l'espace RGB. Chaque canal (R, G, B) est mélangé avec la formule : résultat = couleur1 + (couleur2 - couleur1) × ratio. À 0% vous obtenez la Couleur A, à 100% la Couleur B, à 50% la moyenne arithmétique des deux.
Le mélange RGB est additif et travaille avec la lumière. Mélanger de la lumière rouge et verte donne du jaune, tandis que mélanger des peintures rouges et vertes donne un brun terne. Le mélangeur numérique utilise le mélange RGB (additif).
Lors du mélange dans l'espace RGB, le point médian de deux couleurs saturées complémentaires traverse souvent une zone de faible saturation (grise), car l'interpolation linéaire RGB ne préserve pas le chemin de teinte.
L'outil fournit trois formats. Utilisez le code HEX directement dans les propriétés CSS. Utilisez RGB avec la notation rgb(). En CSS moderne, vous pouvez aussi utiliser color-mix() : color-mix(in srgb, #couleur1 50%, #couleur2).
Cet outil mélange exactement deux couleurs. Pour mélanger plusieurs couleurs, enchaînez les résultats : mélangez d'abord la Couleur A et B, puis le résultat avec la Couleur C.
Le curseur va de 0% (100% Couleur A) à 100% (100% Couleur B). À 50% les deux couleurs contribuent également. À 25% le résultat penche à 75% vers la Couleur A.
Cas d'utilisation courants : générer des couleurs de transition entre les couleurs de marque, créer des états intermédiaires pour les éléments interactifs, construire des rampes de couleurs pour les visualisations de données.