Alex Eguia's Codeblog

HSL color representation

5 May 2014

Most of us usually use the RGB color model. Its three components indicate, in hexadecimal from 00 to FF, the amount of Red, Green and Blue of a color; but this model can be tricky when it comes to change a color to be more bright, dark, or saturated.

Among the color models that can be used in graphic programs, or even in HTML/CSS, the HSL color representation is one of the most easy to play with. Its components are Hue, Saturation and Lightness:

  • H indicates the Hue, the color itself.
  • S indicates the saturation, i.e. gray, or a powerful color, like background: red, green, or blue.
  • L indicates the lightness, that is, from full black to full white.

This model is graphically represented as a cylinder, where the dimensions are set by the H, S and L values:

The values are ​​given by the following scale:

  • H: 0-360. See the color wheel to know what value matches your color.
  • S: 0-100. 0% is pure grayscale, while 100% is the full-saturated color.
  • L: 0-100. 0% is pure black, 50% the normal color scale as seen in the wheel, and 100% complete white.

With this color model, we can leave the S and L values fixed​​, to play with colors in the same tones. For example, to find a proper background color for a banner, we can desaturate the color a bit and give some lightness, to make it a range of pastel colors that can be adapted to any scenario. With this interactive tool you can change the color leaving the S and L values fixed at 33% and 66% respectively:

Thus, we can set up a template of a main page with a banner on top, with non-obtrusive colors. Here you can play with the HTML, CSS and JS of the template on jsfiddle.net.

Finally, another tool where you can play around with the HSL color model and create beautiful easy-to-change colors for your projects: http://hslpicker.com

Banner sample

Choosing the best color palette for your project

4 Feb 2014

Choosing colors for your project might end in a nightmare, so that’s why there are some palettes around avoiding typical CSS properties like background-color: blue, red or yellow. One of my favorite palettes is the one given in the design guidelines for Android, where standard colors are presented in a not so saturated form, and matches any project perfectly.

You can hover over the color palette to get the RGB hex value:

  • #33B5E5
  • #AA66CC
  • #99CC00
  • #FFBB33
  • #FF4444
  • #0099CC
  • #9933CC
  • #669900
  • #FF8800
  • #CC0000

It’s also known that we can’t mix many colors on screen, or we’ll end up going back to the early 90s. To avoid this, we can use different shades for one color, depending on the element’s position or importance, or simply to create contrast.

  • #E2F4FB
  • #C5EAF8
  • #A8DFF4
  • #8AD5F0
  • #6DCAEC
  • #50C0E9
  • #33B5E5
  • #2CB1E1
  • #24ADDE
  • #1DA9DA
  • #16A5D7
  • #0FA1D3
  • #079DD0
  • #0099CC
  • #F5EAFA
  • #E5CAF2
  • #DDBCEE
  • #D6ADEB
  • #CF9FE7
  • #CB97E5
  • #C58BE2
  • #C182E0
  • #BA75DC
  • #B368D9
  • #AC59D6
  • #A750D3
  • #A041D0
  • #9933CC
  • #F0F8DB
  • #E2F0B6
  • #D3E992
  • #C5E26D
  • #B6DB49
  • #A8D324
  • #99CC00
  • #92C500
  • #8ABD00
  • #83B600
  • #7CAF00
  • #75A800
  • #6DA000
  • #669900
  • #FFF6DF
  • #FFECC0
  • #FFE3A0
  • #FFD980
  • #FFD060
  • #FFC641
  • #FFBD21
  • #FFB61C
  • #FFAE18
  • #FFA713
  • #FFA00E
  • #FF9909
  • #FF9105
  • #FF8A00
  • #FFE4E4
  • #FFCACA
  • #FFAFAF
  • #FF9494
  • #FF7979
  • #FF5F5F
  • #FF4444
  • #F83A3A
  • #F03131
  • #E92727
  • #E21D1D
  • #DB1313
  • #D30A0A
  • #CC0000

Source: Color | Android Developers.