Je passe une quantité surprenante de ma journée quelque part entre un fichier de conception et une feuille de style, poussant une couleur vers une autre jusqu'à ce qu'un état de vol stationnaire, une bordure ou un arrêt de gradient semble correct. Pendant des années, j'ai fait l'arithmétique dans ma tête ou je l'ai fait dans un cueilleur, ce qui est bien jusqu'à ce que vous ayez besoin de la couleur exacte à mi-chemin entre un bleu de marque et un neutre chaud et que vous en ayez besoin comme code hexadécimal que vous pouvez coller. J'ai donc construit un mixeur couleur sur Toolz.dev cela mélange deux couleurs avec un rapport que vous contrôlez, offre les mêmes modes de mélange qu'un éditeur d'images et vous transmet le résultat en HEX, RVB et HSL. Ceci est le guide et ce que " ; mélange de couleurs et de quotas ; signifie sur un écran.
tl;dr : Un mélangeur de couleurs mélange deux couleurs en une seule. Le Toolz mixeur couleur interpole deux couleurs avec un rapport réglable, prend en charge les modes de mélange séparables W3 C (multiplier, écran, superposer, assombrir, éclaircir, différence, moyenne), crée un gradient d'étapes intermédiaires entre les couleurs et génère chaque résultat sous forme de HEX, RVB et HSL. Il accepte les noms de couleurs hex, rgb (), hsl () et CSS, et s'exécute entièrement côté client.
Comment mélangez-vous deux couleurs sur un écran ?
La réponse simple est une moyenne pondérée des deux couleurs' ; canaux rouge, vert, et bleu Pour mélanger le rouge (255, 0, 0) et bleu (0, 0, 255) à parts égales, vous faites la moyenne de chaque canal : le rouge devient (255+0)/2 = 128, les séjours verts 0, le bleu devient (0+255)/2 = 128, donnant (128, 0, 128)[TRADUCTION], qui est le hex #800080[TRADUCTION], un violet uni Déplacez le poids d'un côté et vous glissez le long de la ligne entre les deux couleurs C'est exactement ce que fait le curseur à rapport : à 0 pour cent, vous gardez la première couleur, à 100 pour cent vous atterrissez sur la seconde, et à 50 pour cent, c'est la répartition paire.
Il s'agit de la même interpolation qu'utilise un gradient CSS à deux arrêts, c'est pourquoi le point médian de linear-gradient(red, blue) est-ce que le violet Le mixeur rend la relation explicite en dessinant également le dégradé entre vos deux couleurs comme une bande de swatches, chacun de ceux-ci que vous pouvez copier comme un arrêt intermédiaire Si vous avez déjà voulu " ; trois couleurs uniformément espacées entre ces deux," ; la bande de dégradé est le moyen le plus rapide de les obtenir.
Une mise en garde honnête, car cela surprend les gens : la moyenne des canaux RVB n'est pas la façon dont les pigments se mélangent Sur un écran, les couleurs sont légères et se combinent de manière additive ; dans un ensemble de peinture, elles sont pigmentaires et se combinent de manière soustractive Mélangeant les tendances de la lumière rouge et verte vers une olive terne plutôt que le jaune vif que vous obtiendriez de la peinture, parce que vous faites la moyenne des valeurs de lumière, ne mélangez pas de pigment Ce n'est pas un bug dans l'outil, c'est la nature du sRGB, et la solution lorsque vous voulez un résultat plus vivant est de mélanger les teintes qui se rapprochent sur la roue convertisseur couleur est pratique à côté du mixeur lorsque vous souhaitez voir la même couleur exprimée dans tous les formats pendant que vous raisonnez sur la teinte.
Quelle est la différence entre les modes Mix et blend ?
Le mix est la moyenne pondérée décrite ci-dessus : il atterrit toujours quelque part sur la ligne droite entre les deux couleurs. Les modes de mixage sont tout autre chose. Ce sont les opérations de mixage de couches des éditeurs d'images, standardisées pour le Web dans le Compositting et mélange W3C niveau 1 spécification, et chacun combine les canaux avec une formule différente plutôt qu'une simple moyenne.
| mode | Formule par canal (valeurs 0 à 1) | Effet |
|---|---|---|
| Mélanger | b (pondéré par rapport) |
Moyenne pondérée, atterrit entre les deux couleurs |
| Multiplier | a x b |
Toujours plus foncé ; le blanc laisse une couleur inchangée, le noir force le noir |
| Écran | a + b - a x b |
Toujours plus léger ; l'inverse de multiplier |
| Surcouche | multiplier ou filtrer par base | Augmente le contraste |
| S'assombrir | min(a, b) |
Garde le canal le plus sombre |
| Alléger | max(a, b) |
Garde le canal plus léger |
| Différence | abs(a - b) |
Distance du canal ; les couleurs identiques donnent le noir |
| Moyenne | (a + b) / 2 |
La moyenne non pondérée des deux |
L'intuition qui vaut la peine d'être transportée : la multiplication s'assombrit toujours car multiplier deux fractions donne une fraction plus petite, donc le rouge fois le bleu est noir (chaque couleur manque le canal que l'autre a).L'écran s'éclaircit toujours car il est appliqué en multiplication aux valeurs inversées La différence vous donne la distance canal par canal, c'est pourquoi mélanger une couleur avec elle-même sous différence produit du noir pur Dans le mélangeur, le curseur de rapport se comporte alors comme une opacité de couche : il estompe le résultat mélangé sur la première couleur, de sorte que vous pouvez composer l'effet de subtil à plein.
Que contrôle le curseur de rapport ?
Le ratio définit la force avec laquelle la deuxième couleur, ou le résultat mélangé du mode choisi, est appliqué sur la première couleur Pensez-y comme une opacité sur la couche supérieure À 0 pour cent, la couche supérieure est invisible et vous voyez la première couleur intacte À 100 pour cent, la couche supérieure est entièrement opaque et vous obtenez le mélange complet pour ce mode À 50 pour cent, vous obtenez une répartition égale Pour le mélange simple, cela se réduit à la moyenne pondérée familière ; pour un mode comme Multiplier, cela vous permet d'appliquer un assombrissement doux plutôt que l'effet complet.
Ce modèle unifié est délibéré, car cela signifie qu'un curseur fait le même travail conceptuel dans tous les modes En pratique, j'utilise des ratios faibles pour pousser légèrement une couleur vers une autre (un état de survol qui est " ; le bouton, mais 15 pour cent vers black" ;) et des ratios élevés lorsque je veux le mélange complet Le générateur gradient reprend là où le mixeur s'arrête lorsque vous souhaitez transformer une paire de couleurs mélangées en un dégradé CSS multi-stop complet.
Comment obtenir la couleur exacte à mi-chemin entre deux couleurs ?
Définissez le mode sur Mix et le rapport sur 50, et le résultat est le point médian exact Vous pouvez également le lire directement sur la bande de dégradé : l'échantillon central est la couleur à mi-chemin Lorsque vous avez besoin de plusieurs couleurs régulièrement espacées entre deux points finaux, augmentez le nombre de pas de dégradé et copiez les échantillons aux positions souhaitées. C'est la tâche quotidienne pour laquelle le mélangeur a été construit, que vous généraiez des teintes pour une palette, que vous espaciez les couleurs de visualisation des données ou que vous trouviez le neutre situé entre deux couleurs de marque.
Pour construire des familles entières d'une seule couleur plutôt que d'en mélanger deux, le générateur de nuances de couleurs est le meilleur ajustement, puisqu'il mélange une couleur vers le blanc, le noir et le gris pour produire des teintes, des nuances et des tons. Et lorsque vous choisissez des couleurs pour le texte ou l'interface utilisateur, exécutez le résultat à travers le sélecteur de couleurs et une vérification du contraste, car une couleur qui se mélange magnifiquement peut toujours échouer à un seuil de lisibilité Le flux de travail plus large, du picking au check en passant par l'expédition, est présenté dans le Boîte à outils pour les développeurs Web guide.
Pourquoi mes couleurs mélangées ont-elles parfois l'air boueuses ou foncées ?
Deux choses provoquent cela, et les deux concernent l'espace colorimétrique plutôt que l'outil La première est le décalage additif contre soustractif déjà mentionné : la moyenne des teintes lointaines dans les dérives RVB vers le gris, donc les couleurs opposées sur le mélange de roues vers quelque chose de terne La seconde est que les valeurs sRVB sont codées gamma, pas la lumière linéaire Une vraie moyenne physique de la lumière serait d'abord convertie en espace linéaire, moyenne, puis reconvertie, ce qui maintient les points médians plus brillants La plupart des outils, les gradients CSS et les éditeurs d'images interpolent directement dans le sRGB codé gamma parce qu'il est rapide, prévisible et correspond à ce que les concepteurs attendent d'un gradient, donc ce mélangeur plus proche fait de même. Si vous voulez un mélange plus proche, un espace. outils en ligne de confidentialité des données guide explique pourquoi, à mi-chemin boueux ou non, faire ces calculs dans votre navigateur plutôt que sur un serveur est la bonne valeur par défaut pour le travail de conception que vous préféreriez garder local.
Questions fréquentes
Comment mélangez-vous deux couleurs ?
Pour mélanger deux couleurs, vous faites la moyenne de leurs canaux rouge, vert et bleu, pondérés par la quantité de chaque couleur que vous souhaitez Un mélange 50/50 de rouge (255, 0, 0) et bleu (0, 0, 255) est en moyenne de (128, 0, 128), qui est violet Cet outil fait cette interpolation pour vous et vous permet de déplacer le poids avec le curseur de rapport, afin que vous puissiez atterrir n'importe où entre les deux couleurs au lieu du seul point médian exact.
Quelle est la différence entre Mix et Multiply ?
Mix est une moyenne pondérée qui se situe entre les deux couleurs, donc mélanger le rouge et le bleu donne le violet Multipliez-les comme le font les filtres à encre ou à lumière qui se chevauchent, multipliant les valeurs du canal, de sorte qu'il produit toujours une couleur aussi sombre ou plus foncée que les deux entrées Multiplier le rouge et le bleu donne le noir, car chaque couleur manque le canal dont dispose l'autre Multipliez est un mode de mélange issu de l'édition d'image, pas une simple moyenne.
Pourquoi le mélange de deux couleurs vives donne-t-il parfois un résultat boueux ?
Parce que la moyenne des canaux RVB déplace le résultat vers le gris chaque fois que les deux couleurs sont éloignées l'une de l'autre sur la roue chromatique Le rouge et le vert sont en moyenne d'un brun olive terne plutôt que d'un jaune vif, puisque les couleurs de l'écran se mélangent comme de la lumière tandis que le jaune vif auquel on peut s'attendre vient du mélange des pigments Pour un mélange plus vivant, mélangez les couleurs qui sont plus proches en teinte, ou essayez le mode Écran, qui maintient les résultats plus lumineux.
Puis-je mélanger les couleurs en HSL au lieu de RVB ?
Ce mélangeur interpole en RVB, ce que font par défaut les gradients CSS et les éditeurs d'images, et il rapporte également le résultat en HSL. Le mélange en RVB est prévisible et correspond à la façon dont un gradient CSS à deux arrêts La teinte d'interpolation en HSL peut parcourir le long chemin autour de la roue chromatique et produire des teintes inattendues entre les deux, c'est pourquoi l'interpolation RVB est la valeur par défaut la plus sûre pour un mélange à usage général.
Que change le curseur de rapport ?
Le rapport définit la force avec laquelle la deuxième couleur, ou le résultat mélangé, est appliqué sur la première. À 0 pour cent, vous obtenez la première couleur inchangée, à 100 pour cent, vous obtenez la deuxième couleur complète ou le mélange complet pour le mode choisi, et à 50 pour cent, vous obtenez une répartition uniforme. Pour les modes de mélange, il se comporte comme une opacité de couche dans un éditeur d'images, faisant disparaître la couleur mélangée sur la base.
Comment obtenir la couleur à mi-chemin entre deux couleurs ?
Réglez le mode sur Mix et le rapport sur 50 pour cent, et le résultat est le point médian exact Vous pouvez également le lire sur la bande de dégradé, où l'échantillon du milieu est la couleur à mi-chemin Pour un contrôle plus fin, ajoutez plus d'étapes au dégradé et copiez quel que soit l'échantillon intermédiaire correspondant à la position dont vous avez besoin entre les deux couleurs.
À quoi servent les modes de mélange comme Écran et superposition ?
Ce sont les modes de mélange de couches des éditeurs d'images, définis pour le web dans la spécification W3 C Compositing and Blending L'écran s'éclaircit et est utilisé pour les lueurs et les reflets, Multiply s'assombrit et est utilisé pour les ombres et les teintes, et Overlay augmente le contraste en les combinant dans un mélangeur vous permet de prédire comment deux couches colorées se combineront avant de l'appliquer dans CSS ou un outil de conception.
Quels formats de couleurs le mixeur accepte-t-il ?
Le mélangeur accepte les codes hexadécimaux (trois, six ou huit chiffres), les valeurs rgb () et rgba (), les valeurs hsl () et hsla () et les noms de couleurs CSS courants comme corail ou rebeccapurple Chaque entrée a un échantillon de couleur natif que vous pouvez cliquer pour choisir visuellement, et chaque résultat est affiché dans HEX, RVB et HSL afin que vous puissiez copier le format dont votre feuille de style a besoin.
Le mixeur couleur est-il gratuit et privé ?
Oui. Le mixeur de couleurs est entièrement gratuit sans inscription, sans filigrane et sans limite d'utilisation, et chaque calcul se produit dans votre navigateur. Les couleurs que vous saisissez ne sont jamais téléchargées, donc rien de ce que vous mélangez ne quitte votre appareil, et comme les calculs s'exécutent localement, l'outil continue de fonctionner si vous perdez votre connexion une fois la page chargée.
