: How to convert shades of one colour (red) into seemingly equal shades of another colour (blue)? A site template I'm using has the following colour palette. I would like to use similar shades,

@Sent7350415

Do it by eye or measure luminosity.

Two colors can have the same measured brightness but one can still look brighter than the other. This isn't your eyes playing tricks on you. It's a real, measured effect called luminosity or luminance. This is the L in Lab color.

For example, pure yellow (#ff0) looks brighter than pure magenta (#f0f). They have the same brightness or lightness but have different luminosities – yellow is L98 and magenta is L60 as measured in Photoshop*.

Luminosity values are based on the human eye (measurements were taken) so feel free to use your own eye to make sure it looks right even if the brightness values aren't the same.

Most color pickers don't measure luminosity, but your eyes can see it. So trust your eyes.

* in sRGB for those that care about this sort of thing.

Vote Up Vote Down

@Kevin459

It's a simple task with hslpicker.com.

Simply go to hslpicker.com/[hex code with hashtag] and drag the Hue slider to blue. The hex code in blue is at the bottom left. If you want the hue to be the exact same for all (which I assume you would want), change the HSVA hue in the bottom right to a pre-decided number for all of them.

Vote Up Vote Down

@Karen819

Very easy.

Open any graphics editor (or, really, any program with a good colour picker). Input the colour you have and change the picker mode to HSV. Now grab the hue control and move it to the blue range. Change to hex mode again and read the new value.

Some browsers will accept color: hsl(h, %, %) ( h= 0-360)

It's possible to do the math with a pencil, I've never tried.

Vote Up Vote Down