Mélangeur de couleurs

Mélangez deux couleurs de façon réglable. Créez des transitions fluides et des nuances intermédiaires.

Couleur 150/50Couleur 2

Noter Mélangeur de couleurs

Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.

Mélangez les couleurs en douceur

Créez la nuance intermédiaire parfaite en mélangeant deux couleurs. Idéal pour trouver le point médian entre des couleurs de marque, créer des dégradés ou générer des paliers de couleurs. Ajustez le ratio de mélange pour contrôler l’influence de chaque couleur.

Design et art

Fonctionnalités de l’outil

Ratio réglable

Affinez le mélange de 0 % (couleur 1) à 100 % (couleur 2) grâce à un curseur.

Export instantané

Obtenez instantanément le code couleur obtenu en HEX, RGB ou HSL.

Comment fonctionne Mélangeur de couleurs

Cet outil de mélange de couleurs combine deux couleurs d'entrée à l'aide d'algorithmes mathématiques qui simulent le mélange de peintures ou les modes de composition numérique. Le processeur convertit les codes hexadécimaux RVB en valeurs de composantes normalisées, applique une moyenne pondérée ou des formules de fusion spécialisées, puis reconvertit les résultats dans des formats de couleur affichables. Les modes de fusion standard comprennent l'interpolation linéaire pour des transitions progressives, le mode multiplication pour assombrir, le mode écran pour éclaircir, le mode incrustation pour renforcer le contraste et le mélange additif pour la théorie des couleurs lumière.

Le mode de fusion linéaire calcule chaque canal RVB indépendamment avec la formule : résultat = couleur1 * (1 - ratio) + couleur2 * ratio, où le ratio détermine la proportion de chaque couleur d'entrée dans le mélange final. Les modes avancés emploient des transformations non linéaires : le mode multiplication effectue une multiplication canal par canal suivie d'une normalisation, ce qui crée des tons saturés plus sombres ; le mode écran inverse les couleurs, les multiplie, puis les inverse à nouveau pour obtenir des résultats plus lumineux. L'outil tient compte de la correction gamma dans certains modes de fusion afin de produire des couleurs perceptuellement justes, conformes à la façon dont l'œil humain perçoit les rapports de luminosité.

Des curseurs interactifs règlent les ratios de mélange de 0 % à 100 %, pour un dosage précis des couleurs avec un aperçu mis à jour en temps réel. L'interface affiche les couleurs d'entrée, le mélange obtenu, les valeurs individuelles des canaux RVB, les équivalents TSL pour repérer teinte, saturation et luminosité, ainsi que les codes hexadécimaux utilisables directement en CSS. Les utilisateurs créent des couleurs de marque personnalisées, génèrent des points médians de dégradé, testent des harmonies de couleurs d'interface ou élaborent des palettes d'illustration. L'implémentation côté client effectue tous les calculs en local, ce qui convient pour expérimenter des formules de couleurs de marque sensibles sans exposer de données à l'extérieur.

Comment utiliser Mélangeur de couleurs

1

Choisissez les couleurs

Sélectionnez deux couleurs HEX à mélanger.

2

Ajustez le ratio

Réglez le ratio de mélange (0 % à 100 %) pour favoriser l'une des couleurs.

3

Obtenez le résultat

Copiez la couleur obtenue au format HEX, RGB ou HSL.

Exemple d'utilisation

Exemple de résultat du mélangeur de couleurs.

Entrée
Sample input
Sortie
Processed output

Questions fréquentes

Comment fonctionne le mélange de couleurs ?
L'outil calcule la moyenne des canaux RVB de deux couleurs, pondérée par le ratio indiqué.
Puis-je mélanger plus de deux couleurs ?
Pour l'instant, cet outil mélange deux couleurs à la fois. Pour des dégradés plus complexes, essayez notre générateur de dégradés.

Outils associés

Commentaires

Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.

Mélangeur de couleurs est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.

Cité par

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge