Mélangeur de couleurs

Que veut dire mélanger des couleurs ?

Mélanger deux couleurs revient à les fondre le long d'une ligne droite dans un espace de couleur, ce qui produit toutes les nuances intermédiaires entre elles. Le choix de l'espace est important : mélanger en sRGB brut (les valeurs que vous voyez dans un code hex) paraît intuitif mais produit des points médians ternes et grisâtres — parce que le sRGB est encodé en gamma, pas linéaire. Mélanger en RGB linéaire-lumière — ce que fait cet outil par défaut — donne des points médians plus lumineux et plus fidèles à la façon dont la lumière s'additionne dans le monde physique. La différence est la plus visible quand on mélange une couleur saturée avec du blanc ou avec une autre couleur saturée : le mélange linéaire garde le point médian éclatant, tandis que le mélange sRGB naïf l'aplatit.

Comment utiliser ce mélangeur

Choisissez deux couleurs avec les sélecteurs (ou collez des codes hex), puis faites glisser le curseur de ratio pour décider de la quantité de B à mélanger dans A. Le bloc de résultat se met à jour en direct, en affichant les valeurs hex, RGB et HSL. Cochez Afficher 11 paliers intermédiaires pour faire apparaître une bande de gradient en 11 paliers entre les deux — pratique pour choisir des couleurs interpolées pour des axes de graphique ou des images d'animation. Cliquez sur un palier pour copier son hex.

Quand utiliser quoi

Utilisez ce mélangeur pour fondre des couleurs de marque et créer des états hover/actif, dériver des séries de graphique interpolées à des positions personnalisées, construire des gradients liés aux données (heatmap du froid au chaud), ou vérifier rapidement si deux couleurs vont produire un point médian boueux avant de valider un gradient. Pour les états d'interface, des paliers à 25 %, 50 % et 75 % donnent une rampe cohérente sans saut visuel. Pour la dataviz, 11 paliers correspondent à une échelle 0-100 typique (tous les 10 %) — pas de calcul supplémentaire.

Comment le mélange est calculé

Chaque couleur d'entrée est dégammée en sRGB linéaire : les valeurs en dessous de 0,04045 sont divisées par 12,92, les autres passent par ((c + 0,055) / 1,055)^2,4. Les deux valeurs linéaires sont ensuite interpolées linéairement par canal : out = A·(1−t) + B·t où t est la position du curseur. Le résultat est enfin réencodé en gamma sRGB et ramené dans la plage 0-255. C'est le même pipeline que les éditeurs d'image modernes pour un rendu de gradient précis.

Mélanger dans différents espaces de couleur

sRGB naïf : rapide, intuitif, mais produit des points médians sombres/boueux — à éviter pour les mélanges éclatants. sRGB linéaire (ce que nous utilisons) : addition de lumière physiquement correcte ; les points médians restent lumineux. HSL : bon pour les rampes de teinte mais interpole mal dans les zones peu saturées. OKLCH : perceptuellement uniforme ; la référence pour les design tokens mais plus complexe à calculer. Pour le mélange de couleurs au quotidien, le sRGB linéaire trouve le bon équilibre entre précision et simplicité.

Questions fréquentes

Pourquoi mon mélange 50/50 paraît-il plus lumineux que prévu ?

Parce que nous mélangeons en espace linéaire-lumière, qui modélise comment les photons s'additionnent réellement. Le mélange naïf en sRGB encodé en gamma assombrit les points médians — c'est l'aspect terne et grisâtre que donnent les vieilles applications de peinture. Le résultat plus lumineux ici est physiquement plus juste ; si vous voulez le rendu legacy, mélangez en HSL avec une moyenne de luminosité à la place.

Quelle est la différence entre mélange et gradient ?

Le mélange produit une seule couleur de sortie à un ratio donné ; un gradient est la visualisation de toutes les sorties entre 0 % et 100 %. Le mode 11 paliers fait le pont entre les deux — il échantillonne le gradient à 11 ratios discrets, ce qui suffit pour repérer des bandes de couleur ou choisir des couleurs intermédiaires adaptées aux graphiques.

Pourquoi 11 paliers, pas 10 ?

Onze paliers vous donnent les deux extrémités (0 % et 100 %) plus neuf points médians régulièrement espacés — la même densité qu'utilise linear-gradient en interne pour les paliers en pourcentage. Avec dix paliers, vous perdriez soit le début, soit la fin de la rampe.

Mélanger deux couleurs complémentaires donne-t-il toujours du gris ?

Oui, par définition — c'est ainsi que les paires complémentaires sont construites. Le point médian du rouge et du cyan, ou du jaune et du bleu, tombe sur l'axe achromatique. Utile comme test : si votre palette soi-disant complémentaire ne donne pas un point médian quasi neutre, les couleurs ne sont pas vraiment complémentaires.

Puis-je mélanger plus de deux couleurs ?

Pas en un seul passage avec cet outil — il est volontairement limité à un mélange à deux couleurs. Pour construire un gradient à plusieurs paliers, mélangez les paires séquentiellement : mélangez A et B pour obtenir C, puis mélangez C et D, et ainsi de suite. Ou utilisez notre Générateur d'harmonie de couleurs pour disposer trois couleurs ou plus selon une relation géométrique connue.

Les canaux alpha sont-ils pris en charge ?

Pas encore — le mélangeur considère que les deux entrées sont opaques. Mélanger des couleurs avec des valeurs alpha différentes nécessite des décisions de type alpha droit vs prémultiplié qui dépendent de l'usage (superposition d'interface vs composition d'image), donc nous gardons cet outil concentré sur les mélanges opaques. Pour des piles semi-transparentes, superposez les couleurs directement avec les background CSS.

Mélangeur de couleurs