CSS HEX Colors

A HEX color starts with # followed by six characters. The characters are hexadecimal digits: 0-9 and a-f.

1

color: #d94a00;

How to read it

The six digits are three pairs: RR GG BB, which means red, green and blue. Each pair is a number from 00 (none of that color) to ff (the most).

Try it

1
2
3
4
5
6
7

<style>
  div { padding: 10px; margin-bottom: 6px; color: white; }
</style>
<div style="background:#d94a00">#d94a00</div>
<div style="background:#1a5276">#1a5276</div>
<div style="background:#27ae60">#27ae60</div>
<div style="background:#333">#333 (short form)</div>

Shortcuts

• Short form: if each pair has two identical digits, you can write one: #ffcc00 is #fc0, and #333333 is #333.
• With transparency: add two more digits at the end: #d94a0080 is the same orange at about 50% opacity. The last pair is the alpha.

Hex codes are not case-sensitive, so #D94A00 and #d94a00 are identical.