1 Thing A Week 1 Thing
A Week

HEX, RGB, and HSL colors in CSS

Week 189.0 — 7th June '21

For most of my career in web development, I've been happy using hexadecimal values for colours and rgba values when I've needed transparency.

Below is an example I put together on Codepen of the different values you can use today in most browsers along with some of the lesser known (and supported) values.

In the examples where I've specified opacity, rather than alpha, you can set the opacity of colours which can be really useful in some cases.

The example I've seen recently is with CSS variables where you can set your value as three comma separated values:

--myColor: 123, 123, 123

And then you're free to use it and apply opacity or the alpha value as required:

color: rgba(var(--myColor), 0.5)

This is great for things where setting the opacity itself would cause the entire element to become semi-transparent, rather than just the colour of it. Another great use for this is with CSS gradients:

background-image: linear-gradient(to left, rgb(var(--myColor), rgba(--myColor), 0.5));

When I have some time, I'll convert SkeletonCSS to work this way to bring just that little bit more flexibility to the project.

More from 1 Thing A Week
« I built a simple routing framework for PHP called Wayfinder 5 CodePens that show what can be achieved with just CSS My WWDC 2022 wish list Now that we have container queries, can we get native parallax scrolling please? »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 189.3 – Wednesday
    1. Modern wall clock swiss-miss.com
    2. watchOS 8 brings new access, connectivity, and mindfulness features to Apple Watch apple.com
  2. 189.4 – Thursday
    1. Lego Typewriter   £179.99 lego.com

Jump to notable items for Week #188, Week #190 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit