A site template I'm using has the following colour palette.

Swatch of red colours for a website colour scheme

I would like to use similar shades, but with navy blue. I will be using #003A70 as a substitute for #A13736, so ideally the rest of the colours would be normalized around that.

The solution does not need to be exact, but I am looking for a method to get something similar / an approximation.

How can I find seemingly equal shades of these colours in blue instead?

  • @Scott I'm very new to design, but the first thing I naively tried was setting the R=0 in the RGB values of all the above colors, but that gave me greenish colors.
    – jaynp
    Jan 11, 2015 at 4:50

3 Answers 3


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.


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.

  • 1
    i signed up just to up vote your answer :) thank you.
    – Bobby Axe
    Dec 13, 2019 at 14:42
  • Thank you so much. You know, I was recently banned from answering on Stack Overflow because my answers were downvoted so much. So this means a lot to me.
    – Matt F.
    Dec 26, 2019 at 4:07

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.