Dofactory.com
Login Sign up
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS Colors

CSS can assign colors to an element's background, border, text, and other parts.

Color values are specified as HEX, RGB, HSL, RGBA, HSLA, or Color Names.

Color Names

One way to assign CSS colors is with Color Names (white, purple, teal, etc.).

Not all colors have a corresponding color name.

For a list of color names, check our CSS Colors Names Tutorial.

Different color names applied to six elements.

Firebrick
Chocolate
Orangered
Darkkhaki
Seagreen
Teal

<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color:firebrick;">Firebrick</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:chocolate;">Chocolate</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:orangered;">Orangered</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color:darkkhaki;">Darkkhaki</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:seagreen;">Seagreen</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:teal;">Teal</div>
  </div>
</div>

Color Values

Color values can also be expressed as RGB, HEX, and HSL.

This example shows 4 different color formats, all setting the same color.

Name: Tomato

RGB: rgb(255, 99, 71)

HEX: #ff6347

HSL: hsl(9.13, 100%, 63.92%) 

<style>
  .myp {
    color: #fff;
    padding: 10px;
  }
</style>

<p class="myp" style="background-color: tomato;">
  Name: Tomato
</p>

<p class="myp" style="background-color: rgb(255, 99, 71);">
  RGB: rgb(255, 99, 71)
</p>

<p class="myp" style="background-color: #ff6347;">
  HEX: #ff6347
</p>

<p class="myp" style="background-color: hsl(9.13, 100%, 63.92%); ">
  HSL: hsl(9.13, 100%, 63.92%)
</p>

Two additional formats that add transparency are RGBA and HSLA.
This example adds 50% transparency to the background rgb and hsl values.

RGBA: rgb(255, 99, 71 ,0.5)

HSLA: hsl(9.13, 100%, 63.92%, 0.5) 

<style>
  .myp {
    color: #fff;
    padding: 10px;
  }
</style>

<p class="myp" style="background-color: rgb(255, 99, 71 ,0.7);">
  RGBA: rgb(255, 99, 71 ,0.5)
</p>

<p class="myp" style="background-color: hsl(9.13, 100%, 63.92%, 0.7);">
  HSLA: hsl(9.13, 100%, 63.92%, 0.5)
</p>

RGB Values

RGB stands for red, green, and blue.

RGB color values are expressed in this format: rgb(red, green, blue).

Each parameter (red, green, and blue) sets the color intensity between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the other parameters are set to 0.

Different RGB values applied to six elements.

rgb(178, 34, 34)
rgb(210, 105, 30)
rgb(255, 69, 0)
rgb(189, 183, 107)
rgb(46, 139, 87)
rgb(0, 128, 128)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(178, 34, 34);">rgb(178, 34, 34)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(210, 105, 30);">rgb(210, 105, 30)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(255, 69, 0);">rgb(255, 69, 0)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(189, 183, 107);">rgb(189, 183, 107)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(46, 139, 87);">rgb(46, 139, 87)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(0, 128, 128);">rgb(0, 128, 128)</div>
  </div>
</div>

With RGB, shades of gray are defined with equal values for each of the 3 parameters, like so.

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(180, 180, 180)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(0, 0, 0) ;">rgb(0, 0, 0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(60, 60, 60) ;">rgb(60, 60, 60)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(120, 120, 120) ;">rgb(180, 180, 180)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(180, 180, 180) ;">rgb(180, 180, 180)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(240, 240, 240) ; color: #000">rgb(240, 240, 240)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(255, 255, 255) ; color: #000">rgb(255, 255, 255)</div>
  </div>
</div>

HEX Values

HEX stands for hexadecimal.

HEX color values are specified in this format: #rrggbb.

Parameters rr (red), gg (green), and bb(blue) are hex values between 00 (0) and ff (255).

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

Different HEX values applied to six elements.

#b22222
#d2691e
#ff4500
#bdb76b
#2e8b57
#008080
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: #b22222;">#b22222</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #d2691e;">#d2691e</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #ff4500;">#ff4500</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: #bdb76b;">#bdb76b</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #2e8b57;">#2e8b57</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #008080;">#008080</div>
  </div>
</div>

With HEX, shades of gray are defined using equal values for each of the 3 light sources, like so.

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:#000000 ;">#000000</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#3c3c3c ;">#3c3c3c</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#787878 ;">#787878</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:#b4b4b4 ;">#b4b4b4</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#f0f0f0 ; color: #000">#f0f0f0</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#ffffff ; color: #000">#ffffff</div>
  </div>
</div>

HSL Values

HSL stands for hue, saturation, and lightness (HSL).

HSL color values are specified as hsl(hue, saturation, lightness).

Hue is a 0-360 degree on the color wheel: 0 is red, 120 is green, 240 is blue.

Saturation is a % value: 0% is no color (i.e. gray), and 100% is full color.

Lightness is also a % value: 0% is black, 100% is white.

Different HSL values applied to six elements.

hsl(0, 68%, 42%)
hsl(25, 75%, 47%)
hsl(16, 100%, 50%)
hsl(56, 38%, 58%)
hsl(146, 50%, 36%)
hsl(180, 100%, 25%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(0, 68%, 42%);">hsl(0, 68%, 42%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(25, 75%, 47%)">hsl(25, 75%, 47%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(16, 100%, 50%);">hsl(16, 100%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(56, 38%, 58%);">hsl(56, 38%, 58%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(146, 50%, 36%);">hsl(146, 50%, 36%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(180, 100%, 25%);">hsl(180, 100%, 25%)</div>
  </div>
</div>

Saturation in HSL

#

Saturation represents the color intensity.

100% displays pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray and you can no longer see the color.

Different HSL saturation levels applied to six elements.

hsl(7, 100%, 50%)
hsl(7, 80%, 50%)
hsl(7, 60%, 50%)
hsl(7, 40%, 50%)
hsl(7, 20%, 50%)
hsl(7, 0%, 50%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 100%, 62%) ;">hsl(7, 100%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 80%, 50%) ;">hsl(7, 80%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 60%, 50%) ;">hsl(7, 60%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 40%, 50%) ;">hsl(7, 40%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 20%, 50%) ;">hsl(7, 20%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 0%, 50%) ;">hsl(7, 0%, 50%)</div>
  </div>
</div>

Lightness in HSL

#

The color lightness describes the amount of light the color will use.

0% means no light (black).

50% means medium lightness (neither dark nor light).

100% means full lightness (white).

Different HSL lightness levels applied to six elements.

hsl(7, 89%, 0%)
hsl(7, 89%, 25%)
hsl(7, 89%, 50%)
hsl(7, 89%, 75%)
hsl(7, 89%, 90%)
hsl(7, 89%, 100%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 0%) ;">hsl(7, 89%, 0%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 25%) ;">hsl(7, 89%, 25%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 50%) ;">hsl(7, 89%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 75%) ;">hsl(7, 89%, 75%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 90%) ; color: black">hsl(7, 89%, 90%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 100%) ; color: black">hsl(7, 89%, 100%)</div>
  </div>
</div>

Shades of gray are often defined in HSL by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades:

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 0%) ;">hsl(0, 0%, 0%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 24%) ;">hsl(0, 0%, 24%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 47%) ;">hsl(0, 0%, 47%)</div>
  </div>
</div>
<div class="row" style=line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 94%) ; color: #000">hsl(0, 0%, 94%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 100%) ; color: #000">hsl(0, 0%, 100%)</div>
  </div>
</div>

RGBA Values

RGBA color values are an extension of RGB color values with an alpha channel.

An RGBA color value is specified with rgba(red, green, blue, alpha).

The alpha channel specifies the opacity or transparency of the color.

Alpha is a number between 0.0 (fully transparent) and 1.0 (opaque).

Different RGBA values applied to six elements.

rgba(244, 93, 72, 0)
rgba(244, 93, 72, 0.2)
rgba(244, 93, 72, 0.4)
rgba(244, 93, 72, 0.6)
rgba(244, 93, 72, 0.8)
rgba(244, 93, 72, 1)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0) ;color: #000">rgba(244, 93, 72, 0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.2) ;color: #000">rgba(244, 93, 72, 0.2)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.4) ;">rgba(244, 93, 72, 0.4)</div>
  </div>
</div>
<div class="row " style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.6) ;">rgba(244, 93, 72, 0.6)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.8) ;">rgba(244, 93, 72, 0.8)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 1) ;">rgba(244, 93, 72, 1)</div>
  </div>
</div>

HSLA Values

HSLA color values are an extension of HSL color values with an alpha channel.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha).

The alpha channel specifies the opacity or transparency of the color.

Alpha is a number between 0.0 (fully transparent) and 1.0 (opaque).

Different HSLA values applied to six elements.

hsla(7, 89%, 62%,0)
hsla(7, 89%, 62%,0.2)
hsla(7, 89%, 62%,0.4)
hsla(7, 89%, 62%,0.6)
hsla(7, 89%, 62%,0.8)
hsla(7, 89%, 62%,1)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0) ;color: #000">hsla(7, 89%, 62%,0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.2) ;color: #000">hsla(7, 89%, 62%,0.2)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.4) ;">hsla(7, 89%, 62%,0.4)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.6) ;">hsla(7, 89%, 62%,0.6)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.8) ;">hsla(7, 89%, 62%,0.8)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 1) ;">hsla(7, 89%, 62%,1)</div>
  </div>
</div>

Background Color

CSS can set an element's background color.
Use the background or background-color property to specify a color.

An element with a custom background color.

An element with a background color 
<style>
  .bg-tomato {
    background-color: tomato;
    padding: 15px;
    color: white;
  }
</style>

<div class="bg-tomato">
  An element with a background color
</div>

Text Color

CSS can also set text color.
Using the color property, a text color can be assigned.

An element with a custom text color.

A paragraph with a text color 

<p style="color: red;">
  A paragraph with a text color
</p>

Border Color

CSS can also assign border colors.
Use the border or border-color property to assign a color.

An element with a custom border color.

An element with a custom border color 
<style>
  .border-red {
    border: 2px solid red;
    padding: 20px;
  }
</style>

<div class="border-red">
  An element with a custom border color
</div>

Did you know?

Did you know?

Customizing the text underline color

By default, the underline is the same as the text color.

Using the text-decoration-color, a custom underline color can be assigned.

Text with a customized red underline.

Text with a red underline. 
<style>
  .underline-red {
    text-decoration: underline;
    text-decoration-color: red;
  }
</style>

<div class="underline-red">
  Text with a red underline.
</div>

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Feedback
Guides


On this page