HomeProgramCSS and CSS3

Deeply understand Color in CSS

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

For 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

Deeply understand Color in CSS Picture 1

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

Inside:

  1. Hue is the degree of color in the color circle that ranges from 0 to 360,
    1. 0 is red.
    2. 120 is green.
    3. 240 is blue.
  2. Saturation has a percentage value (%) color intensity, the highest is 100% (full)
  3. 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%);

For 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)

For 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;

For 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

4 ★ | 1 Vote
opacity csstransparency in csscss learningTransparency in cssblur css imagesRGBA csscolor in css

You should read it

May be interested

  • The secret to choosing dyed hair color that matches skin colorThe secret to choosing dyed hair color that matches skin color
    choosing the right hair color for your skin color is quite difficult. however, if you know which hair color is 'standard' for your skin tone, everything will be simple and effective.
  • Color Impact: color scheme helps youColor Impact: color scheme helps you
    there are times when you have difficulty choosing colors for your designs? with color impact, you will create extremely unique and impressive color palettes.
  • Color command in WindowsColor command in Windows
    the color command changes the foreground and background colors in the command prompt window for the current session. if used without parameters, the color command restores the default foreground and background colors of the command prompt window.
  • How to color images in PhotoshopHow to color images in Photoshop
    on photoshop, there is a simple color filler and photo filler tool.
  • How to use screen color filters in Windows 11How to use screen color filters in Windows 11
    similar to older versions of windows, windows 11 also includes built-in color filters, to help people with vision problems or color blindness have a comfortable, full experience. more complete.
  • How to enable Auto Color Management for applications in Windows 11How to enable Auto Color Management for applications in Windows 11
    auto color management is a new windows feature that improves the color quality of digital images and makes them look more natural. it's almost like having an exclusive color specialist in place right at your fingertips.
  • How to Find a Car Color CodeHow to Find a Car Color Code
    you can easily cover scratches or spots on your vehicle by touching them up with your car's original paint color. to match this paint color exactly, look for the color code listed on the vehicle information sticker in your car....
  • HTML color code - color code table in htmlHTML color code - color code table in html
    the color displayed is a combination of 3 colors red, green and blue. below is a table of color codes in html and how to use color codes in html
  • Instructions for installing and playing Color Bump 3D on your computerInstructions for installing and playing Color Bump 3D on your computer
    with instructions to install and play color bump 3d on your computer, your score may be much higher with the phone version because the control is somewhat easier.
  • How to Change Hair Color in GIMPHow to Change Hair Color in GIMP
    changing hair color is relatively simple using the free gnu image manipulation program, or gimp. whether you want to test out a new hair color, change a model's hair color for an add, or you're just messing around with some old photos,...

CSS and CSS3