Comment puis-je obtenir la couleur à mi-chemin entre deux couleurs?

J’ai deux couleurs:

#15293E #012549 

Comment puis-je trouver la couleur à mi-chemin entre eux? Y at-il un moyen de faire ce calcul?

Comme M. Lister vient de le dire, il est facile d’automatiser le calcul avec n’importe quel langage de programmation:

  1. Séparez vos deux couleurs dans leurs 3 numéros de couleur pour le rouge, le vert et le bleu : (r1, g1, b1) et (r2, g2, b2).
    • Par exemple, # 15293E, # 012549 devient (“15”, “29”, “3E”), (“01”, “25”, “49”)
  2. Convertissez chaque chaîne de couleurs en un nombre entier, en spécifiant explicitement que vous parsingz une représentation hexadécimale d’un nombre.
    • Par exemple (“15”, “29”, “3E”) devient (21, 41, 62)
  3. Calculez la moyenne (r ‘, g’, b ‘) = ((r1 + r2) / 2, (g1 + g2) / 2, (b1 + b2) / 2).
    • Par exemple ((21 + 1) / 2, (41 + 37) / 2, (62 + 73) / 2) = (11, 39, 67)
  4. Convertissez-les de nouveau en chaînes, en spécifiant explicitement que vous générez des représentations hexadécimales à deux chiffres (pad avec un zéro si nécessaire).
    • Par exemple (11, 39, 67) -> (“0B”, “27”, “43”)
  5. Concaténer un personnage pointu suivi des 3 cordes
    • Par exemple (“0B”, “27”, “43”) -> “# 0B2743”

Edit: L’ implémentation n’est pas “très facile” comme je l’ai indiqué initialement. J’ai pris le temps d’écrire le code en plusieurs langues sur Programming-Idioms .

J’utilise ce site pour effectuer cette tâche pour moi: ColorBlender .

La couleur moyenne sera #0B2744 .

Avec moins

Si vous utilisez le dernier préprocesseur CSS LESS, vous remarquerez qu’il existe une fonction ( mix() ) qui fait ceci:

 mix(#15293E, #012549, 50%) 

Sorties: #0b2744 .

Si vous avez besoin de le faire de manière générique, et attendez-vous à ce que la couleur du milieu soit plus précise visuellement (la couleur visuelle et le ton du point médian devraient convenir à un spectateur humain). convertir de RVB à HSV ou HSL avant de calculer le point central, puis reconvertir après. Cela peut différer considérablement de la moyenne des valeurs RVB directement.

Voici un code JavaScript pour la conversion vers / depuis HSL que j’ai trouvé lors d’une brève recherche, et que lors d’une vérification brève, il semble faire ce qu’il faut:

https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript. SMS

Appliquez simplement la fonction rgbToHsl à vos deux vecteurs de couleur r, g, b, calculez la moyenne des deux vecteurs résultants et appliquez-y hslToRgb. . .

Fonction Handy-Dandy

 function padToTwo(numberSsortingng) { if (numberSsortingng.length < 2) { numberString = '0' + numberString; } return numberString; } function hexAverage() { var args = Array.prototype.slice.call(arguments); return args.reduce(function (previousValue, currentValue) { return currentValue .replace(/^#/, '') .match(/.{2}/g) .map(function (value, index) { return previousValue[index] + parseInt(value, 16); }); }, [0, 0, 0]) .reduce(function (previousValue, currentValue) { return previousValue + padToTwo(Math.floor(currentValue / args.length).toString(16)); }, '#'); } console.log(hexAverage('#111111', '#333333')); // => #222222 console.log(hexAverage('#111111', '#222222')); // => #191919 console.log(hexAverage('#111111', '#222222', '#333333')); // => #222222 console.log(hexAverage('#000483', '#004B39')); // => #00275e 

Comme ça:

 function colourGradientor(p, rgb_beginning, rgb_end){ var w = p * 2 - 1; var w1 = (w + 1) / 2.0; var w2 = 1 - w1; var rgb = [parseInt(rgb_beginning[0] * w1 + rgb_end[0] * w2), parseInt(rgb_beginning[1] * w1 + rgb_end[1] * w2), parseInt(rgb_beginning[2] * w1 + rgb_end[2] * w2)]; return rgb; }; 

où p est une valeur entre 0 et 1 spécifiant à quelle distance à travers le dégradé la couleur doit être et rgb_beginning est la couleur from et rgb_end est la couleur. Les deux sont des tableaux [r, g, b], vous devrez donc tout d’abord convertir depuis l’hex. Ceci est une version simplifiée de la fonction de mixage de LESS qui, je pense, vient de SASS. Pour l’affiche p serait 0,5

Je viens d’écrire une fonction qui calcule les couleurs entre deux couleurs, donc ici, si quelqu’un en a besoin, je pense que c’est assez court et lisible, il accepte deux couleurs dans les chaînes hexadécimales et le nombre de couleurs à calculer dans un tableau de chaînes hexadécimales

j’ai pris les fonctions rgbToHex et hexToRgb d’ ici

J’espère que cela t’aides!

 function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } function hexToRgb(hex) { var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } // returns an array of startColor, colors between according to steps, and endColor function getRamp(startColor, endColor, steps) { var ramp = []; ramp.push(startColor); var startColorRgb = hexToRgb(startColor); var endColorRgb = hexToRgb(endColor); var rInc = Math.round((endColorRgb.r - startColorRgb.r) / (steps+1)); var gInc = Math.round((endColorRgb.g - startColorRgb.g) / (steps+1)); var bInc = Math.round((endColorRgb.b - startColorRgb.b) / (steps+1)); for (var i = 0; i < steps; i++) { startColorRgb.r += rInc; startColorRgb.g += gInc; startColorRgb.b += bInc; ramp.push(rgbToHex(startColorRgb.r, startColorRgb.g, startColorRgb.b)); } ramp.push(endColor); return ramp; } 

Si vous le souhaitiez, vous pouvez le faire vous-même avec la calculasortingce Windows.

  1. Ouvrez Windows Calculator> Afficher> Programmeur
  2. Choisissez l’option Hex
  3. Entrez la valeur hexadécimale
  4. Passez en déc et notez la valeur donnée
  5. Répétez pour les étapes 2 à 4 pour la deuxième valeur hexadécimale
  6. Calculer la moyenne en ajoutant les deux nombres de déc et en divisant par 2
  7. Entrez cette valeur dans la calculasortingce avec l’option Dec sélectionnée, puis passez à l’option hexadécimale et le tour est joué

Exemple:

  • 15293E (HEX) = 1386814 (DEC)
  • 012549 (HEX) = 75081 (DEC)
  • Point médian = (1386814 + 75081) / 2
  • Point médian = 730947 (DEC)
  • 730947 (DEC) = 0B2743 (HEX)
  • # 0B2743

ou utilisez ColorBlender comme mentionné ci-dessus;)