Author: Michal Szymanski
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:
