Named color · #F5811A
Consumed by Fire
Consumed by Fire is #F5811A: rgb(245 129 26), hsl(28 92% 53%), oklch(0.72 0.173 54.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Consumed by Fire color name →
#F5811A
oklch(0.72 0.173 54.1)
Color conversions
- HEX
- #f5811a
- RGB
- rgb(245 129 26)
- HSL
- hsl(28 92% 53%)
- HWB
- hwb(28 10% 4%)
- OKLCH
- oklch(0.72 0.173 54.1)
- OKLab
- oklab(0.72 0.101 0.14)
- CIE Lab
- lab(66.61 41.34 68.66)
- LCH
- lch(66.61 80.15 58.9)
- CMYK
- cmyk(0% 47% 89% 4%)
Tints · Shades · Tones
Tints
- F88F40
- FA9C5A
- FCA971
- FDB687
- FFC29B
- FFCFAF
- FFDBC3
- FFE7D7
- FFF3EB
Shades
- D56F15
- B65E10
- 984E0C
- 7B3E07
- 5F2E04
- 441F02
- 2B1201
- 150600
- 030100
Tones
- EA8231
- DE8340
- D3834C
- C88456
- BC845E
- B08366
- A5836D
- 998274
- 8C817A
Color harmonies
Complementary +180°
- F5811A
Consumed by Fire
- 00B2F4
≈ Democrat
Analogous -30° +30°
- F5811A
Consumed by Fire
- FF726D
≈ Sparkling Cosmo
- D09B00
≈ Leopard
Triadic +120° +240°
- F5811A
Consumed by Fire
- 00C09E
≈ First Post
- AC8EFF
≈ Lilac Geode
Split-complementary +150° +210°
- F5811A
Consumed by Fire
- 00BAC8
≈ Utopia Beckons
- 76A2FF
≈ Fennel Flower
Tetradic +90° +180° +270°
- F5811A
Consumed by Fire
- 55C058
≈ Range Land
- 00B2F4
≈ Democrat
- D87BE1
≈ Hibiscus Pop
Contrast & accessibility
Ag
FailOn white
WCAG 2.61:1 · APCA Lc 50
Ag
AAAOn black
WCAG 8.03:1 · APCA Lc 52
Best text color: #000000
WCAG 8.03:1 (AAA) · APCA Lc 52
Contrast pairs
Code snippets
CSS
:root {
--consumed-by-fire: #f5811a;
--consumed-by-fire-rgb: 245 129 26;
--consumed-by-fire-oklch: oklch(0.72 0.173 54.1);
}
.element {
color: var(--consumed-by-fire);
background-color: hsl(28 92% 53%);
border-color: oklch(0.72 0.173 54.1);
}Tailwind CSS v4
@theme {
--color-consumed-by-fire: #f5811a;
--color-consumed-by-fire-50: #ffe9c6;
--color-consumed-by-fire-100: #ffdab0;
--color-consumed-by-fire-200: #ffc18a;
--color-consumed-by-fire-300: #fa9e59;
--color-consumed-by-fire-400: #ea7d20;
--color-consumed-by-fire-500: #d95b00;
--color-consumed-by-fire-600: #b74e00;
--color-consumed-by-fire-700: #933e00;
--color-consumed-by-fire-800: #6e2b00;
--color-consumed-by-fire-900: #4e1d00;
--color-consumed-by-fire-950: #330c00;
}SCSS
$consumed-by-fire: #f5811a;
$consumed-by-fire-rgb: 245, 129, 26;
$consumed-by-fire-light: mix(#fff, $consumed-by-fire, 20%);
$consumed-by-fire-dark: mix(#000, $consumed-by-fire, 20%);
.element {
color: $consumed-by-fire;
box-shadow: 0 0 0 2px rgba($consumed-by-fire, 0.35);
}