Mélangeur de couleurs

Un mélangeur de couleurs mélange deux couleurs dans une nouvelle et vous montre le résultat en HEX, RVB et HSL. Vous lui donnez une première couleur et une deuxième couleur dans n'importe quelle syntaxe commune (un code hexadécimal comme #4466EE, une valeur rgb () ou hsl (), ou un nom CSS comme le corail), choisissez la quantité de la deuxième couleur à replier et il calcule instantanément la couleur mélangée. Il construit également un gradient d'étapes intermédiaires entre les deux couleurs, afin que vous puissiez voir toute la transition plutôt qu'un seul point médian.

Le mélange simple est une moyenne pondérée : à un rapport de 50 pour cent chaque couleur contribue de manière égale, et l'outil interpole chaque canal rouge, vert et bleu linéairement entre les deux entrées Faites glisser le rapport vers 0 et vous gardez la première couleur ; faites-le glisser vers 100 et vous atterrissez sur la seconde C'est le même calcul utilisé par CSS pour un gradient à deux arrêts, c'est pourquoi le point médian d'un gradient rouge à bleu est le violet rapporté par cet outil.

Au-delà d'un simple mélange, le mélangeur offre les modes de mélange séparables définis dans la spécification W3 C Compositing and Blending : multiplier, écran, superposer, assombrir, éclaircir, différence, et moyenne Ce sont les mêmes opérations que les éditeurs d'images comme Photoshop et GIMP appliquent entre les couches Multiplier toujours assombrit (le rouge fois le bleu est noir), l'écran s'éclaircit toujours (le rouge sur le bleu est magenta), et la différence vous donne la distance canal par canal entre deux couleurs Le rapport agit alors comme l'opacité des couches, contrôlant la force avec laquelle le résultat mélangé est appliqué sur la première couleur.

Tout fonctionne côté client dans votre navigateur Les couleurs que vous saisissez ne quittent jamais l'onglet, et comme le calcul des couleurs est l'arithmétique simple, l'outil fonctionne hors ligne une fois la page chargée Les concepteurs recherchent un mélangeur pour trouver une couleur à mi-chemin entre un primaire de marque et un neutre, pour construire des échelles de teinte et d'accent, ou pour prévisualiser comment deux couches se combineront avant de s'engager dans un fichier de conception Les développeurs l'utilisent pour générer des arrêts de gradient, calculer les états de survol et traduire un résultat mixte directement en une valeur HEX ou HSL qu'ils peuvent coller dans CSS.