#B22222

Firebrick

Firebrick is a rich, strongly saturated, dark warm red (#B22222).

Using Firebrick in your designs

Firebrick reads as a rich, strongly saturated red with a warm temperament. Colors in this range are commonly associated with energy, urgency and appetite, which makes firebrick a natural fit for call-to-action buttons, sale badges and anywhere you need immediate attention.

With a 6.68:1 contrast ratio against white, firebrick is dark enough to carry white text at any size — use it confidently for buttons, headers and filled UI elements. Against black text it manages 3.14:1, so stick with white type on firebrick surfaces.

For pairings, the complement of firebrick sits at 180° — #22B4B4, close to lightseagreen — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same warm temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for firebrick in the palettes below, with copy-ready codes.

Firebrick color palettes

Every palette below is computed from firebrick's position on the color wheel (hue 0°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Firebrick

Tints mix firebrick toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how firebrick performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

Pairing	Ratio	Normal text	Large text
White text on Firebrick	`6.68:1`	AA	AAA
Black text on Firebrick	`3.14:1`	Fail	AA

Protanopia#747222

Deuteranopia#7C8722

Tritanopia#AB2222

Firebrick in code

Copy-ready snippets. In CSS you can also use the keyword firebrick directly.

:root {
  --firebrick: #B22222;
  --firebrick-rgb: 178, 34, 34;
  --firebrick-tint: #D58585;
  --firebrick-shade: #621313;
}

.btn-firebrick {
  background: var(--firebrick);
  color: #ffffff;
}

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-firebrick: #B22222;
  --color-firebrick-light: #D58585;
  --color-firebrick-dark: #621313;
}

Generate a complete ramp and semantic roles in the Tailwind color generator.

Tailwind CSS v3 — extend your theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        firebrick: { DEFAULT: "#B22222", light: "#D58585", dark: "#621313" }
      }
    }
  }
};

Colors similar to Firebrick

The closest CSS named colors by perceptual (Lab) distance.

brown#A52A2A · ΔE 10

darkred#8B0000 · ΔE 13

maroon#800000 · ΔE 16

crimson#DC143C · ΔE 17

indianred#CD5C5C · ΔE 24

tomato#FF6347 · ΔE 25

← Previousdodgerblue Next →floralwhite

Copied