CSS colors


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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

Color Names



                    <h3 style="background-color:Tomato;">Tomato</h3>
                    <h3 style="background-color:Orange;">Orange</h3>
                    <h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
                    <h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
                    <h3 style="background-color:Gray;">Gray</h3>
                    <h3 style="background-color:SlateBlue;">SlateBlue</h3>
                    <h3 style="background-color:Violet;">Violet</h3>
                    <h3 style="background-color:LightGray;">LightGray</h3>
                
                

Live preview

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray


HEX Value

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

#rrggbb

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

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



                      <h3 style="background-color:#ff0000;">#ff0000</h3>
                      <h3 style="background-color:#0000ff;">#0000ff</h3>
                      <h3 style="background-color:#3cb371;">#3cb371</h3>
                      <h3 style="background-color:#ee82ee;">#ee82ee</h3>
                      <h3 style="background-color:#ffa500;">#ffa500</h3>
                      <h3 style="background-color:#6a5acd;">#6a5acd</h3>
      
                  

Live preview

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:



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

Live preview

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff


Background Color

You can set the background color for HTML elements:


                      <h3 style="background-color:DodgerBlue;">Hello World</h3>
                      <p style="background-color:Tomato;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>
                  

Live preview

Hello World

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?


Text Color

You can set the color of text:


                      <h3 style="color:Tomato;">Hello World</h3>
                      <p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                      <p style="color:MediumSeaGreen;">Ad facilis
                          est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed
                          obcaecati praesentium accusamus? Tempora, dolor a?</p>
                  

Live preview

Hello World

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?


Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.