I’ve read a lot about color theoretical methods to pick a harmonic color palette (e.g. for branding), but I always wondered how to pick the corresponding shades and tints (see Google’s material design color palette for example).

Is there a proper way to choose darker and brighter variants of the original colors without loosing color harmony (especially between a original color and a variant of another)?

1 Answer 1


This is exactly what the HSB colour model is for. HSB splits the colour into the values Hue (H), or colour type; Saturation (S), or (inverse) amount of white in the colour; and Brightness (B), (inverse) amount of black.

enter image description here

Hue is expressed in degrees, with 0° being red, and 180° being cyan.

Saturation and Brightness are expressed in precentages. 0% Saturation is just white, no colour, and 100% is no white, just the colour. 0% Brightness is all black and 100% brightness has no black left mixed in.

Any current design program has a colour picker that includes the HSB (or HSV) model. Pick the colour you want alternatives for, and play around with its S and B values. As a rule of thumb, decrease saturation for a lighter variant and decrease brightness for a darker one.

All these variants harmonise with your base colour naturally.

The HSB model is a great base to build entire colour palettes on, using only a few values of H and creating variants of those with S and B. If you use colour theory to choose your base values of H so they harmonise, then their variants created by changing S and B will also harmonise with each other.

  • Thanks for your answer, Vincent! I’m aware of the HSB model and the method you describe. But do the so generated colors also harmonise with other colors from the palette (despite the used base color)?
    – debite
    Commented Jul 29, 2016 at 19:14
  • @lastschrift If you don't change H, any colour you create by changing S and B will harmonise. The science/art behind palette creation is how to choose the right few values of H to work with. Describing how to do that would be too long for this site's format.
    – Vincent
    Commented Aug 1, 2016 at 16:09
  • I know that the generated colors will harmonize with the used base color. I think you didn't get my question right. Let's assume I've already picked corresponding H values (yellow, orange and magenta). Now I want to generate shades and tints of yellow that not only harmonize with the used base color (yellow) but also with the other base colors (orange and magenta).
    – debite
    Commented Aug 1, 2016 at 16:24
  • If you chose your base H values right, the base colours will harmonise. If they do, all their alternatives created with S and B will harmonise among each other.
    – Vincent
    Commented Aug 1, 2016 at 16:35
  • Great, that was my point! Thank you, Vincent.
    – debite
    Commented Aug 1, 2016 at 16:37

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.