Mélangeur de couleurs

Mélanger deux couleurs avec un curseur de proportion et voir le résultat

Qu'est-ce que c'est et comment ça marche ?

Un mélangeur de couleurs combine deux couleurs ou plus et affiche la couleur résultante. Contrairement à un sélecteur de couleur, un mélangeur simule le résultat de la combinaison de pigments ou de lumière, aidant designers, artistes et développeurs à prédire le résultat.

Cet outil supporte le mélange RGB (standard écran), l'interpolation HSL (gradients perceptuellement plus doux) et optionnellement le mélange RYB (modèle traditionnel du peintre).

Cas d'usage

• Variations de couleur de marque : mélangez votre couleur primaire avec du blanc (teinte) ou du noir (ombre) pour générer une palette complète.
• Point médian de dégradé : mélangez les couleurs de départ et de fin pour trouver la couleur idéale du point médian.
• Couleurs d'état UI : mélangez la couleur de base d'un bouton avec une superposition sombre pour prévoir la couleur au survol.

Questions fréquentes

Pourquoi mélanger rouge et bleu donne-t-il des résultats différents à l'écran et en peinture ?

Les écrans utilisent le RGB additif : rouge + bleu = magenta. Les pigments utilisent le mélange soustractif, donnant un violet-brun plus foncé. Le modèle RYB est une approximation simplifiée.

Quelle est la différence entre teinte, ombre et ton ?

Teinte = couleur + blanc (plus claire). Ombre = couleur + noir (plus sombre). Ton = couleur + gris (atténuée).

Comment fonctionne mathématiquement le mélange RGB 50/50 ?

Chaque canal RGB est moyenné indépendamment : mix(rouge1, rouge2) = (rouge1 + rouge2) / 2.

Le mélange de couleurs en CSS est-il possible nativement ?

CSS color-mix() est supporté dans tous les navigateurs majeurs depuis 2023 : color-mix(in srgb, red 50%, blue 50%).

Couleur

Générateur de palette · Générateur de dégradé CSS · Vérificateur de contraste · Trouveur de nom de couleur