When you think about it, hexidecimal and rgb are not particularly easy to work with. Remembering that this much RED when combined with that much BLUE makes HOW much PURPLE isn’t especially intiuitive. Doing it in hexidecimal is even more annoying.
A much more human-friendly color model is HSL. And there is also HSLA, for adding alpha (opacity) values to your color.
Think of H, the H in HSL, as an anchor point. To get comfortable with that idea, consult a color wheel…
… remember the following points:
- A circle has 360 degrees.
- Red, Green, and Blue are spaced equally along the circle, in order.
- Therefore, each of the RGB “anchor points” are 120 degrees along the circle.
- Red, the starting point, is 0 degrees (and 360, which is the same thing)
- Green appears at 120 degrees.
- Blue appears at 240 degrees.
Saturation: Richness of Color
The saturation value, which refers to the richness of the color, is specified in percent. This ranges from 100% (full richness) to 0% (fully desaturated). Fully desaturated means that you will have some shade of grey, depending on which HUE and LIGHTNESS value you started with.
Lightness refers to the amount of light in a color. 50% is middle. At 0% lightness, the color will be pure black, regardless of hue. At 100% lightness, the color will be pure white, regardless of hue.
How to Think in HSL
Pick a Hue from 0 to 360 and with saturation at 100 and lighness at 50 and you’ll have the purest form of that color. Reduce the saturation and you move towards gray. Increasing the luminosity moves you towards white, decreasing it moves you towards black.
With a bit of practice, you will find that this color model is very easy to experiment with.
To get the “opposite” (complementary) color, look to the other side of the wheel. In terms of numbers, subtract (or add) 180 degrees.
One way to remember the complementary color relationships is to make up a memorable sentence with words that start with the opposing colors. I use this one:
Buy Your GrandMother a Rum and Coke.
Using that sentence, you can get the opposite colors:
- Since Blue is 240, subtracting 180 = 60 (Yellow)
- Since Green is 120, adding 180 = 300 (Magenta)
- Since Red is 0, adding 180 gives us 180 (Cyan)
Finally, knowing these key points on the color wheel allows us to easily get the analogous colors (the ones beside or between the main colors).
For example, suppose we want to find the HUE value of ORANGE. Orange is made by combing red and yellow.
We know that yellow is the opposite of blue. Since blue is 240 degrees, subtracting 180 give us 60 degrees as the value for yellow.
To get the HUE value of orange, then, we pick a number between 0 (red) and 60 (yellow). The lower the number, the more we are approaching red; the higher the number the more we approach yellow.