HTML HEX Colors
A hexadecimal color is written as #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal numbers that set the strength of each color component.
HEX Color Values
A HEX color has the form #rrggbb, where rr, gg, and bb are hexadecimal values from 00 to ff (the same as 0 to 255 in decimal).
For example, #ff0000 is red, because red is at its highest (ff) and the others are 00. #00ff00 is green for the same reason. Set all to 00 for black, and all to ff for white.
Example
Six colors set with HEX values.
Prompt
A page showing six colored blocks, each background set with a HEX value: #ff0000, #0000ff, #3cb371, #ee82ee, #ffa500, and #6a5acd, each labeled with its value.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex Colors</title>
</head>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>
Shades of Gray
Shades of gray are made by using the same value for all three components.
Example
Six shades of gray made with equal HEX components.
Prompt
A page showing six shades of gray as blocks using HEX values with equal components: #404040, #686868, #a0a0a0, #bebebe, #dcdcdc, and #f8f8f8.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Shades</title>
</head>
<body>
<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>
</body>
</html>