HSL Colors in CSS3

From the blog:

HSL Colors

CSS3 adds a new way to define colors for web pages: HSL or Hue Saturation and Lightness (some people say “Luminosity”). While many web designers may be reluctant to use this model, you may discover that it is somewhat easier to use because it is a model based on how we perceive colors. Most people think of colors first by their hue, or the color it most closely resembles, such as red, green or yellow. Then we think about how close to the pure color (say how red it is). This is the saturation. And finally we think about how close to white or black it is. This is the lightness.

In fact, once you understand the color wheel, it can be very easy to guess what a color is going to look like based on the HSL code. But unless you’ve memorized specific color codes in hexadecimal or RGB, most people have to look up what color those codes represent.

Many artists find the HSL model a lot easier to understand than other CSS color models because it describes the color in a similar way to how they describe colors on their palettes. A pure color has a vibrant hue and is fully saturated. Muddy colors are less saturated.
Defining HSL Colors in CSS

To define a color in HSL in your CSS, you define the three values in order:

hsl(hue, saturation%, lightness%);

Read the following pages to learn how to find the hue, saturation and lightness of your colors.

~ by WPA Staff on September 20, 2011.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: