2 COULEURS · 3 ESPACES · 7 ÉTAPES · LOCAL
Combinez deux couleurs HEX avec un ratio précis de 0 à 100, comparez trois espaces d’interpolation, examinez les valeurs obtenues et copiez une déclaration CSS color-mix() prête à utiliser. Ce mélangeur de couleurs effectue tous les calculs dans votre navigateur et rend chaque couleur intermédiaire visible avant son emploi dans une palette, une interface, une illustration ou une étude chromatique de personnage.
Mis à jour le 11 août 2026
mélangeur de couleurs
Ce mélangeur de couleurs calcule une interpolation mathématique entre deux couleurs sRGB opaques. Choisissez la contribution de chaque extrémité, puis sRGB pour un mélange web familier, sRGB linéaire pour une interpolation proportionnelle à l’intensité lumineuse ou OKLCH pour un trajet mieux organisé perceptuellement. Le résultat change, car les trois espaces interpolent des coordonnées différentes.
Avec le ratio 50/50 par défaut, #FF5A5F et #2F80ED produisent #976DA6 en sRGB, #BE6FB8 en sRGB linéaire et #C060D6 en OKLCH. Ces trois réponses sont valides pour leur méthode. Le mélangeur de couleurs crée aussi sept nuances régulièrement espacées et convertit le point sélectionné en HEX, RGB et HSB.
mélangeur de couleurs
Une seule couleur médiane peut masquer la décision essentielle : le système de coordonnées emprunté entre les extrémités. La comparaison permet de choisir un mélange adapté au besoin visuel plutôt que d’accepter une valeur par défaut inexpliquée.
mélangeur de couleurs
Le mélangeur de couleurs nomme l’espace d’interpolation à côté de chaque résultat. Vous pouvez changer de méthode sans déplacer les couleurs ni le ratio ; toute différence visuelle vient donc du calcul. Cette expérience contrôlée simplifie la justification d’un choix pendant une revue de design ou un passage aux développeurs.
mélangeur de couleurs
Chaque mélange est disponible en HEX majuscule, RGB moderne, HSB arrondi et expression CSS color-mix(). Le mélangeur de couleurs affiche également une rampe de sept étapes pour les états, graphiques, transitions d’illustration et explorations de palette, sans calcul manuel des pourcentages intermédiaires.
mélangeur de couleurs
Les extrémités, le ratio, les résultats et les valeurs copiées restent dans la session du navigateur. Le mélangeur de couleurs ne transfère aucun fichier et ne demande aucun compte. Il convient donc aux couleurs de marque inédites, aux palettes client et aux premières orientations visuelles d’un personnage.
mélangeur de couleurs
Définissez deux extrémités HEX, ajustez le ratio et comparez le même mélange dans trois espaces.
mélangeur de couleurs
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Utilisez le HEX calculé comme repli si votre politique de navigateurs l’exige.
mélangeur de couleurs
Sélectionnez une nuance pour copier son HEX.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDConfidentiel par conception : toutes les couleurs sont mélangées localement dans ce navigateur.
mélangeur de couleurs
Traitez la sortie comme une décision reproductible : verrouillez les extrémités, comparez les espaces, puis validez le résultat dans son contexte final plutôt que sur une pastille isolée.
mélangeur de couleurs
Collez un code HEX à trois ou six chiffres pour chaque extrémité, ou utilisez les sélecteurs natifs. Donnez aux couleurs des rôles sémantiques, par exemple surface et accent, au lieu de les appeler seulement gauche et droite. Des rôles stables rendent toute modification de ratio plus facile à commenter et à documenter.
mélangeur de couleurs
Commencez à 50/50, passez de sRGB à sRGB linéaire puis OKLCH et déplacez ensuite le ratio par pas d’un point. Observez séparément la luminosité, le chroma et la teinte. Le mélangeur de couleurs conserve les deux extrémités pendant la comparaison, ce qui maintient une expérience contrôlée.
mélangeur de couleurs
Copiez la valeur retenue dans le composant, l’illustration ou le graphique réel. Vérifiez le contraste, les couleurs voisines, les thèmes clair et sombre et les navigateurs visés avant publication. Une médiane séduisante n’est pas automatiquement une couleur de texte accessible ni un jeton de production sûr.
mélangeur de couleurs
Les mêmes extrémités et le même pourcentage peuvent fournir des médianes très différentes. Ce tableau résume ce que chaque méthode interpole, ses usages et les contrôles à effectuer avant adoption.
| Méthode | Interpolation | Usages | Point de contrôle |
|---|---|---|---|
| sRGB | Canaux rouge, vert et bleu encodés avec gamma | Comportement web historique et mélanges familiers | La médiane peut paraître trop sombre ou grise |
| sRGB linéaire | Valeurs RGB linéaires avec l’intensité lumineuse | Composition proche de la lumière et transitions énergétiques | Le résultat peut sembler plus clair qu’un mélange UI habituel |
| OKLCH | Clarté perceptuelle, chroma et trajet court de teinte | Rampes régulières et palettes préservant le chroma | Les couleurs saturées peuvent être écrêtées en sRGB |
mélangeur de couleurs
Avant de transformer un mélange en valeur de production, vérifiez les entrées, la méthode, les conditions d’affichage et le rôle sémantique. Cette liste évite de créer un jeton séduisant mais inexplicable.
mélangeur de couleurs
Ce mélangeur de couleurs interpole des coordonnées d’écran. Les pigments réels interagissent par absorption, diffusion, opacité, liant, concentration et support ; deux peintures peuvent donc produire une couleur qu’aucune médiane RGB ou OKLCH ne prévoit. Utilisez des échantillons physiques ou les données du fabricant pour les décisions matérielles.
mélangeur de couleurs
Les méthodes et le vocabulaire de cette page suivent le modèle d’interpolation publié pour le Web. Les exemples numériques sont reproductibles avec les extrémités visibles et rendent le choix de méthode vérifiable.
CSS Color Module Level 4 précise :
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
mélangeur de couleurs
mélangeur de couleurs
mélangeur de couleurs
Aucun n’est universel. Utilisez sRGB pour un comportement web historique, sRGB linéaire pour refléter l’intensité lumineuse et OKLCH pour l’uniformité perceptuelle ou le chroma. Comparez les trois avec les mêmes extrémités avant de choisir.
mélangeur de couleurs
Chaque mode moyenne des coordonnées différentes. Les canaux sRGB encodés, les canaux RGB en lumière linéaire et la clarté, le chroma et la teinte OKLCH ne décrivent pas le même trajet ; des poids identiques donnent donc des médianes différentes.
mélangeur de couleurs
Oui. Saisissez des valeurs HEX à trois ou six chiffres. Ce mélangeur de couleurs calcule dans le navigateur, ne stocke pas la palette sur un serveur et ne demande ni image ni compte.
mélangeur de couleurs
Elle indique au navigateur compatible l’espace d’interpolation, les couleurs sources et leurs pourcentages. Utilisez-la dans une propriété de couleur CSS et ajoutez un repli statique testé si votre politique de compatibilité l’exige.
mélangeur de couleurs
Oui comme point de départ. Attribuez un rôle réel à chaque étape conservée, vérifiez contraste et états voisins, puis retirez les valeurs inutiles. Un espacement régulier dans un modèle ne garantit ni accessibilité ni maintenabilité.
mélangeur de couleurs
Non. Il interpole des coordonnées numériques et ne modélise ni chimie des pigments, ni réflectance spectrale, ni opacité, ni support. Mélangez et contrôlez physiquement les matériaux lorsque la sortie finale est une peinture, une encre ou une teinture.