CSS Colors Examples
- 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.
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 –
- color-name – The actual name of the color.
- color-code – The Hexadecimal code of the color.
- rgb– rgb stands for Red, Green and Blue.
- rgba– rgba stands for Red, Green, Blue and Alpha.
- hsl– hsl stands for Hue, Saturation and Lightness.(Added as part of CSS3).
- hsla– hsla stands for Hue, Saturation, Lightness and Alpha(Added as part of CSS3).
- 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:
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
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.
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
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
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.
- If the value of Hue is 0 or 360, the color is Red.
- When hue value is 120, the color is Green.
- If Hue value is 240, the color is Blue.
- When Saturation is 0%, it has full Gray Shade.
- If Lightness is 0%, it is darkest which is black.
- When Lightness is 100%, it is lightest which is white.
The Syntax of Color hsl in CSS:
hsl: (H, S, L);
- H lies between 0 – 360.
- S is from 0% to 100%
- L is from 0% to 100%
Example of CSS color hsl
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);
- H lies between 0 – 360.
- S is from 0% to 100%.
- L is from 0% to 100%.
- A lies between 0 to 1.