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:
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
.
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:
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. . .
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.
Exemple:
ou utilisez ColorBlender comme mentionné ci-dessus;)