HEX Value
A hexadecimal (hex) color is written as #rrggbb.
Here rr (red), gg (green), and bb (blue) are hex values between 00 and ff, which is the same range as 0 to 255 in decimal.
For example, #ff0000 is red, because red is at its highest (ff) and the others are at the lowest (00). Use #000000 for black and #ffffff for white.
HEX colors
Six colors written as 6-digit hex values.
Prompt
An HTML page showing several colors written as 6-digit hex values.
Make six headings with background colors: #ff0000, #0000ff, #3cb371, #ee82ee, #ffa500, and #6a5acd. Label each with its hex value.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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 when the red, green, and blue pairs are equal.
Prompt
An HTML page showing shades of gray made with equal hex pairs for red, green, and blue.
Make six headings with background colors: #3c3c3c, #616161, #787878, #b4b4b4, #f0f0f0, and #f9f9f9. Label each.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#616161;">#616161</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#f9f9f9;">#f9f9f9</h1>
</body>
</html>
3 Digit HEX Value
Sometimes you will see a 3-digit hex code, written as #rgb. It is a shorthand for some 6-digit codes.
It can only be used when both digits of each pair are the same. So #ff00cc can be shortened to #f0c.
Example
Each 3-digit code stands for its matching 6-digit code.
Prompt
An HTML page that uses 3-digit hex shorthand in an internal style block.
Set the body background to #fc9 (same as #ffcc99), the
<h1> color to #f0f (same as #ff00ff), and the <p> color to #b58 (same as #bb5588). Add a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #fc9; /* same as #ffcc99 */
}
h1 {
color: #f0f; /* same as #ff00ff */
}
p {
color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This paragraph uses a 3-digit hex color.</p>
</body>
</html>