#e8456f is the hexadecimal color notation as commonly used in HTML and CSS where each primary (Red, Green, Blue) is represented by the combined value pairs:
- e8 = Red
- 45 = Green
- 6f = Blue
But it also could be represented as rgb(232, 71, 111) or even hsl(345, 78%, 59%). Unless you’re a hexadecimal savant who can ‘see’ the color in your head, you’ll need to plug that value into a design app or code editor to get a visual representation of #e8456f:
What’s the difference?
RGB is an additive color model, where red, green and blue light are added together to reproduce a lot of other colors (16+ million). That’s considerably more color value than most of us can remember, but it’s not a problem for machines. And there’s the rub: Hexadecimal notation isn’t a naming convention for humans, it’s a naming convention for machines.
rgb(232, 71, 111) is similar to hexadecimal notation, in that each value represents the amount of red, green or blue light in the color, from 0–255:
- 232 = Red
- 71 = Green
- 111 = Blue
This notation is somewhat more intuitive, because now we see that the predominant color in our sample above is red, as it is closest to 255.
Wouldn’t it be wonderful to have a more human-friendly way to name colors?
Happily, there is. And I’m not talking about the existing 140 named colors. I’m talking about HSL colors where values of the color are described as:
- Hue: the ‘color’ of the color, ie: yellow vs. red. This value corresponds to the color’s position on the color wheel, from 0–360º where red = 0/360º, yellow = 60º, and blue = 270º. This is passed as a unitless integer.
- Saturation: how pure or vivid the color is. This value is represented by a percent between 0–100%, where 0 = neutral gray (0% of the color), and 100% is the pure/fully saturated color.
- Lightness: the lightness or darkness of the color. This value spans from pure black (darkest) to pure white (lightest). This value is written as a percent: 0–49% means you’re adding black to the color (or creating a shade in color theory); 51–100% means you’re adding white to the color (or creating a tint in color theory); and 50% is the purest form of the color, neither shade nor tint.
Remember how our machine-friendly #e8456f color is interpreted?
- e8 = Red
- 45 = Green
- 6f = Blue
Let’s look at the human-friendly version of same color as hsl(345, 78%, 59%):
- Hue, 345 = a color clearly in the red zone between magenta (300) and red (0/360)
- Saturation, 78% = a pretty well saturated reddish hue
- Lightness, 59% = a wee bit of white added to the hue, making it a tint
Now it’s possible to know that the color is in the red family, isn’t fully saturated, and is a slight tint. That’s great! Far more intuitive than e8 red.
Color Power
Now that your color notation is human-friendly, the real power is how you can adjust the values in code – quickly and consistently. Want a darker version of your button for a :hover state? Simply decrease the lightness value by 10%. Now you’ve got hsl(345, 78%, 49%).
Want a border element that’s brighter than your color? Increase the saturation: hsl(345, 90%, 59%).
Want the exact color complement of your color for a little visual energy? Fire up your calculator and do some math: 345 - 180 [½ a circle] = 165. Complementary Hue is hsl(165, 78%, 59%).
Additionally, hsl can include an alpha channel so you can manipulate transparency. It follows the same syntax as rgba where 1 = fully opaque and 0 = fully transparent, as represented by a decimal. So hsla(345, 78%, 59%, .25) is our color (but see-through) at 25% opacity.
Code is beautiful. Human-friendly code is beautiful and smells sweet, too.
Color Playground Resources:
DockYard is a digital product agency offering exceptional user experience, design, full stack engineering, web app development, mobile development, custom software, Ember, Elixir, and Phoenix services, consulting, and training. With a nationwide staff, we’ve got consultants in key markets across the United States, including San Francisco, San Diego, Phoenix, Detroit, Pittsburgh, Baltimore, and New York.
