UI Shades

A study in red

Firebrick

#B22222

Family
Red
L
0.497
C
0.180
H
27°

Notes

Firebrick is the deep, slightly brown-leaning red of weathered house bricks. The CSS hex has high chroma at low-mid lightness, giving it strong presence as a primary accent or display heading color. It carries warm, grounded, heritage associations: architecture, leather goods, serious editorial design. Pair with cream and dark charcoal for a heritage palette, or with deep teal for a striking contrast. Against white the contrast holds at body text sizes, making it one of the more accessible reds in the CSS spec. Body text against white passes AAA at standard sizes; below 12px still verify per browser.

#b22222
Firebrick
Firebrick
#b22222
oklch(0.497 0.18 26.81)
rgb(178 34 34)
hsl(0 67.9% 41.6%)
Share
#fff3f0
#ffebe6
#ffd6cf
#ffbdb4
#ff887c
#e75048
#ca322f
#b22222
#82080e
#5c0004
#350001

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Firebrick

Cross-reference
Q&A

Frequently asked questions

What is Firebrick?

Firebrick is the deep, slightly brown-leaning red of weathered house bricks. The CSS hex has high chroma at low-mid lightness, giving it strong presence as a primary accent or display heading color. Its hex code is #B22222.

What are the tints and shades of Firebrick?

uishades builds an 11-step OKLCH ramp for Firebrick (#B22222) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Firebrick?

Its complementary color is #007280. Triadic partners are #007B0E and #3456C7; analogous neighbours are #9C4700 and #AA2164.

What are the OKLCH and RGB values of Firebrick?

Firebrick is #B22222 - OKLCH 0.497 0.180 27°, rgb(178 34 34), in the red family.