Why I Use RGB Instead of HEX?

Hex, rgb and hsl are just three different ways of defining a color. RGB and HSL has Alpha channel. So you can define opacity without creating new color variable.

Example of Colors #

// HEX
color: #0099ff;
// RGB
color: rgb(0,153,255);
// HSL
color: hsl(204,100%,50%)

Opacity! #

Defining opacity is my main reason to switch RGB from HEX. Let me show with a basic example.

// HEX
--color-primary: 0,153,255;

.element
{
background-color: rgb(var(--color-primary));
}
Hello World!

Now let's add some opacity.

// HEX
--color-primary: 0,153,255;

.element
{
background-color: rgba(var(--color-primary), .5);
}
Hello World!

Pros #

  • Defining only one color variable is enough to control all opacity levels.
  • Can control each parameter (red, green, and blue).
  • Tone selection is easier than hex.

Cons #

  • Hard to read colors.

What About HSL? #

HSL is human friendly version of RGB. I could choose HSL, but I'm okay with RGB for now.

Previous Post

Dead Simple Masonry Layout With CSS Grid

When I renew my website I've made a photo grid in about page. I decided to explain how you can implement same layout on your project.

Read article
Next Post

How to Display Instagram Posts on Your Website?

We're basically fetching (scraping) data from Instagram and insert it into HTML.

Read article