Mélangeur de couleurs — Mélanger deux couleurs

Fusionner deux couleurs d'écran

Mélanger des couleurs est utile quand vous avez besoin d'un état hover entre deux tokens, du point médian d'un dégradé, d'une couleur de transition pour un graphique ou d'une exploration rapide du lien entre deux couleurs de marque. Ce mélangeur de couleurs fusionne deux couleurs choisies en interpolant leurs canaux rouge, vert et bleu. Déplacez le curseur vers la couleur B pour augmenter sa part, puis copiez le résultat en HEX, RGB ou HSL pour le CSS, la documentation ou les design tokens.

Le mélange RGB décrit la façon dont les écrans combinent la lumière. C'est parfait pour le web, mais ce n'est pas la même chose que mélanger des peintures ou des encres : le point médian entre le bleu et le jaune à l'écran ne se comporte pas comme le même mélange de pigments physiques. Pour le design d'interface, le mélange RGB reste pratique, car le navigateur affiche au final des valeurs d'écran. L'aperçu se met à jour instantanément pour que vous puissiez juger le résultat avant de le copier.

Utiliser les ratios en design d'interface

Le ratio contrôle l'équilibre entre les deux couleurs d'entrée. À 0 pour cent, le résultat est la couleur A ; à 100 pour cent, c'est la couleur B. Des valeurs autour de 10 à 25 pour cent sont souvent utiles pour des états hover discrets ou des surfaces teintées, car la couleur d'origine reste dominante. Des valeurs proches de 50 pour cent conviennent mieux aux palettes de transition, aux points médians de dégradés et aux échelles de couleurs de graphiques. Si le résultat paraît terne, augmentez ensuite la saturation en HSL ou choisissez des couleurs de départ plus éloignées.

Copier des tokens de couleur fiables

Une fois un mélange satisfaisant trouvé, copiez le format qui correspond le mieux à votre flux de travail. HEX est compact pour la remise du design, RGB est pratique quand vous avez besoin des valeurs de canaux ou de superpositions alpha, et HSL est plus simple à ajuster en teinte, saturation ou luminosité après le mélange. Comme l'outil fonctionne en local, vous pouvez expérimenter en toute sécurité avec des palettes de marque non publiées ou des couleurs de clients. Testez toujours la couleur finale en contexte, surtout derrière du texte ou à côté de couleurs d'état importantes.