Back PJ Onori’s code

Color blending

I’ve never been super into adjusting color through shifting HSL values - let alone RGB. Blending colors the “old fashioned” way has always worked better in my head. This resulted in me overlaying one semi-transparent color over another color and adjusting to get the color I wanted. For example, if I wanted to “cool down” an orange, I would place a blueish color on top of my orange and then spot sample the resulting color. But that process was slow, so I finally took the time to make the process programmatic.

Instructions

  1. Copy the code below into a file on your machine. Let’s name it colors.js
  2. Install Node.js
  3. Edit BACKGROUND_COLOR, FOREGROUND_COLOR and BLEND_AMOUNT to fit your needs
  4. Fire up a Terminal window and cd to the directory where you saved the colors.js file
  5. Run node blend-colors.js in your terminal
  6. Read out the results returned in the terminal
                

// The background base color
const BACKGROUND_COLOR = {r:223, g:80, b:0}

// The foreground blend color
const FOREGROUND_COLOR = {r:0, g:142, b:223}

// The amount the foreground color is blended into the background. Think of this like foreground color opacity
const BLEND_AMOUNT = .3

function blendColors(background, foreground, amount) {
	return {
		r: (foreground.r/255 * amount + background.r/255 * (1 - amount))*255,
		g: (foreground.g/255 * amount + background.g/255 * (1 - amount))*255,
		b: (foreground.b/255 * amount + background.b/255 * (1 - amount))*255
	}
}

console.log(blendColors(BACKGROUND_COLOR, FOREGROUND_COLOR, BLEND_AMOUNT))