Named color · #E25D1B
Ferocious Fox
Ferocious Fox is #E25D1B: rgb(226 93 27), hsl(20 79% 50%), oklch(0.641 0.181 42.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Ferocious Fox color name →
#E25D1B
oklch(0.641 0.181 42.3)
Color conversions
- HEX
- #e25d1b
- RGB
- rgb(226 93 27)
- HSL
- hsl(20 79% 50%)
- HWB
- hwb(20 11% 11%)
- OKLCH
- oklch(0.641 0.181 42.3)
- OKLab
- oklab(0.641 0.133 0.122)
- CIE Lab
- lab(56.91 50.79 60.17)
- LCH
- lch(56.91 78.74 49.8)
- CMYK
- cmyk(0% 59% 88% 11%)
Tints · Shades · Tones
Tints
- E76F3C
- EC8155
- F0916B
- F4A181
- F7B196
- FAC1AB
- FCD1C0
- FEE0D5
- FFF0EA
Shades
- C45016
- A84311
- 8C370C
- 712A08
- 571F05
- 3E1402
- 270A01
- 120300
- 030000
Tones
- D9632E
- D0683C
- C76C47
- BE7051
- B4745A
- AB7762
- A17A6A
- 967C72
- 8B7E79
Color harmonies
Complementary +180°
- E25D1B
Ferocious Fox
- 009BC0
≈ Sea Wonder
Analogous -30° +30°
- E25D1B
Ferocious Fox
- E3526E
≈ Camellia Rose
- BE7C00
≈ Guo Tie Dumpling
Triadic +120° +240°
- E25D1B
Ferocious Fox
- 00A672
≈ Bluish Green
- 7F78F5
≈ Hera Blue
Split-complementary +150° +210°
- E25D1B
Ferocious Fox
- 00A19E
≈ Aqua Velvet
- 1F8EF5
≈ Clear Chill
Tetradic +90° +180° +270°
- E25D1B
Ferocious Fox
- 60A100
≈ Prairie Green
- 009BC0
≈ Sea Wonder
- B166DA
≈ Teldrassil Purple
Contrast & accessibility
Ag
FailOn white
WCAG 3.61:1 · APCA Lc 63
Ag
AAOn black
WCAG 5.81:1 · APCA Lc 39
Best text color: #000000
WCAG 5.81:1 (AA) · APCA Lc 39
Contrast pairs
Code snippets
CSS
:root {
--ferocious-fox: #e25d1b;
--ferocious-fox-rgb: 226 93 27;
--ferocious-fox-oklch: oklch(0.641 0.181 42.3);
}
.element {
color: var(--ferocious-fox);
background-color: hsl(20 79% 50%);
border-color: oklch(0.641 0.181 42.3);
}Tailwind CSS v4
@theme {
--color-ferocious-fox: #e25d1b;
--color-ferocious-fox-50: #ffe6cb;
--color-ferocious-fox-100: #ffd5b7;
--color-ferocious-fox-200: #ffbb94;
--color-ferocious-fox-300: #ff9766;
--color-ferocious-fox-400: #f3743c;
--color-ferocious-fox-500: #e24e00;
--color-ferocious-fox-600: #bf4300;
--color-ferocious-fox-700: #993600;
--color-ferocious-fox-800: #732501;
--color-ferocious-fox-900: #511902;
--color-ferocious-fox-950: #360800;
}SCSS
$ferocious-fox: #e25d1b;
$ferocious-fox-rgb: 226, 93, 27;
$ferocious-fox-light: mix(#fff, $ferocious-fox, 20%);
$ferocious-fox-dark: mix(#000, $ferocious-fox, 20%);
.element {
color: $ferocious-fox;
box-shadow: 0 0 0 2px rgba($ferocious-fox, 0.35);
}