Clear, practical technology insights BSOD Code Lookup · Windows Error Code Lookup · Wi-Fi Troubleshooting · PC Troubleshooting Checklist
TipsMake

Color Format in CSS: Deeply Understand Color in CSS

Understand Color Format in CSS: Deeply Understand Color in CSS with clear explanations, practical examples, and useful tips. This updated guide covers the...

Table of Contents

Color Format in CSS: Deeply Understand Color in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

CSS supports up to 140 colors with unique names and lots of colors under the values of HEX, RGB, RGBA, HSL, HSLA.

The last color lesson in CSS introduced you to the basics of color. To learn more about some of the additional properties that make colors more diverse, please continue to follow the advanced section of Color through this article.

RGBA Color

RGBA color is an extension of the RGB color value with the addition of an opacity index that regulates the opacity / transparency of colors.

The syntax for this type of color is rgba (red, green, blue, alpha), where alpha is an opacity index with a value between 0.0 and 1.0, the smaller the value, the more transparency.

rgba (88,37,123, 0.1);
rgba (88,37,123, 0.2);
rgba (88,37,123, 0.3);
rgba (88,37,123, 0.4);
rgba (88,37,123, 0.5);
rgba (88,37,123, 0.6);
rgba (88,37,123, 0.7);
rgba (88,37,123, 0.8);
rgba (88,37,123, 0.9);
rgba (88,37,123, 1,0);

As an example,: Try changing the values in RGBA style with some colors according to the CSS code below:

Color format with RGBA value

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Results:

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

HSL Color

Color Format in CSS: Deeply Understand Color in CSS example image 1

HSL is the initial letter of Hue, Saturation and Lightness , its symbol is hsl (hue, saturation, lightness).

Inside:

  • Hue is the degree of color in the color circle that ranges from 0 to 360,
    • 0 is red.
    • 120 is green.
    • 240 is blue.
  • Saturation has a percentage value (%) color intensity, the highest is 100% (full)
  • Lightness also has a percentage value, which is the brightness of color by percentage, 0% is dark and 100% white.
hsl (300, 100%, 10%);
hsl (300, 100%, 20%);
hsl (300, 100%, 30%);
hsl (300, 100%, 40%);
hsl (300, 100%, 50%);
hsl (300, 100%, 60%);
hsl (300, 100%, 70%);
hsl (300, 100%, 80%);
hsl (300, 100%, 90%);
hsl (300, 100%, 100%);

As an example,: Try changing the values in the HSL style with some colors according to the CSS code below:

Color format with HSL value

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Results:

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

HSLA Color

HSLA Color is an extension of the HSL color value with the addition of an opacity index that regulates the opacity / transparency of colors.

The syntax of this type of color is hsla (hue, saturation, lightness, alpha) , in which alpha is an opacity index with a value of 0.0 - 1.0, the smaller the value, the more transparency.

hsla (300, 100%, 10%, 0.7);
hsla (300, 100%, 20% 0.7);
hsla (300, 100%, 30% 0.7);
hsla (300, 100%, 40% 0.7);
hsla (300, 100%, 50% 0.7);
hsla (300, 100%, 60% 0.7);
hsla (300, 100%, 70% 0.7);
hsla (300, 100%, 80% 0.7);
hsla (300, 100%, 90% 0.7);
hsla (300, 100%, 100% 0.7);

(Compare with HSL's upper analog palette to see the difference)

As an example,: Try changing the HSLA values with some colors according to the CSS code below:

Color format with HSLA value

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Results:

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Opacity properties

Opacity determines the opacity and transparency of an element.

This attribute can get values from 0.0 to 1.0, the smaller the value, the more transparency.

However, the disadvantage of using opacity to add opacity to the background of an element is that all of the inner elements will inherit the opacity of the same element (including the text). This makes the text inside the element with high opacity difficult to read:

rgb (88,37,123); opacity: 0.2;
rgb (88,37,123); opacity: 0.4;
rgb (88,37,123); opacity: 0.6;
rgb (88,37,123); opacity: 0.8;
rgb (88,37,123); opacity: 1.0;

As an example,: Try changing the opacity attribute values with some colors according to the CSS code below:

Format colors with Opacity attribute values

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Results:

Crimson

Gold

LightSalmon

SeaGreen

MidnightBlue

Indigo

Previous post: Multiple Background in CSS

Next lesson: Color transition effect (Gradient) in CSS

FAQ

What should you know about rGBA Color?

RGBA color is an extension of the RGB color value with the addition of an opacity index that regulates the opacity / transparency of colors.

What should you know about hSLA Color?

HSLA Color is an extension of the HSL color value with the addition of an opacity index that regulates the opacity / transparency of colors.

What should you know about opacity properties?

Opacity determines the opacity and transparency of an element.

Discussion

Reader Comments 0

Sign in with email or Google to join the discussion.

Color Theory and Color Wheel: A Practical GuideColor Theory and Color Wheel: A Practical Guide12 minutes readThe Terminology of Color, Wheel Color and Skill Used to ColorThe Terminology of Color, Wheel Color and Skill Used to Color12 minutes readWhat Is Color Profile: What Is the Profile Color?What Is Color Profile: What Is the Profile Color?5 minutes readCSS Color Coding, Standard Color Code in Website DesignCSS Color Coding, Standard Color Code in Website Design14 minutes readStandard Color Encoding for Programmers and DesignersStandard Color Encoding for Programmers and Designers6 minutes read4 Software to Help Get Professional Color Codes: Color-Coding Tool4 Software to Help Get Professional Color Codes: Color-Coding Tool5 minutes read