Colorbook
Sign in Sign up

Color Information

Fire Brick #C02011

Complete color analysis with professional format conversions, accessibility metrics, and harmonious color combinations for your design projects.

HEX Format
#C02011
RGB Values
192, 32, 17
HSL Values
5°, 84%, 41%
CMYK Values
0%, 83%, 91%, 25%

Color Variations & Tints

  • #ED4031

    Lightness: 56%

  • #EB2B19

    Lightness: 51%

  • #D82313

    Lightness: 46%

  • #C02011

    Lightness: 41%

    Current color

  • #A91C0F

    Lightness: 36%

  • #91180D

    Lightness: 31%

  • #7A140B

    Lightness: 26%

Accessibility

White Text
6.1
PASS
Black Text
3.5
FAIL
WCAG AA
PASS
WCAG AAA
FAIL

Accessibility Guide

Contrast Ratios
Higher values (4.5+) ensure better readability for users with visual impairments.
WCAG AA Standard
Minimum requirement: 4.5:1 contrast for normal text, 3:1 for large text.
WCAG AAA Standard
Enhanced level: 7:1 contrast for normal text, 4.5:1 for large text.

Color Harmonies

Six established ways to build a palette around #C02011. Click any swatch to copy its value, or open it to see the full breakdown.

Complementary

The colour directly opposite on the wheel.

#C02011 This color
#11B2C0
Use it when
Highest possible contrast between two hues. Use it when one element has to stand out against everything else: a call-to-action button, a highlight, a single focal point.
Watch out
Side by side at full saturation the edges appear to vibrate. Give one colour far less area than the other, or take saturation out of one of them.

Split-complementary

Instead of the opposite colour, the two next to it.

#C02011 This color
#11C077
#115AC0
Use it when
Almost the contrast of a complementary pair, but noticeably calmer. A good default when complementary feels too harsh: one dominant colour, two accents.
Watch out
The two accents are close to each other. Keep them apart in the layout, or one will read as a mistake.

Analogous

Direct neighbours on the wheel.

#C0115A
#C02011 This color
#C07711
Use it when
Naturally harmonious because the colours share undertones. Works well for backgrounds, gradients and calm interfaces where nothing should shout.
Watch out
Contrast between them is low. Do not rely on hue alone to separate interactive elements - vary lightness as well.

Triadic

Three hues at equal distance, 120 degrees apart.

#C02011 This color
#11C01F
#1F11C0
Use it when
Vivid and balanced at the same time. Suits playful, illustrative work and anything that needs three clearly distinct categories.
Watch out
Three strong colours are hard to balance. Let one dominate and treat the other two as accents, otherwise the result looks restless.

Tetradic

Four hues forming two complementary pairs.

#C02011 This color
#5AC011
#11B2C0
#7711C0
Use it when
The richest of the classic schemes. Useful when a design genuinely needs four distinct colours, for example a chart with four series.
Watch out
The hardest scheme to control. Choose one lead colour, use the rest sparingly, and watch the balance between warm and cool.

Monochromatic

One hue, stepped through lightness.

#340804
#7A140B
#C01F11
#ED4031
#F38177
Use it when
Always coherent, because there is only one hue. The natural choice for interface hierarchies, single-series charts and restrained designs.
Watch out
Can read as flat. Add one neutral or a single accent colour wherever something needs to be noticed.

Using this color

The same colour behaves very differently depending on where it sits. Each example below states its contrast ratio, so you can see at a glance what holds up.

As a background

6.08:1 passes AA

Heading on this colour

Body text at white, the more readable of the two options.

Fine for body text, though not the most comfortable for long passages.

As a button

Primary action Secondary Subtle

The outlined and subtle variants use #C02011 for the label, the colour itself, which is already readable on white.

As text on white

ready to use

The colour itself

Reaches 6.08:1 on white and can be used for body text as it is.

As a section behind cards

Card title

White cards on a coloured band are a safe pattern: the card carries the text, the colour carries the mood.

Read more →

As an accent

Highlighted notice

A coloured edge draws attention without touching legibility.

Body copy with an inline link in the adjusted shade.

Badge Outline

In a gradient

with its neighbour
with its complement

Neighbouring hues blend smoothly. Complements pass through a muddy middle, so keep that gradient short or add a stop.

How others see this colour

Around one in twelve men and one in two hundred women perceive colour differently. Two shades that look distinct to most people can collapse into one for them - which is why meaning should never rest on colour alone.

Normal vision

#C02011

Protanopia

#574C0A

about 1% of men

Deuteranopia

#7D6F00

about 1% of men

Tritanopia

#D40020

rare, affects both sexes

Use it in code

The same colour in the notations you are likely to need.

CSS 
:root {
  --fire-brick: #c02011;
}

.element {
  color: #c02011;
  background-color: rgb(192 32 17 / 10%);
}
Tailwind 
// tailwind.config.js
theme: {
  extend: {
    colors: {
      'fire-brick': '#c02011',
    },
  },
}
SCSS 
$fire-brick: #c02011;
$fire-brick-light: lighten($fire-brick, 15%);
$fire-brick-dark: darken($fire-brick, 15%);
Swift 
Color(red: 0.753, green: 0.125, blue: 0.067)
// UIKit
UIColor(red: 0.753, green: 0.125, blue: 0.067, alpha: 1.0)
Android 
<!-- colors.xml -->
<color name="fire_brick">#C02011</color>

// Compose
val FireBrick = Color(0xFFC02011)
Other 
hsl(5, 84%, 41%)
rgb(192, 32, 17)
#C02011

Be picky and fine tune your color: colors very near to #C02011

Systematic progression of extremely similar colors. Each color represents a precise step in lightness variation.

You are here
#C02011
Current: #C02011

Discover More Colors

Explore a randomly curated selection of colors. Each refresh brings new inspiration for your palette.