stephen koch

software engineer

Color Mixer

https://color-mixer.koch.dev

There are times when a new color is added to a project. Often this happens when we need to take a base color and "mix" it to get a new shade.

I've seen this happen a number of times and you might not even notice it. There is what looks like the standard orange you are used to but it's slightly lighter. So let's check to make sure. Ah, there's ... a new color on top of that which has some opacity and ... the result that we see is a completely new color.

But what's the hex value of that mixture? Let's say we have our orange as #ff4f00 and we want to see it as a lighter shade. So we can put another color block on top of it, say, #ffd700 but at 25% opacity.

international orange

... mixed with ...

Yellow at 50% opacity

How can you get the resulting hex when you add the overlay color?

Color mixer to the rescue! https://color-mixer.koch.dev/ff4f00/ffd700/50

The resulting mixed color

Usage

Clicking the top or bottom color value will open a color picker. The top is your base color and the bottom is the color you will be "mixing" in which, of course, has opacity.

The URL will update accordingly where the format is "hex/hex/opacity".

Have fun out there!