CSS colors

Author: MDBootstrap

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
MDBootstrap