Colors in CSS3

CSS color module 3 now has some fun new ways to play with colors:

RGBA

Anything that can have a color can now also be assigned a level of alpha-transparency. The "a" in RGBA is for the alpha, and a value between 0 and 1 is expected. 0 is fully transparent and 1 is fully opaque:

.shape1 {
background-color: rgba(63, 35, 98, 1);
}
.shape2 {
background-color: rgba(63, 35, 98, 0.8);
}
.shape3 {
background-color: rgba(63, 35, 98, 0.6);
}
.shape4 {
background-color: rgba(63, 35, 98, 0.4);
}
.shape5 {
background-color: rgba(63, 35, 98, 0.2);
}

Setting an alpha value on an element is pretty cool because it won’t affect child elements like the opacity attribute does. For example, if you set a div to an opacity of 0.5, everything that’s inside of it will also be 50% transparent, but if you set the background color of the div to an alpha of 0.5, only the background color will be semi-transparent.

HSL and HSLA

HSL stands for Hue-Saturation-Luminosity. Many designers and photographers are already used to setting the values for the hue, saturation and luminosity using a software like photoshop. You won’t be creating any color that you can’t get using the RGB notation, but it’s simply a shortcut if you happen to find it easier to set hue, saturation and luminosity values rather than red, green and blue values. Here’s a great online HSL color picker.

  • Hue: a value in degrees of the color wheel. 0 degrees is red, 120 degrees is green and 240 degrees is blue.
  • Saturation: a % value of the amount of saturation applyied to the base hue, with 100% being the full color. The closer the saturation is to 0%, the closer the color will be to a neutral gray.
  • Luminosity: a % value of the amount of darkness or lightness. Using 0% luminosity will always be black, no matter the hue and saturation, and 100% luminosity will always be white. 50% is the normal midpoint value.

HSLA is like RGBA, but for HSL. Simple as that!

Here are two examples, the first one with varying saturation and the second one with varying luminosity:

.shape1 {
background-color: hsl(43, 100%, 50%);
}
.shape2 {
background-color: hsl(43, 80%, 50%);
}
.shape3 {
background-color: hsl(43, 60%, 50%);
}
.shape4 {
background-color: hsl(43, 40%, 50%);
}
.shape5 {
background-color: hsl(43, 20%, 50%);
}
.shape1 {
background-color: hsl(43, 100%, 10%);
}
.shape2 {
background-color: hsl(43, 100%, 30%);
}
.shape3 {
background-color: hsl(43, 100%, 50%);
}
.shape4 {
background-color: hsl(43, 100%, 70%);
}
.shape5 {
background-color: hsl(43, 100%, 90%);
}

Browser Support

Can I Use css-first-letter? Data on support for the css-first-letter feature across the major browsers from caniuse.com.

currentColor

currentColor is used like a variable and keeps a tab on which color was last used. It can be very useful in reducing the amount of edits you’d have to make to edit an element’s colors:

.pirate {
  color: hsla(310, 100%, 24%, 1);
  border-top: 2px solid currentColor;
}

.pirate p {
  border-right: 5px solid currentColor;
}

Here you can play around with this CodePen example:

See the Pen currentColor by Alex Wolf (@alligatorio) on CodePen.

What’s coming next…

CSS Color Module Level 4, currently in working draft, has even more goodies for colors:

  • The color() function: borrowing the idea from CSS preprocessors like Sass and allowing you to modify the colors that you have defined as variables (yes, it looks like we’ll have variables too with CSS Custom Properties level 1)
  • The hwb() function: Hue-Whiteness-Blackness, yet another way to skin the cat.
  • The gray() function: 50 shades of grey, the CSS way.
  • 4 and 8-digit HEX colors: finally also a way to specify alpha transparency with HEX colors too!
✖ Clear

🕵 Search Results

🔎 Searching...