CSS Colors CSS | Course

Colors are specified using RGB, HEX, HSL, RGBA, HSLA and predefined color names.

You can specify a color in HTML by using a color name:

<!DOCTYPE html>
<html>
<body>
<h4 style="background-color:Tomato;">Tomato</h4>
<h4 style="background-color:Orange;">Orange</h4>
<h4 style="background-color:DodgerBlue;">DodgerBlue</h4>
<h4 style="background-color:MediumSeaGreen;">MediumSeaGreen</h4>
<h4 style="background-color:Gray;">Gray</h4>
<h4 style="background-color:SlateBlue;">SlateBlue</h4>
<h4 style="background-color:Violet;">Violet</h4>
<h4 style="background-color:LightGray;">LightGray</h4>
</body>
</html>

Output

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 color names by default.

For HTML elements, you can set the background color:

Example

<!DOCTYPE html>
<html>
<body>

<h4 style="background-color:AliceBlue;">Hello World</h4>

<p style="background-color:orange;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

Output

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

You can set the text color:

Example

<!DOCTYPE html>
<html>
<body>

<h4 style="color:Orange;">Hello World</h4>

<p style="color:Blue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:Green;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Output

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

You can set the borders color:

Example

<!DOCTYPE html>
<html>
<body>

<h4 style="border: 2px solid Orange;">Hello World</h4>

<h4 style="border: 2px solid Blue;">Hello World</h4>

<h4 style="border: 2px solid Violet;">Hello World</h4>

</body>
</html>

Output

Hello World

In HTML, the values of RGB, HEX, HSL, RGBA, and HSLA can also be used to specify colors:

Example

<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>

<h4 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h4>
<h4 style="background-color:#ff6347;">#ff6347</h4>
<h4 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h4>

<p>Same as color name "Tomato", but 50% transparent:</p>

<h4 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h4>
<h4 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h4>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

Output

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

Use this formula to specify a color as a RGB value in HTML:

rgb(red, green, blue)

The intensity of the color between 0 and 255 is defined by each parameter (red, green, and blue).

For example, rgb(255, 0, 0) is shown as red, because red is set to its highest value (255) and the rest is set to 0.

All color parameters must be set to 0 to display the color black, such as: rgb(0, 0, 0).

All color parameters must be set to 255 to display the color white, such as: rgb(255, 255, 255).

Example

<!DOCTYPE html>
<html>
<body>
<h4 style="background-color:rgb(255, 0, 0);color: white;">rgb(255, 0, 0)</h4>
<h4 style="background-color:rgb(0, 0, 255);color: white;">rgb(0, 0, 255)</h4>
<h4 style="background-color:rgb(60, 179, 113);color: white;">rgb(60, 179, 113)</h4>
<h4 style="background-color:rgb(238, 130, 238);color: white;">rgb(238, 130, 238)</h4>
<h4 style="background-color:rgb(255, 165, 0);color: white;">rgb(255, 165, 0)</h4>
<h4 style="background-color:rgb(106, 90, 205);color: white;">rgb(106, 90, 205)</h4>

<p>In HTML, you can specify colors using RGB values.</p>

</body>
</html>

Output

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

In HTML, you can specify colors using RGB values.

For all 3 light sources, shades of gray are often described using equal values:

Example

<!DOCTYPE html>
<html>
<body>

<h4 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h4>
<h4 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h4>
<h4 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h4>
<h4 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h4>
<h4 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h4>
<h4 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h4>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>
 
</body>
</html>

Output

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

By using equal values for red, green, and blue, you will get different shades of gray.

In HTML, in the form of a hexadecimal value, a color can be specified:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values from 00 to ff (same as 0-255).

For example, #ff0000 is displayed as red because red is set to its highest (ff) value, while the others are set to the lowest (00) value.

Example

<!DOCTYPE html>
<html>
<body>
 
<h4 style="background-color:#ff0000;">#ff0000</h4>
<h4 style="background-color:#0000ff;">#0000ff</h4>
<h4 style="background-color:#3cb371;">#3cb371</h4>
<h4 style="background-color:#ee82ee;">#ee82ee</h4>
<h4 style="background-color:#ffa500;">#ffa500</h4>
<h4 style="background-color:#6a5acd;">#6a5acd</h4>

<p>In HTML, you can specify colors using Hex values.</p>

</body> 
</html>

Output

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

In HTML, you can specify colors using Hex values.

For all 3 light sources, shades of gray are often described using equal values:

Example

<!DOCTYPE html>
<html>
<body>

<h4 style="background-color:#000000;">#000000</h4>
<h4 style="background-color:#3c3c3c;">#3c3c3c</h4>
<h4 style="background-color:#787878;">#787878</h4>
<h4 style="background-color:#b4b4b4;">#b4b4b4</h4>
<h4 style="background-color:#f0f0f0;">#f0f0f0</h4>
<h4 style="background-color:#ffffff;">#ffffff</h4>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>
</html>

Output

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

By using equal values for red, green, and blue, you will get different shades of gray.

In HTML, a color can be specified in the form of hue, saturation and lightness (HSL):

hsl(hue, saturation, lightness)

Hue is a color wheel degree from 0 to 360. 0 is red, 120 is yellow and 240 is blue.

Saturation is a percentage value, 0% is a shade of gray, and 100 percent is the complete color.

Lightness is also a percentage, 0% is black, 50% is neither light nor dark, 100% is white.

CSS Colors

CSS Colors

Color Names

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Background Color

Hello World

Text Color

Hello World

Border Color

Hello World

Hello World

Hello World

Color Values

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

RGB Value

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

Hex Value

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

HSL Value

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Course Reviews