← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 12 of 26

HTML HEX Colors

A HEX color code is just the same red-green-blue mix used by rgb(), but written in a shorter, compact form using base-16 (hexadecimal) numbers instead of base-10. Where rgb(255, 0, 0) needs three separate 0-255 numbers, the equivalent HEX code #FF0000 packs all three channels into a single six-character string, which is why HEX is the format most commonly seen in design tools and brand style guides.

In this page:

  1. Reading a HEX Code
  2. The 3-Digit Shorthand
  3. Grayscale HEX Values
  4. Adding Transparency with 8-Digit HEX
  5. Using HEX Across HTML and CSS

Reading a HEX Code

A HEX color like #FF5733 breaks into three pairs of digits: FF (red), 57 (green), and 33 (blue), where each pair is a hexadecimal number from 00 to FF -- equivalent to a decimal 0-255 rgb() value written in base 16 instead of base 10.

Note: Use a browser DevTools color picker to instantly convert between HEX, RGB, and HSL for the same color while designing.

Warning: Hexadecimal digits run 0-9 then A-F, so any character outside that range makes the HEX code invalid.

Example: Reading a HEX Code

markup 
<p style="color: #FF5733;">Custom hex color text</p>

The 3-Digit Shorthand

When each pair of digits repeats itself, like #FFFFFF or #112233, CSS allows a shorter 3-digit form -- #FFF or #123 -- where each single digit is automatically doubled by the browser to reconstruct the full 6-digit code.

Note: Reach for the 3-digit shorthand for quick, hand-written colors like #f00 (red) or #0f0 (green) when prototyping.

Warning: The 3-digit shorthand only works when both digits in every pair are identical; #FF5733 has no valid shorthand form.

Example: The 3-Digit Shorthand

markup 
<p style="color: #f00;">Shorthand red</p>
<p style="color: #FF0000;">Full form red</p>

Grayscale HEX Values

Just like RGB, a HEX code with all three pairs identical produces a shade of gray -- #000000 is black, #FFFFFF is white, and #808080 is a mid-tone gray, since 80 in hexadecimal equals 128 in decimal, right in the middle of the 0-255 range.

Note: Common neutral grays like #333, #666, #999, and #ccc are frequently reused across a design system for consistent text and border colors.

Warning: A HEX code that looks gray but has slightly mismatched pairs, like #808070, will carry a faint color tint rather than being truly neutral.

Example: Grayscale HEX Values

markup 
<p style="color: #808080;">Mid-tone gray text</p>

Adding Transparency with 8-Digit HEX

Appending two extra hex digits to a 6-digit code adds an alpha transparency channel, ranging from 00 (fully transparent) to FF (fully opaque) -- #FF000080 is red at roughly 50% opacity, since 80 in hex is about half of FF.

Note: Use an 8-digit HEX code when you want transparency but prefer to keep every color value in the same HEX format rather than switching to rgba().

Warning: The 8-digit alpha HEX format is newer than plain 6-digit HEX, so double-check it renders correctly in any very old browser your project must support.

Example: Adding Transparency with 8-Digit HEX

markup 
<div style="background-color: #FF000080;">Semi-transparent red</div>

Using HEX Across HTML and CSS

HEX codes work anywhere a color value is accepted, whether written inline on an HTML element's style attribute or inside a linked CSS stylesheet, and are the format most design tools (like Figma or Photoshop) export by default, making them the easiest format to copy directly from a design file into code.

Note: When a designer hands you a color as a HEX code, paste it directly rather than manually converting it to RGB or HSL, to avoid rounding errors.

Warning: HEX codes are case-insensitive (#ff0000 and #FF0000 are identical), but mixing cases inconsistently across a codebase can make find-and-replace harder.

Example: Using HEX Across HTML and CSS

markup 
<p style="color: #FF5733;">Inline hex color</p>
<style>
  .box { background-color: #FF5733; }
</style>
<div class="box">Internal CSS hex color</div>
Common Mistakes
  1. Forgetting the leading # symbol, without which the browser cannot tell the value apart from a plain word or CSS keyword.
  2. Mixing up HEX digit pairs, not realizing each pair (RR, GG, BB) represents one channel from 00 to FF, exactly like 0-255 in RGB.
  3. Using a 3-digit shorthand like #f00 and assuming it works everywhere identically to 6-digit HEX, when some tools do not accept the short form.
Chapter Summary
  • HEX codes use six hexadecimal digits, in pairs, to represent the red, green, and blue channels: #RRGGBB.
  • A 3-digit shorthand like #abc expands to #aabbcc when each digit is simply doubled.
  • An optional 4th or 8th pair of digits adds an alpha transparency channel, just like the alpha value in rgba().
Browser Support

HEX color notation has been supported since the earliest versions of HTML and CSS; the 8-digit alpha-channel HEX format is supported in all modern browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML RGB Colors Next Lesson → HTML HSL Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.