Named color · #FF0D04
Shocking Crimson
Shocking Crimson is #FF0D04: rgb(255 13 4), hsl(2 100% 51%), oklch(0.63 0.255 29.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Shocking Crimson color name →
#FF0D04
oklch(0.63 0.255 29.4)
Color conversions
- HEX
- #ff0d04
- RGB
- rgb(255 13 4)
- HSL
- hsl(2 100% 51%)
- HWB
- hwb(2 2% 0%)
- OKLCH
- oklch(0.63 0.255 29.4)
- OKLab
- oklab(0.63 0.222 0.125)
- CIE Lab
- lab(54.6 79.97 68.93)
- LCH
- lch(54.6 105.58 40.8)
- CMYK
- cmyk(0% 95% 98% 0%)
Tints · Shades · Tones
Tints
- FF4333
- FF604E
- FF7865
- FF8E7C
- FFA292
- FFB5A8
- FFC8BD
- FFDBD3
- FFEDE9
Shades
- DE0A03
- BE0702
- 9E0501
- 800301
- 630201
- 480100
- 2E0000
- 160000
- 030000
Tones
- F43224
- E94434
- DD5141
- D25B4C
- C66456
- B96B5F
- AC7168
- 9E7770
- 907C78
Color harmonies
Complementary +180°
- FF0D04
Shocking Crimson
- 009BAD
≈ Aquarium Diver
Analogous -30° +30°
- FF0D04
Shocking Crimson
- F60285
≈ Flickr Pink
- C96F00
≈ Sludge
Triadic +120° +240°
- FF0D04
Shocking Crimson
- 00A549
≈ Green Pigment
- 5B7CFF
≈ C64 NTSC
Split-complementary +150° +210°
- FF0D04
Shocking Crimson
- 009F8B
≈ Flamboyant Teal
- 0093D6
≈ Kahu Blue
Tetradic +90° +180° +270°
- FF0D04
Shocking Crimson
- 7F9500
≈ Mossy Woods
- 009BAD
≈ Aquarium Diver
- A159FF
≈ Vega Violet
Contrast & accessibility
Ag
FailOn white
WCAG 3.95:1 · APCA Lc 64
Ag
AAOn black
WCAG 5.31:1 · APCA Lc 38
Best text color: #000000
WCAG 5.31:1 (AA) · APCA Lc 38
Contrast pairs
Code snippets
CSS
:root {
--shocking-crimson: #ff0d04;
--shocking-crimson-rgb: 255 13 4;
--shocking-crimson-oklch: oklch(0.63 0.255 29.4);
}
.element {
color: var(--shocking-crimson);
background-color: hsl(2 100% 51%);
border-color: oklch(0.63 0.255 29.4);
}Tailwind CSS v4
@theme {
--color-shocking-crimson: #ff0d04;
--color-shocking-crimson-50: #ffdac8;
--color-shocking-crimson-100: #ffc8b3;
--color-shocking-crimson-200: #ffa78f;
--color-shocking-crimson-300: #ff7b5f;
--color-shocking-crimson-400: #ff4736;
--color-shocking-crimson-500: #ff0000;
--color-shocking-crimson-600: #dc0000;
--color-shocking-crimson-700: #b10000;
--color-shocking-crimson-800: #850000;
--color-shocking-crimson-900: #5e0001;
--color-shocking-crimson-950: #400000;
}SCSS
$shocking-crimson: #ff0d04;
$shocking-crimson-rgb: 255, 13, 4;
$shocking-crimson-light: mix(#fff, $shocking-crimson, 20%);
$shocking-crimson-dark: mix(#000, $shocking-crimson, 20%);
.element {
color: $shocking-crimson;
box-shadow: 0 0 0 2px rgba($shocking-crimson, 0.35);
}