Named color · #F4711E
Apocalyptic Orange
Apocalyptic Orange is #F4711E: rgb(244 113 30), hsl(23 91% 54%), oklch(0.695 0.182 46.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Apocalyptic Orange color name →
#F4711E
oklch(0.695 0.182 46.8)
Color conversions
- HEX
- #f4711e
- RGB
- rgb(244 113 30)
- HSL
- hsl(23 91% 54%)
- HWB
- hwb(23 12% 4%)
- OKLCH
- oklch(0.695 0.182 46.8)
- OKLab
- oklab(0.695 0.125 0.133)
- CIE Lab
- lab(63.38 48.51 65.24)
- LCH
- lch(63.38 81.3 53.4)
- CMYK
- cmyk(0% 54% 88% 4%)
Tints · Shades · Tones
Tints
- F78140
- FA905A
- FC9F70
- FEAD85
- FFBB9A
- FFC9AE
- FFD7C3
- FFE4D7
- FFF2EB
Shades
- D46119
- B55213
- 97430E
- 7A3509
- 5E2705
- 441A03
- 2B0E01
- 140400
- 030100
Tones
- E97432
- DE7740
- D3794B
- C87B55
- BC7D5E
- B17E65
- A57F6D
- 998073
- 8D807A
Color harmonies
Complementary +180°
- F4711E
Apocalyptic Orange
- 00ACDD
≈ Blue Fire
Analogous -30° +30°
- F4711E
Apocalyptic Orange
- F96474
≈ Kisses and Hugs
- CF8F00
≈ End of Summer
Triadic +120° +240°
- F4711E
Apocalyptic Orange
- 00B88A
≈ Green Velour
- 9889FF
≈ Lavender Blue Shadow
Split-complementary +150° +210°
- F4711E
Apocalyptic Orange
- 00B3B6
≈ Cyan Sky
- 569DFF
≈ Blue Chaos
Tetradic +90° +180° +270°
- F4711E
Apocalyptic Orange
- 61B534
≈ Chasm Green
- 00ACDD
≈ Blue Fire
- C974E7
≈ Fake Love
Contrast & accessibility
Ag
FailOn white
WCAG 2.90:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.22:1 · APCA Lc 47
Best text color: #000000
WCAG 7.22:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--apocalyptic-orange: #f4711e;
--apocalyptic-orange-rgb: 244 113 30;
--apocalyptic-orange-oklch: oklch(0.695 0.182 46.8);
}
.element {
color: var(--apocalyptic-orange);
background-color: hsl(23 91% 54%);
border-color: oklch(0.695 0.182 46.8);
}Tailwind CSS v4
@theme {
--color-apocalyptic-orange: #f4711e;
--color-apocalyptic-orange-50: #ffe7c8;
--color-apocalyptic-orange-100: #ffd6b2;
--color-apocalyptic-orange-200: #ffbd8e;
--color-apocalyptic-orange-300: #ff995e;
--color-apocalyptic-orange-400: #f2762d;
--color-apocalyptic-orange-500: #e15100;
--color-apocalyptic-orange-600: #be4600;
--color-apocalyptic-orange-700: #983800;
--color-apocalyptic-orange-800: #722600;
--color-apocalyptic-orange-900: #511a00;
--color-apocalyptic-orange-950: #350900;
}SCSS
$apocalyptic-orange: #f4711e;
$apocalyptic-orange-rgb: 244, 113, 30;
$apocalyptic-orange-light: mix(#fff, $apocalyptic-orange, 20%);
$apocalyptic-orange-dark: mix(#000, $apocalyptic-orange, 20%);
.element {
color: $apocalyptic-orange;
box-shadow: 0 0 0 2px rgba($apocalyptic-orange, 0.35);
}