Named color · #CC4411
Fire Bolt
Fire Bolt is #CC4411: rgb(204 68 17), hsl(16 85% 43%), oklch(0.574 0.181 37.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Fire Bolt color name →
#CC4411
oklch(0.574 0.181 37.7)
Color conversions
- HEX
- #cc4411
- RGB
- rgb(204 68 17)
- HSL
- hsl(16 85% 43%)
- HWB
- hwb(16 7% 20%)
- OKLCH
- oklch(0.574 0.181 37.7)
- OKLab
- oklab(0.574 0.143 0.111)
- CIE Lab
- lab(49.02 53.32 56.2)
- LCH
- lch(49.02 77.47 46.5)
- CMYK
- cmyk(0% 67% 92% 20%)
Tints · Shades · Tones
Tints
- D45A34
- DB6E4D
- E18164
- E7937A
- EDA690
- F2B8A6
- F6C9BC
- FADBD2
- FDEDE8
Shades
- B13A0D
- 973009
- 7E2606
- 651D04
- 4E1402
- 370C01
- 220500
- 0F0200
- 020000
Tones
- C64D26
- BF5534
- B95C40
- B2634B
- AA6955
- A36E5E
- 9B7367
- 93786F
- 8A7C78
Color harmonies
Complementary +180°
- CC4411
Fire Bolt
- 0087A0
≈ Gogo Blue
Analogous -30° +30°
- CC4411
Fire Bolt
- CA3B64
≈ Raspberry Jam
- A86800
≈ Butter Fudge
Triadic +120° +240°
- CC4411
Fire Bolt
- 008F58
≈ Emerald Isle
- 6367E0
≈ Exodus Fruit
Split-complementary +150° +210°
- CC4411
Fire Bolt
- 008B83
≈ Clear Turquoise
- 007DCD
≈ Blue Aster
Tetradic +90° +180° +270°
- CC4411
Fire Bolt
- 5F8800
≈ Sap Green
- 0087A0
≈ Gogo Blue
- 9653C9
≈ Morado Purple
Contrast & accessibility
Ag
AAOn white
WCAG 4.77:1 · APCA Lc 72
Ag
FailOn black
WCAG 4.40:1 · APCA Lc 30
Best text color: #FFFFFF
WCAG 4.77:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--fire-bolt: #cc4411;
--fire-bolt-rgb: 204 68 17;
--fire-bolt-oklch: oklch(0.574 0.181 37.7);
}
.element {
color: var(--fire-bolt);
background-color: hsl(16 85% 43%);
border-color: oklch(0.574 0.181 37.7);
}Tailwind CSS v4
@theme {
--color-fire-bolt: #cc4411;
--color-fire-bolt-50: #ffe5cf;
--color-fire-bolt-100: #ffd4bb;
--color-fire-bolt-200: #ffb999;
--color-fire-bolt-300: #ff956e;
--color-fire-bolt-400: #f57148;
--color-fire-bolt-500: #e44a0e;
--color-fire-bolt-600: #c04112;
--color-fire-bolt-700: #9b340f;
--color-fire-bolt-800: #74230d;
--color-fire-bolt-900: #521808;
--color-fire-bolt-950: #360700;
}SCSS
$fire-bolt: #cc4411;
$fire-bolt-rgb: 204, 68, 17;
$fire-bolt-light: mix(#fff, $fire-bolt, 20%);
$fire-bolt-dark: mix(#000, $fire-bolt, 20%);
.element {
color: $fire-bolt;
box-shadow: 0 0 0 2px rgba($fire-bolt, 0.35);
}