CSS Colors

CSS Colors

In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

CSS/HTML support 140 standard color names.

CSS Background Color

You can set the background color for HTML elements:

Example

  <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
  ipsum...</p>

CSS Text Color

You can set the color of text:

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.

Example

  <h1 style="color:Tomato;">Hello
  World</h1>
<p style="color:DodgerBlue;">Lorem
  ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
  enim...</p>

CSS Border Color

You can set the color of borders:

Hello World

Example

  <h1 style="border:2px
  solid Tomato;">Hello
  World</h1>
<h1 style="border:2px
  solid DodgerBlue;">Hello
  World</h1>
<h1 style="border:2px
  solid Violet;">Hello
  World</h1>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato":

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

Example

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

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

Note: Learn more about Color Values You will learn more about RGB, HEX and HSL in the next chapters.