scalpel@labs: ~/glossary/hex-color-code.mdx5 sections

Hex Color Codes: How #RRGGBB Works and When to Use It

A hex colour code writes red, green and blue as three pairs of hexadecimal digits,

extension: Scalpel Colorupdated: 2026-08-14read_time: 2 min
less hex-color-code.mdx

Why it matters

Hex is the shortest way to write an exact colour, which is why design tools and CSS default to it. But it hides the numbers: you cannot eyeball that #8b0000 is a dark red the way you can read hsl(0 100% 27%). Use hex to store and copy a colour, hsl() or oklch() to reason about one.

The real appeal is brevity. A brand colour stored as #38bdf8 is three pairs instead of three channel ranges. That's why hex dominates in codebases and design files. It is the most compact way to pin a colour down.

How it works

Each pair in #RRGGBB is base-16. The digits range from 0 to f (hexadecimal 15), so ff is 255. That means:

  • #ff0000 is red (255 red, 0 green, 0 blue).
  • #00ff00 is green.
  • #0000ff is blue.
  • #ffffff is white (all channels maxed).
  • #000000 is black (all channels zero).

The shorthand #f00 expands to #ff0000. The browser treats #FF0000 and #ff0000 as identical; case is cosmetic.

The 8-digit form #RRGGBBAA adds an alpha channel for opacity. The last pair is the alpha value from 00 (fully transparent) to ff (fully opaque). #ff000080 is red at roughly 50% opacity.

What does not matter

Hex is not "more precise" than rgb(). Both encode exactly 8 bits per channel, so #ff0000 and rgb(255 0 0) are byte-identical. The only difference is how they're written. Pick hex for brevity, rgb() or hsl() for readability in a stylesheet. Pick whichever helps the next person read your code.

Uppercase versus lowercase is purely cosmetic. #FF0000 and #ff0000 render identically.

Code example

<!-- Colour names -->
<p style="color: #38bdf8;">This is hex colour #38bdf8, a light blue.</p>

<!-- With alpha (50% opacity) -->
<div style="background: #ff0000 url('fallback.png'); background: #ff000080;">
  This box has a red overlay at 50% opacity.
</div>

<!-- Wrong: opacity is not a colour -->
<div style="color: #ff000080;">
  <!-- Browsers read this and may fail in old versions. Use the CSS alpha syntax instead. -->
</div>

How Scalpel Color shows it

Open the Picker tab. The Hex row shows the current colour in #RRGGBB form. You can type or paste a hex code directly into the input. The header's preferred-format select lets you flip between hex, rgb(), hsl(), and other formats throughout the extension.

Sources