Blend colors between values

Blend colors between values

blend multiple colors
color blender tool
color blending chart
color palette
color generator
color mixer machine
color mixer rgb
color mixer game

I am trying to create like a time countdown using canvas arc, the drawing is ok, but the arc will have a stroke color, which I want to sort of blend.

The way I draw the arc is by using a number between 0 to 100, 100 is basically the full arc, 0 is nothing. When the value is over 66 and under (or equal to) 100 it'll be a blend between green and orange, 100 is total green and 66 is total orange. 65 and down will be a mix between orange and red, where total red is 0.

I am clueless on where to start, no ideas on what to search for to do research on how to get the values.

Can anybody please point me in the right direction?

Here's my code so far x)

static color (value)
{
    const StartColor  = 0x66BB6A; // Green
    const MiddleColor = 0xFFA726; // Orange
    const EndColor    = 0xEF5350; // Red  
}

EDIT: This is the result I was looking for. It's now working exactly like I want it to. Cheers.

https://youtu.be/IeR_zMzSaAU


Of course, using a library dedicated to this will be easier. But just in case anyone is interested in doing the math, you can break the hex integers into components and then interpolate each component separately to get the color at a specific place:

// break hex integer into components:
const getComonents = (color) => Array.from({length: 3}, (_, i) => Math.floor(color / 16 ** (2 * i) % 16 ** 2))

// interpolate arrays by component
const interpolate = (arr1, arr2, percent) => arr1.map((v, index) => Math.floor(v + (arr2[index] - v) * (percent / 100)))

function colors(value) {
  const StartColor  = 0x11FF11; // Green
  const MiddleColor = 0xFFA726; // Orange
  const EndColor    = 0xEF5350; // Red
  
  let [start, end, v] = value < 50 
      ? [StartColor, MiddleColor, value * 2 ] 
      : [MiddleColor, EndColor, (value - 50) * 2]

  let interpoled = interpolate(getComonents(start), getComonents(end), v)
  
  return interpoled.reduce((n, component, index) => n + component * (16 ** (index * 2)), 0)
}

const canvas = document.getElementById('the_canvas')
const ctx = canvas.getContext('2d')

for (let i = 0; i<100; i++){
  ctx.beginPath();
  
  // padStart is needed to make sure a value of `ff` becomes `0000ff`
  ctx.fillStyle = "#" + colors(i).toString(16).padStart(6, '0')
  ctx.rect(i*5, 0, i*5+5, 300);
  ctx.fill()
}
<canvas id="the_canvas" width="500" height="300"></canvas>

Blend colors between values, When the value is over 66 and under (or equal to) 100 it'll be a blend between green and orange, 100 is total green and 66 is total orange. 65 and down will be a mix between orange and red, where total red is 0. The way I draw the arc is by using a number between 0 to 100, 100 is basically the full arc, 0 is nothing. When the value is over 66 and under (or equal to) 100 it'll be a blend between green and orange, 100 is total green and 66 is total orange. 65 and down will be a mix between orange and red, where total red is 0.


Here is a quick fiddle I made.

var c = document.getElementById("foo");
var i = 0;
var timer = setInterval(function() {

    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, (i / 100) * Math.PI);
    ctx.strokeStyle = 'RGB('+((100-i)*2)+', '+i+', 0)';
    ctx.stroke();

    if((i / 100) == 2) {
        clearInterval(timer);
        console.log('FULL');
    }
    i++;
}, 100);

How to Blend Two or More Paint Colors, Blend[{col1, col2}, x] gives a color obtained by blending a fraction 1 - x of color col1 and x of color col2. blends pixel values of 2D or 3D images imagei. Normal blend mode. This is the standard blend mode which uses the top layer alone, without mixing its colors with the layer beneath it: [example needed] (,) =where a is the value of a color channel in the underlying layer, and b is that of the corresponding channel of the upper layer.


Note: This answer is a late and big edit from the original one. After a first attempt were I missunderstood the OP intentions, the OP added a link with an example, since then I had the intention to provide a solution since I wasn't satisfied with the current answers and the exercice was fun to build.


The breakdown of the answer goes into two main parts:

  1. Blend the colors (there are already answers that tackle this, using a library or create a method to interpolate/blend the color hex value)
  2. Draw an arc and use the blended color

/*
 * blending colors 
 * (borrowed and modified from @mark-meyer answer)
 */

// break hex integer into components:
const getComponents = (color) => Array.from({length: 3}, (_, i) => Math.floor(color / 16 ** (2 * i) % 16 ** 2))

// interpolate arrays by component
const interpolate = (arr1, arr2, percent) => arr1.map((v, index) => Math.floor(v + (arr2[index] - v) * (percent / 100)))

const colorBlend = value => {
  const StartColor  = 0x11FF11; // Green
  const MiddleColor = 0xFFA726; // Orange
  const EndColor    = 0xEF5350; // Red
  
  let [start, end, v] = value < 50 
      ? [StartColor, MiddleColor, value * 2 ] 
      : [MiddleColor, EndColor, (value - 50) * 2]

  let interpoled = interpolate(getComponents(start), getComponents(end), v)
  
  const color = interpoled
  .reduce((n, component, index) => n + component * (16 ** (index * 2)), 0)
  .toString(16).padStart(6, '0')
  return `#${color}`
}

/*
 * draw an arc
 */
const canvas = document.getElementById('canvas1')
const ctx = canvas.getContext('2d')
const size = 30
let p = 0

const grad = ctx.createLinearGradient(size, size, size * 2, size * 2)
grad.addColorStop(0, "#66BB6A")
grad.addColorStop(0.5, "#FFA726")
grad.addColorStop(1, "#EF5350")

ctx.lineWidth = 6

const draw = () => {
  p += 0.01
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.strokeStyle = colorBlend(p * 50)
  ctx.beginPath()
  ctx.arc(size * 1.5, size * 1.5, size, 1.5 * Math.PI, (1.5 + p) * Math.PI)
  ctx.stroke()
  if (p < 2) {
    window.requestAnimationFrame(draw);
  }
}

window.requestAnimationFrame(draw);
<canvas id="canvas1" width="500" height="500"></canvas>

What Is Blending in Painting and Drawing?, How to blend the index value between two (or more) colors using a custom script​? Use the colorBlend method: colorBlend(inputValue, indexArray,  The Darken Blending Mode looks at the luminance values in each of the RGB channels and selects either the base color or blend color depending on which is darker. Simply put, this Blending Mode does not blend pixels, it only compares the base and blend colors, and it keeps the darkest of the two.


4 Ways to Make Red, In fact, they're modified so darker values are stored with more correct blending, you will notice a difference between Photoshop and other  To blend colors with a gamma value of 1, choose File > Project Settings and select Blend Colors Using 1.0 Gamma. Deselect this option to blend colors in the working color space for the project. (See Linearize working space and enable linear blending.) Blending modes for multiple masks on a single layer are called mask modes.


Blend—Wolfram Language Documentation, Returns a single rgb color interpolation between given rgb color // based on This will generate the blend which you can then transform to When you interpolate colors in sRGB you have to consider that the RGB values are  There are two ways to create a blend object out of the available shapes. In the first method, take the Blend Tool (W) and then consistently click on the edges of the shapes. In the second method, select both shapes, then go to Object > Blend > Make (Cmd / Ctrl + Option / Alt + B).


How to blend the index value between two (or more) colors using a , Their hue is halfway between the two primary colors that were used to mix them. On the color is a tint of red. To make a color darker in value, black is added. Use a blend in Illustrator in either RGB or CMYK: create 2 shapes each with the start and end color (one gray and one black in this example, but choose whatever you need) go to Object → Blend → Blend Options and type in how many Specified steps you need in between (20 in my example below) select your two objects and choose Object → Blend → Make.


How To Make Photoshop Blend Colours Correctly, When you change a layer's blend mode to Color, only the color (that is, all of the hues and their saturation values) from the layer is blended in with the layer or  If you want to blend colours in a way that looks more natural to the human eye, you should consider working in a different colour space to RGB, such as L*a*b*, HSL, HSB. There a great code project article on colour spaceswith examples in C#.