Firebrick

Meet Firebrick, hex code #B22222. This deep, muted red carries the intensity of a classic crimson but with a sophisticated, earthy undertone. Its rich saturation and subtle warmth make it a compelling choice for creating strong, yet grounded, visual statements in any design project.

What color is Firebrick?

What is the meaning of Firebrick?

How do I use Firebrick (#B22222) in UI design?

Using Firebrick color codes

Firebrick

#B22222

Access our full UI & UX library today.

What color is Firebrick?

What is the meaning of Firebrick?

How do I use Firebrick (#B22222) in UI design?

Using Firebrick color codes

Firebrick Code Conversions

HEX

#B22222

LAB

39, 56, 38

RGB

178, 34, 34

XYZ

19.2, 10.7, 2.6

HSL

0°, 68%, 42%

LCH

39, 67, 34°

HSB

0°, 81%, 70%

LUV

39, 108, 23

CMYK

0, 81, 81, 30

CMYK

0, 81, 81, 30

HWB

0°, 13%, 30%

Firebrick Color Harmonies

Analogous

Analogous colors sit beside Firebrick on the color wheel. This close relationship produces a cohesive and calm aesthetic, ideal for creating serene user interfaces.

#B2226A

#B22222

#B26A22

#B2226A

#B22222

#B26A22

Complementary

Found directly across from Firebrick on the color wheel, its complementary color creates a bold and vibrant pairing perfect for eye-catching designs.

#B22222

#22B2B2

#B22222

#22B2B2

Split Complementary

A split complementary palette pairs Firebrick with the two colors on either side of its direct opposite, creating a strong visual contrast with less tension.

#B22222

#22B26A

#226AB2

#B22222

#22B26A

#226AB2

Triadic

A triadic color scheme for Firebrick involves two other colors equally spaced on the color wheel, creating a vibrant and balanced high-contrast palette.

#B22222

#22B222

#2222B2

#B22222

#22B222

#2222B2

Tetradic

Tetradic color palettes for Firebrick are built from two sets of complementary colors, forming a rectangle on the color wheel for balanced, four-color combinations.

#B22222

#6AB222

#22B2B2

#6A22B2

#B22222

#6AB222

#22B2B2

#6A22B2

Square

A square color scheme uses four colors evenly spaced on the color wheel, creating a vibrant, high-contrast palette with Firebrick as the base.

#B22222

#6AB222

#22B2B2

#6A22B2

#B22222

#6AB222

#22B2B2

#6A22B2

Firebrick Contrast Simulation

Text Color

#

Background Color

#

6.68

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

6.68

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Firebrick Color Variations

Shades

Adding black to Firebrick creates darker shades, which introduce depth and weight.

#B22222

#991D1D

#7F1818

#661313

#4C0F0F

#330A0A

#190505

#000000

#B22222

#991D1D

#7F1818

#661313

#4C0F0F

#330A0A

#190505

#000000

Tints

Adding white to Firebrick creates tints, which are lighter and introduce a softer feel.

#B22222

#BD4242

#C86161

#D38181

#DEA0A0

#E9C0C0

#F4DFDF

#FFFFFF

#B22222

#BD4242

#C86161

#D38181

#DEA0A0

#E9C0C0

#F4DFDF

#FFFFFF

Tones

Tones are created by adding gray to Firebrick, resulting in a softer, more muted color.

#B22222

#AB2F2F

#A43D3D

#9D4A4A

#955858

#8E6565

#877373

#808080

#B22222

#AB2F2F

#A43D3D

#9D4A4A

#955858

#8E6565

#877373

#808080

Hues

Hues are Firebrick variations that differ in warmth and intensity, altering the overall feeling.

#B22222

#B28E22

#6AB222

#22B246

#22B2B2

#2246B2

#6A22B2

#B2228E

#B22222

#B28E22

#6AB222

#22B246

#22B2B2

#2246B2

#6A22B2

#B2228E

What Interfaces Use Colors Like Firebrick?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox