CodeKitHubEn quoi consiste cet outil ?
Un mélangeur de couleurs interpole linéairement les canaux rouge, vert et bleu de deux couleurs selon un ratio choisi, le même calcul qu'utilise un dégradé en interne. À 0 %, le résultat est la Couleur A, à 100 % c'est la Couleur B, et à 50 % c'est le point médian arithmétique de chaque canal RGB.
C'est différent du mélange de peinture physique (qui est soustractif et dépend du pigment), et ce n'est pas non plus équivalent à une moyenne dans l'espace HSL — l'interpolation linéaire RGB est ce qu'utilisent les dégradés CSS, les outils de conception et la plupart des utilitaires « couleur entre deux couleurs », donc le résultat correspond à ce que vous verriez dans un dégradé de navigateur entre ces deux mêmes couleurs.
Pourquoi l'utiliser ?
- Trouvez une couleur de survol ou d'état actif qui se situe naturellement entre votre couleur de base et un accent — au lieu de deviner un ajustement au hasard.
- Consultez le code HEX exact à n'importe quel ratio, pas seulement à l'œil sur une capture d'écran de dégradé.
- La rampe en 11 étapes génère en un clic une palette complète d'une couleur à l'autre, utile pour la visualisation de données ou un dégradé à plusieurs points.
- Cliquez sur n'importe quelle étape pour copier instantanément son code HEX.
- Gratuit, instantané et entièrement local — aucun envoi de fichier, aucun compte.
Mode d'emploi
- Choisissez la Couleur A et la Couleur B à l'aide des sélecteurs de couleur ou en saisissant un code HEX.
- Faites glisser le curseur de ratio pour définir la proportion de Couleur B à mélanger.
- Lisez les valeurs HEX et RGB résultantes au-dessus de l'échantillon.
- Cliquez sur n'importe quel échantillon de la rampe en 11 étapes ci-dessous pour copier son code HEX.
Exemple
Entrée
Couleur A #3B82F6 (bleu), Couleur B #F59E0B (ambre), ratio 50 %Résultat
#9B9E7D — rgb(155, 158, 125)Exactement à 50 %, chaque canal RGB correspond à la moyenne arithmétique des canaux des deux couleurs d'entrée.
Foire aux questions
Pourquoi cela ne correspond-il pas à ce que j'obtiendrais en mélangeant de la peinture réelle ?
Le mélange de peinture est soustractif (les pigments absorbent la lumière) et dépend des pigments concernés — mélanger de la peinture bleue et jaune donne du vert, par exemple. Cet outil mélange de la lumière (canaux RGB) de façon additive/linéaire, comme le font les écrans, les dégradés CSS et la plupart des outils de conception numérique. Les deux systèmes produisent des résultats réellement différents, par conception et non par erreur.
Est-ce équivalent à un linear-gradient CSS entre les deux couleurs ?
Oui — un linear-gradient(couleurA, couleurB) CSS interpole les canaux RGB de la même manière que cet outil, donc la couleur que vous verriez au point médian de ce dégradé correspond au résultat à 50 % obtenu ici.
Pourquoi la couleur mélangée paraît-elle parfois terne ou grisâtre ?
Mélanger deux teintes saturées mais très différentes (comme le bleu et l'orange, presque complémentaires) dans l'espace RGB produit souvent un point médian à faible saturation, grisâtre ou brunâtre — c'est une propriété réelle de l'interpolation RGB, pas un bug. Pour un mélange plus vif, essayez des couleurs plus proches sur le cercle chromatique, ou mélangez dans l'espace HSL en ajustant la teinte tout en gardant une saturation élevée (ce que ce mélangeur RGB direct ne fait pas).
Puis-je mélanger plus de deux couleurs à la fois ?
Pas en une seule étape — l'outil mélange exactement deux couleurs. Pour en combiner trois, mélangez les deux premières selon le ratio voulu, copiez le résultat, puis collez-le comme nouvelle Couleur A face à votre troisième couleur. Procéder par étapes vous donne aussi un contrôle sur la pondération de chacune, ce qu'une moyenne directe à trois couleurs ne permettrait pas.
Dois-je utiliser cet outil ou le Générateur de Nuances de Couleur ?
Si vous avez besoin d'une couleur située entre deux couleurs différentes — par exemple une teinte de transition entre votre bleu de marque et un accent ambré — utilisez ce mélangeur. Si vous avez besoin de variantes plus claires et plus sombres d'une seule couleur (états de survol, arrière-plans, une rampe de type Tailwind 50-900), utilisez plutôt le Générateur de Nuances de Couleur : il garde la teinte et la saturation fixes et ne fait varier que la luminosité, donc chaque résultat reste clairement dans la même famille de couleur.
Quels formats de couleur puis-je saisir dans les champs de saisie ?
Les champs de texte acceptent les codes HEX à 6 chiffres, avec ou sans le # initial (par exemple 3B82F6 ou #3B82F6). Le HEX abrégé à 3 chiffres, la notation rgb() et les noms de couleur CSS ne sont pas interprétés là — mais vous pouvez choisir visuellement n'importe quelle couleur avec le sélecteur de couleur natif situé à côté de chaque champ, et le champ HEX se met à jour en conséquence.