Qu'est-ce que Mélangeur de couleurs ?

Mélangez deux couleurs avec un curseur de proportion et voyez le résultat en temps réel. Affiche les valeurs HEX, RGB et HSL que vous pouvez copier directement dans votre code ou outil de design.

Choisissez deux couleurs, sélectionnez un mode de mélange — RGB, RYB, LAB, LCH, HSL ou OKLCH — et déplacez la proportion entre 0% et 100%. RGB moyenne directement dans l'espace écran, c'est le plus rapide mais le point médian peut être terne ; RYB mélange comme de la vraie peinture, donc le bleu et le jaune donnent du vert, le rouge et le jaune de l'orange ; LAB et LCH mélangent en espace perceptuel et donnent des dégradés plus doux entre teintes ; OKLCH est le modèle perceptuel le plus récent, aligné avec la spécification CSS color-mix, et produit en général le point médian le plus naturel. Les sorties incluent HEX, RGB, HSL, CMYK et le nom de couleur le plus proche, plus une lecture de contraste WCAG sur fond blanc et noir et un dégradé linéaire CSS prêt à copier. Les boutons 25, 50 et 75 pour cent sautent instantanément aux points de mélange courants sans manipuler le curseur.

Comment utiliser

1. Étape 1 — Sélectionnez la première couleur à l'aide du sélecteur de couleur ou saisissez sa valeur HEX.
2. Étape 2 — Sélectionnez la deuxième couleur, puis ajustez le curseur de proportion pour contrôler le mélange (0 % = première couleur pure, 100 % = deuxième couleur pure).
3. Étape 3 — Visualisez le résultat du mélange avec ses codes couleur et copiez les valeurs dont vous avez besoin.

Quand l'utiliser

• Construire des états hover et disabled en mélangeant une couleur de marque avec blanc ou gris.
• Produire des arrêts intermédiaires pour un dégradé CSS qui ne devient pas grisâtre au centre.
• Obtenir un accent plus doux en mélangeant deux couleurs de marque à faible proportion pour des encadrés.

Résultat

Un designer mélange le bleu de sa marque (#2196F3) avec du blanc (#FFFFFF) à 30 % pour créer une teinte subtile (#A1C9F8) destinée aux états de survol dans un kit d'interface.

FAQ

Quel mode de mélange utiliser la plupart du temps ?

Si votre pipeline le gère, utilisez OKLCH : c'est le mode le plus uniforme perceptuellement et il colle à la spécification moderne CSS color-mix. LAB est le deuxième meilleur choix, largement supporté par les outils de design. RGB convient quand les couleurs ont une luminance proche, LCH préserve mieux la chroma, HSL sert plutôt quand on veut une rotation de teinte qu'une interpolation lisse.

Pourquoi le milieu en RGB paraît parfois gris ou terne ?

RGB fait la moyenne numérique, pas perceptive. Des couleurs complémentaires comme bleu et orange annulent les canaux R, G et B, et le résultat vire au gris désaturé. Passez en LAB ou LCH, le point médian conserve sa saturation. Pour un résultat identique au mélange de peinture réelle, utilisez le mode RYB : il combine le bleu et le jaune en vert plutôt qu'en gris.

Quelle différence avec la fonction CSS `color-mix()` ?

color-mix() est disponible dans les navigateurs récents en srgb, lab, oklab, lch ou oklch. Cet outil renvoie du HEX que vous pouvez coller dans des feuilles de style plus anciennes et fournit un curseur visuel pour régler la proportion sans deviner le pourcentage.

Puis-je mélanger plus de deux couleurs ?

Pas en une seule étape, mais chaînez : mélangez A et B pour obtenir C, puis C avec D. Pour un dégradé à trois couleurs plus doux, mélangez A→B à 50% et B→C à 50%, et utilisez ces deux médians comme arrêts autour du B d'origine.

Que veulent dire 0% et 100% pour la proportion ?

0% donne la Couleur 1 pure, 100% la Couleur 2 pure, 50% le milieu. Le curseur avance par pas de 1%, ce qui permet d'affiner un teint ou une ombre : pour des états d'UI, un mélange à 10% donne un rendu différent d'un mélange à 15%.

Outils similaires