It will help if you have some kind of basic grasp of color harmony and how it can be calculated.
There are many ways to derive a harmonious color scheme from a base color. One of these is monochromatic as you have in your example. The H (hue) value is what we perceive as "color." Perhaps the easiest way to think of it is, it's what is not there in a black-and-white photograph of a leaf. Take away the hue, and you have a grayscale "color." Alter the saturation (purity) by adding or subtracting black or white to any given hue and you will have "different colors" that are variations of the same Hue. Reducing or increasing the Value (lightness or darkness) likewise doesn't change the Hue.
Adobe's Kuler tool will give you a painless introduction to color harmony. Enter your base color (the brand base color) and choose the various options from "Select a rule" to see what the results are. The resulting colors are shown with their hex, hsv (same as hsl), RGB, CMYK and Lab values, and you can work things from there.
As a rough guide:
- Monochromatic color harmony maintains
a constant value in the H and varies
the S and V values.
- Complementary color harmony uses H
values that are about 200 degrees
apart (with variations in S and V as
- Triadic color harmony uses 3 H values
roughly 130 degrees apart (vary S and
V to taste).
- Analogous color harmony uses 3 or
more H values in a range of about 30
degrees plus and minus from your key
All of these are fairly safe to work with if you're not well-versed in color harmony, and pretty easy to plug into SASS, but there's no substitute for (and no harm in) becoming knowledgeable in the subject. Google "Color Wheel" and "Color Harmony" and dig in a bit. GO to your local art store and buy a color wheel, read its instructions, and play with it a bit.