Named color · #FF0E0E
Danger
Danger is #FF0E0E: rgb(255 14 14), hsl(0 100% 53%), oklch(0.631 0.255 28.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Danger color name →
#FF0E0E
oklch(0.631 0.255 28.9)
Color conversions
- HEX
- #ff0e0e
- RGB
- rgb(255 14 14)
- HSL
- hsl(0 100% 53%)
- HWB
- hwb(0 5% 0%)
- OKLCH
- oklch(0.631 0.255 28.9)
- OKLab
- oklab(0.631 0.223 0.123)
- CIE Lab
- lab(54.65 79.94 66.46)
- LCH
- lch(54.65 103.96 39.7)
- CMYK
- cmyk(0% 95% 95% 0%)
Tints · Shades · Tones
Tints
- FF4336
- FF6050
- FF7867
- FF8E7D
- FFA293
- FFB5A8
- FFC8BE
- FFDBD3
- FFEDE9
Shades
- DE0B0B
- BE0707
- 9E0505
- 800303
- 630202
- 480101
- 2E0000
- 160000
- 030000
Tones
- F43227
- E94437
- DD5143
- D25B4D
- C66457
- B96B60
- AC7169
- 9E7771
- 907C78
Color harmonies
Complementary +180°
- FF0E0E
Danger
- 009BAC
≈ Aquarium Diver
Analogous -30° +30°
- FF0E0E
Danger
- F50686
≈ Fabulous Fuchsia
- CA6F00
≈ Sludge
Triadic +120° +240°
- FF0E0E
Danger
- 00A546
≈ Poetic Green
- 5A7CFF
≈ C64 NTSC
Split-complementary +150° +210°
- FF0E0E
Danger
- 00A08B
≈ Turquish
- 0093D5
≈ Sea of Crete
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.94:1 · APCA Lc 64
Ag
AAOn black
WCAG 5.32:1 · APCA Lc 38
Best text color: #000000
WCAG 5.32:1 (AA) · APCA Lc 38
Contrast pairs
Code snippets
CSS
:root {
--danger: #ff0e0e;
--danger-rgb: 255 14 14;
--danger-oklch: oklch(0.631 0.255 28.9);
}
.element {
color: var(--danger);
background-color: hsl(0 100% 53%);
border-color: oklch(0.631 0.255 28.9);
}Tailwind CSS v4
@theme {
--color-danger: #ff0e0e;
--color-danger-50: #ffdac9;
--color-danger-100: #ffc7b4;
--color-danger-200: #ffa790;
--color-danger-300: #ff7b61;
--color-danger-400: #ff4739;
--color-danger-500: #ff0000;
--color-danger-600: #dc0000;
--color-danger-700: #b10000;
--color-danger-800: #850002;
--color-danger-900: #5e0002;
--color-danger-950: #400000;
}SCSS
$danger: #ff0e0e;
$danger-rgb: 255, 14, 14;
$danger-light: mix(#fff, $danger, 20%);
$danger-dark: mix(#000, $danger, 20%);
.element {
color: $danger;
box-shadow: 0 0 0 2px rgba($danger, 0.35);
}