What gradient colour scheme would work best for the boxes on my website? I have a navy header and grey background, but would like to add a splash of colour. The navy colour is part of our brand so it can't change, along with the grey background. How would I make it work with a set of gradient boxes on the page?

I find using gradients and flat colours very difficult, but I would like to emulate the brilliant colour scheme on this site.



There are no strict rules for color combination more than visual perception. But based on the colors you indicate in the question and some visual rules, we can find a certain formula.

The premises that I would have in consideration are:

  • Try keeping the company color at maximum visual level.

  • The new colors should not overshadow the institutional color. See the question images examples, the Lend and Borrow tags colors totally annul the institutional color. Try covering both tags with the hand and you will see the top blue has a high brightness and saturation. Moving away the hand, the colors below have the same saturation but the gradient gives them more brightness, so the blue loses strength, is a blue Microsoft interface, almost gray.

Seeing the web colors variants, both blue and gray have the same brightness, vary in saturation:

  • Blue: 85% saturation, 90% brightness
  • Grey: 2% saturation, 98% brightness

Keeping the same brightness and choosing an intermediate saturation we get the third blue in the image:

enter image description here

Moving the hue slider with the same saturation and brightness values, those are the resultant colors:

enter image description here

The top navy blue doesn't lose strength despite competing with a variety of colors. Here there's a color set to make gradients. Below some examples, from left to right, using just the colors from the top set, and covering them with the same color shapes with different blends.

enter image description here

|improve this answer|||||
  • Thanks this is a great reply. Really appreciate it! – methuselah May 5 '19 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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