How can I get the color halfway between two colors?

Question

I have two colors:

#15293E #012549 

How can I find a color that is halfway between them? Is there any way to do this calculation?

Answer 1

As Mr. Lister said, it is easy to automate the calculation using any programming language:

• Separate the two colors into their 3 color numbers for Red, Green, Blue : (r1, g1, b1) and (r2, g2, b2).
  
  • For example, # 15293E, # 012549 ("15", "29", "3E"), ("01", "25", "49")
    
    
• Convert each line of color to an integer, indicating explicitly that you are parsing the hexadecimal representation of the number.
  • For example ("15", "29", "3E") becomes (21, 41, 62)
    
    
• Calculate the average value (r ', g', b ') = ((r1 + r2) / 2, (g1 + g2) / 2, (b1 + b2) / 2).
  • For example ((21 + 1) / 2, (41 + 37) / 2, (62 + 73) / 2) = (11, 39, 67)
    
    
• Convert them again to strings, indicating explicitly that you are generating hexadecimal representations, two - digit hexadecimal (if necessary, use zero with zero).
  • For example (11, 39, 67) → ("0B", "27", "43")
    
    
• Concatenate a sharp character followed by 3 lines
  • For example ("0B", "27", "43") → "# 0B2743"
    

Edit: Implementation is not "very simple," as I originally stated. I took the time to write code in several languages in Programming-Idioms .

Answer 2

I use this site to complete this task for me: ColorBlender .

The average color will be #0B2744 .

Answer 3

WITH LESS

If you use the latest LESS CSS preprocessor , then you will notice that there is a function ( mix() ) that does this:

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

Outputs: #0b2744 .

Answer 4

If you need to do this in the general case and expect that the average color will be visually accurate in more cases (that is, the visual color and tone of the midpoint should “look right” for the viewer), then, as suggested above, it can convert from RGB to HSV or HSL before calculating the midpoint, and then convert back. This can vary significantly from the average RGB values.

Here is the javascript code for converting to / from HSL that I found in a quick search, and that with a quick check the right thing appears:

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

Just apply the rgbToHsl function to your two color vectors r, g, b, average the two resulting vectors and apply hslToRgb., To them.

Answer 5

Handy-Dandy Function

 function padToTwo(numberString) { if (numberString.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 

Answer 6

Like this:

 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; }; 

where p is a value from 0 to 1 that determines how far the gradient can go, and the color rgb_beginning is the color and rgb_end is the color. Both arrays are [r, g, b], so you will need to convert from hex first. This is a simplified version of the LESS mix function, which, it seems to me, relates to SASS. For a poster, p will be 0.5

Answer 7

If you so wanted, you could do it yourself using the Windows calculator.

• Open the Windows calculator> View> Programmer
• Select the Hex option
• Enter the value of Hex
• Switch to Dec and write down the indicated value
• Repeat steps 2-4 for the second hexadecimal value
• Calculate the average by adding two Dec numbers and dividing by 2
• Enter this value in the calculator with the Dec option, then switch to the hexadecimal option and voila

Example:

• 15293E (HEX) = 1386814 (DEC)
• 012549 (HEX) = 75081 (DEC)
• Midpoint = (1386814 + 75081) / 2
• Midpoint = 730947 (DEC)
• 730947 (DEC) = 0B2743 (HEX)
• # 0B2743

or use ColorBlender as above;)