HTML Colors

Color is the fastest way to give a page personality, and HTML offers several ways to define it. The simplest is a color name like red or blue. There are over a hundred named colors, from coral to midnightblue, and you can type them anywhere a color is expected.

Names run out quickly, so CSS also accepts hex codes. A hex code is a hash sign followed by six characters that mix red, green, and blue, two characters each. The code #2563eb is a specific blue. Design tools let you pick a color visually and copy its hex code, which is how most people get them.

The third common format is RGB, which writes the same three amounts as numbers from 0 to 255. All three formats set the same properties, so the choice is mostly habit. Hex codes dominate the web, and color pickers hand them to you, so expect to type a lot of hash signs.

Reading a hex code

A hex code follows the pattern hash, then six characters: two for red, two for green, two for blue. The characters run from 0 to 9 and a to f, where 00 means none and ff means full. Pure red is #ff0000, pure green is #00ff00, and pure blue is #0000ff.

<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>

Where colors apply

Colors attach to the same places in every format. The color property changes the text, background-color fills the area behind it, and border-color outlines elements. Whichever format you pick, keep enough contrast between text and background, because low contrast is the most common readability mistake.

<p style="color: #2563eb;">Blue text</p>
<div style="background-color: #f3f4f6; padding: 10px;">Gray box</div>

Syntax

<p style="color: #2563eb;">Text in hex blue</p>

mark{ background: #ffeb3b; color:#000 } // not background:yellow