CSS Color

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning

Overview

Colors play an important role in the look and feel of the webpage. CSS provides various colors in different formats and one can use the color values to set the color of an element or the background color. The colors of the HTML elements can be changed using the color property of CSS. This property is used to set the color of the text of an element or its background color.

CSS Color

There are various properties in CSS to set and change the color of the elements. These properties have various values to set the color through CSS. You can specify the color values in various formats, some of the examples of the available formats are given below:

FormatSyntaxExample
Keywordfuchsia, lime, etc.h1 { color: lime; }
RGB %rgb(rrr%, ggg%, bbb%)h1 { color: rgb(30%, 30%, 30%); }
RGB Absolutergb(rrr, ggg, bbb)h1 { color: rgb(0, 255, 255); }
Hex code#RRGGBBh1 { color: #0000FF; }
Short Hex code#RGBh1 { color: #00F; }
HSLhsl(hue value, saturation %, lightness%)h1 { color: hsl(120, 50%, 25%); }

Types of CSS color values

There are various color values in CSS through which you can specify the color to your HTML elements. These values are in different formats, which are explained below.

CSS RGB Colors

RGB is a combination of three colors i.e. Red, Green, Blue. RGB color values are supported in all the browsers. An RGB color value is specified with : rgb(red, green, blue). The range of these three colors is defined from 0 to 255 and it defines the intensity of the color. The colors can be changed by changing these values.

RGB colors have 2 different types namely:

  • RGB value
  • RGBA value

RGB Value
As discussed above, the RGB value is the combination of Red, Green, and Blue colors. The numbers in the RGB value indicate the intensities of the color and you can change the color by changing the intensities. Let's take an example where the RGB color format is used.

Example:

RGBA value
The RGBA value consists of those three colors and a value called as Alpha. The Alpha value is used to express the opacity of the color. The opacity property is used to set the transparency of the color and its range lies between 0.0 - 1.0, where 0.0 represents fully transparent while 1.0 represents fully opaque.

Example:

CSS HEX Colors

The colors in CSS can be specified in Hexadecimal values also. A hexadecimal color is a 6 digit representation of the color. This is the another way to represent the colors in CSS. The hexadecimal colors are specified with a HEX value that is explained below.

HEX Value
As mentioned above, the HEX value is a combination of 6 digits. The notation of the HEX value starts with the "#" symbol followed by the six characters within the range of 0 to F.

Example:

3 digit HEX value
The shorthand property to specify the HEX color format is 3 digit HEX value. Nearly all modern browsers support shorthand HEX value. As you saw in the HEX value, there are 6 characters. If there are two identical characters, you can abbreviate each color channel using one character instead of two identical characters.

Example:

CSS HSL Colors

HSL value
HSL is the short form of Hue, Saturation and Lightness respectively. This is the another format using which you can specify the colors to any of the HTML elements. The HSL representation allows you to select a base hue, and then adjust its saturation and lightness as desired. The syntax of looks like below:

  • Hue: The Hue component is the first value that represents an angle of the color circle. This is the value of the actual pure color, such as green, blue, yellow, red, and so on, as represented on the below color wheel. The values are written in degrees or without just the values without the degree, for example, 0 is red, 240 is blue, and so on. Color Wheel

  • Saturation: The second value i.e. Saturation is expressed as a percentage value and it is specified as intensity of the color. 100% is the pure color which means no shades of gray. 50% means 50% is gray but the actual color is still visible with the gray effect. 0% is completely gray i.e. actual color is not visible.

  • Lightness: The third value i.e. Lightness is also expressed as a percentage value. It represents how much light you want to give to the color. 100% means full lightness(white), 50% means neither dark nor light, 0% means no light(black).

Example

Output: Output of HSL code

  • Shades of Gray: As discussed above in the lightness section, you can get pure white or pure black color while specifying the 0% and 100% value to the lightness respectively. Similarly, you can obtain shades of gray by setting the hue and saturation to 0 and adjust the lightness from 0-100% according to the gray level you need.

Example:

Output:

Output of shades of grey

HSLA Value

HSLA value is the extension of the HSL method. Here, A means an Alpha channel that represents the opacity of the color. Opacity specifies in a decimal value, where 1 represents complete opaqueness and 0 means fully transparent.

CSS Color Names

All the modern browsers support 140 different color names. There are various color names in CSS which you can directly use while specifying the color to an element. Some of the color names that are common are mentioned below with their HEX code.

Color nameHEX valueColor nameHex value
Red#FF0000Salmon#FA8072
DarkRed#8B0000DarkSalmon#E9967A
HotPink#FF69B4LightSalmon#FFA07A
Tomato#FF6347Crimson#DC143C
OrangeRed#FF4500FireBrick#B22222
Orange#FFA500Pink#FFC0CB
Yellow#FFFF00DeepPink#FF1493
Lavender#E6E6FACoral#FF7F50
Violet#EE82EEDarkOrange#FF8C00
Magenta#FF00FFGold#FFD700
BlueViolet#8A2BE2LightYellow#FFFFE0
Purple#800080PapayaWhip#FFEFD5
Lime#00FF00PeachPuff#FFDAB9
Green#008000Khaki#F0E68C
Plum#DDA0DDOrchid#DA70D6
MediumPurple#9370DBRebeccaPurple#663399
DarkOrchid#9932CCDarkSlateBlue#483D8B
MediumSlateBlue#7B68EEChartreuse#7FFF00
LawnGreen#7CFC00LightGreen#90EE90
MediumSpringGreen#00FA9ASeaGreen#2E8B57
DarkSeaGreen#8FBC8BLightSeaGreen#20B2AA
DarkCyan#008B8BTeal#008080
PaleTurquoise#AFEEEEAquamarine#7FFFD4
DarkTurquoise#00CED1CadetBlue#5F9EA0
SteelBlue#4682B4PowderBlue#B0E0E6
LightSkyBlue#87CEFADeepSkyBlue#00BFFF
DodgerBlue#1E90FFCornflowerBlue#6495ED
Tan#D2B48CRosyBrown#BC8F8F
DarkGoldenRod#B8860BPeru#CD853F
Ivory#FFFFF0AntiqueWhite#FAEBD7
YellowGreen#9ACD32WhiteSmoke#F5F5F5
Thistle#D8BFD8SteelBlue#4682B4
SpringGreen#00FF7FSnow#FFFAFA
Sienna#A0522DSeaShell#FFF5EE
SandyBrown#FA8072SaddleBrown#8B4513
RosyBrown#BC8F8FPlum#DDA0DD
PeachPuff#FFDAB9PaleTurquoise#AFEEEE
PaleGoldenRod#EEE8AAOldlace#FDF5E6
MistyRose#FFE4E1Honeydew#F0FFF0

CSS Background Color

The background-color sets the background color of the element. The background color of the element is the total size of the element including the padding and the border but not the margin. The syntax of the background color is: background-color: value;

The value of the background color with the syntax and an example is shown below:

ValueSyntaxExample
Keyword valuebackground-color: keyword;background-color: red;
RGBbackground-color: rgb();background-color: rgb(255, 0, 0);
RGBAbackground-color: rgba();background-color: rgba(115, 180, 210, 0.5);
Hexadecimal valuebackground-color: #------;``background-color: 00ff00;
HSL valuebackground-color: hsl()background-color: hsl(100, 33%, 50%);
HSLA valuebackground-color: hsla()background-color: hsla(100, 33%, 50%, 0.75);
Special Keywordbackground-color: keyword;background-color: transparent or currentcolor;
Global valuesbackground-color: global valuesbackground-color: unset or revert or initial or inherit

CSS Text Color

The color property in CSS is used to set or change the color of the text in HTML pages. The value of the color property with an example is shown below:

ValueSyntaxExample
Keyword valuecolor: keyword;color: currentcolor;
Named color valuecolor: valuecolor: red
RGBcolor: rgb();color: rgb(200, 150, 150);
RGBAcolor: rgba();color: rgba(200, 150, 150, 0.5);
Hexadecimal valuecolor: #------;color: 00ff00;
HSL valuecolor: hsl()color: hsl(150, 100%, 50%);
HSLA valuecolor: hsla()color: hsla(150, 100%, 50%, 0.75);
Global valuesbackground-color: global valuesbackground-color: unset or revert or initial or inherit

CSS Border Color

The border-color is the CSS property used to apply color to the border of the elements. The property border-color is the shorthand property of border-top-color, border-right-color, border-bottom-color, border-left-color.

The border-color property can be specified in many ways and they are listed below:

  • When one value is specified, the border-color property applies the same color to all the four sides.
  • When two values are specified, the first color is applied to the top & bottom border, the second color is applied to the left & right border.
  • When three values are specified, the first color is applied to the top border, the second color is applied to the left & right border, and the third color to the bottom border.
  • When four values are specified, the colors are applied to top, right, bottom, left in the order.

The value of the border-color property can be in any of the formats, for example, RGB value, HSL value, HEX value, etc.

Example:

The border examples given in the above code snippet looks like:

 Output CSS Border Color

How to Pick CSS Colors

There are various online Color picker tools available through which you can pick the color of your choice and apply it to your HTML elements. Some of the online color picker tools are mentioned below.

Where to Use Color in CSS rules?

If the CSS property accepts the color as a value then you can apply color to that property. To style the text in HTML, you can use color, text-decoration-color, etc. If you want to apply the color to the background, then use background or background-color and the value will be a color and it can be in any format that is discussed in the previous sections.

To apply color to the border property, use border-color and any of the color format that is mentioned above. box-shadow property in CSS also uses the color as a value.

Summary

  • The color plays an important role in the look and structure of the webpage and there are many ways to define a color to a particular element via CSS.
  • CSS colors can be used in different formats like RGB, HSL, HEX, Color names, etc.
  • HSL means Hue, Saturation, Lightness. This color format is used to specify the exact shade of a color with utmost precision.
  • HEX values start with "#" symbol and contain characters from 0 to F.
  • There are various tools available to pick the colors and some of them are mentioned above.
  • There are various CSS properties like background-color, border-color, etc. that require color as a value and color can be in any of the above mentioned formats.