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));
}

Now let's add some opacity.

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

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

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.