CSS Colors

Prev
Next

CSS Colors Examples

Title
  • Check the Color radio button and click on the Color Area to choose a color of the Font.
  • For Background Color check the radio button and click on the Color Area to choose a Background color.
  • To change Border Color check radio button and click on the Color Area to choose a Border color.

CSS colors

Using CSS colors, you can set –

  • Color of the text
  • Background Color
  • Border Color around an Element
  • Color of a Link
  • Margin Color
  • Padding Color
  • Color of Button, and
  • Other elements like div, paragraphs etc

In CSS, Color can be set in 7 ways –

  1. color-name – The actual name of the color.
  2. color-code – The Hexadecimal code of the color.
  3. rgb– rgb stands for Red, Green and Blue.
  4. rgba– rgba stands for Red, Green, Blue and Alpha.
  5. hsl– hsl stands for Hue, Saturation and Lightness.(Added as part of CSS3).
  6. hsla– hsla stands for Hue, Saturation, Lightness and Alpha(Added as part of CSS3).
  7. hwb– hwb is the amount of  Hue, Whiteness and Blackness(Added as part of CSS4).

We are going to understand all these types of color values.

CSS Color Names

The CSS color name is the easiest way to set the color of an element.

Example of CSS color names

CSS colors codes

Another way to include colors is by using the hexadecimal value of the color name i.e. CSS Colors Codes.

The Syntax of Hexadecimal Color Code in CSS:
#RRGGBBAA

RR stands for Red, GG stands for Green and BB stands for Blue.

Just Click on the Hex Color Code Palette below and you can select the color and see the hexadecimal color code or vice-versa.

Example of CSS color Codes

Title
format: hex

Note/Info:

1. Web Designers often keep a color code Chart to design a great looking visual website.

2. Transparent color code hex is a little different.
For Example:
a) If it is a web browser, the format is – #RRGGBBAA
    RR stands for Red, GG stands for Green, BB stands for Blue & AA Stands for Alpha.        Alpha controls the amount of Transparency.

b) If it is Android, the format is – #AARRGGBB
    AA stands for Alpha, RR stands for Red, GG stands for Green & BB stands for Blue.

Please continue further to understand about Alpha.

CSS color rgb

CSS color rgb is the amount of Red, Green and Blue color.

The syntax of rgb Color in CSS:
#rgb(RR, GG, BB)

RR stands for the amount of Red, GG stands for the amount of Green and BB stands for the amount of Blue. The value of Red, Blue or Green will always lie between 0 to 255.

Example of CSS color rgb

#white {
  color:rgb(255,255,255);
}
#black {
  color:rgb(0,0,0);
}
Run the Code

CSS colors rgba

CSS color rgba is the amount of Red, Green, Blue & Alpha.

Alpha is the amount of transparency which defines various levels of shades for that particular color.

The syntax of rgba Color in CSS:
rgba(RR, GG, BB, AA)

RR stands for the amount of Red, GG stands for the amount of Green, BB stands for the amount of Blue & AA stands for Alpha.

The value of Alpha lies between 0 to 1.

Just Click On the below rgba color Picker and change the value of RR,GG,BB or AA and see the effect.

In the below rgba color palette, you can –

  • Directly edit any of the value of RR, GG, BB or AA and see the color changes in the palette.
  • Drag the circle on the Color Palette Area to see that the rgba value change.
  • Drag the Circle(at the bottom) from the Transparency Area to see the change in the Alpha Value in rgba.

Example of CSS color rgba

Title
format: rgba

CSS color hsl

The color hsl sets the color of an element on the basis on Hue, Saturation, and Lightness.

  • Hue is the number of Rainbow color values which varies from 0 to 360 in a color wheel.
  • Saturation is the percentage value which is the amount of distance from the middle of the Rainbow color wheel. If saturation is 0%, it’s a complete Gray shade and as it gradually increases, the number of gray shade decreases. If Saturation is 100%, it is the color itself.
  • Lightness(Lighter shade) is the percentage of light or shine. If Lightness has a higher percent then it is closer to white and if Lightness has a lower percent, then it is close to black.

The Syntax of Color hsl in CSS:
hsl: (H, S, L);

Where –

  1. H lies between 0 – 360.
  2. S  is from 0% to 100%
  3. L is from 0% to 100%

Example of CSS color hsl

<p style="color:hsl(0,100%,50%)">hsl value1</p>
<p style="background:hsl(20,40%,60%)">hsl value2</p>
Run the Code

CSS color hsla

The color hsla sets the color of an element on the basis on Hue, Saturation, Lightness & Alpha

  • Alpha is the amount of Transparency with value in the range of 0 to 1.
  • Alpha-0 means totally transparent
  • Alpha-1 means, Totally Non Transparent(opaque)

The syntax of Color hsla in CSS:
hsl: (H, S, L, A);

Where –

  1. H lies between 0 – 360.
  2. S  is from 0% to 100%.
  3. L is from 0% to 100%.
  4. A lies between 0 to 1.

Example

<p style="background:hsla(120,40%,60%,0.5)">hsla value1</p>
<p style="color:hsla(240,70%,50%, 1)">hsla value2</p>
Run the Code
Prev
Next
Youtube Facebook-f Twitter

Tutorials for all brains!