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.

La bande dégradée sert également de tableau de mixage couleur Entrez les numéros 1FF0000 et 10000 FF, réglez les pas de dégradé sur 3 et appuyez sur Mix Colors : la bande affiche cinq échantillons, #FF0000, #BF0040, #800080, #4000BF et #0000FF, et le résultat mélangé à un rapport de 50 % est #800080. En tant que mélangeur de couleurs primaires, il mélange la lumière, pas la peinture. Le rouge et le jaune donnent le numéro orange 8000, mais le bleu et le jaune donnent le gris #80000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

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 six modes de mélange séparables définis dans la spécification W3 C Compositing and Blending (multiplier, écran, superposer, assombrir, éclaircir et différence) plus une moyenne simple Ce sont les mêmes opérations que les éditeurs d'images comme Photoshop et GIMP appliquent entre les couches Multiplier toujours s'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 une opacité de couche, 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.