Named color · #D1062B
Vermilion Scarlet
Vermilion Scarlet is #D1062B: rgb(209 6 43), hsl(349 94% 42%), oklch(0.545 0.218 23.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Vermilion Scarlet color name →
#D1062B
oklch(0.545 0.218 23.1)
Color conversions
- HEX
- #d1062b
- RGB
- rgb(209 6 43)
- HSL
- hsl(349 94% 42%)
- HWB
- hwb(349 2% 18%)
- OKLCH
- oklch(0.545 0.218 23.1)
- OKLab
- oklab(0.545 0.2 0.086)
- CIE Lab
- lab(44.89 69.5 41.56)
- LCH
- lch(44.89 80.98 30.9)
- CMYK
- cmyk(0% 97% 79% 18%)
Tints · Shades · Tones
Tints
- D93941
- E15656
- E86D6B
- ED847F
- F39994
- F7AEA9
- FAC2BE
- FDD6D3
- FFEBE9
Shades
- B50424
- 9B031D
- 810216
- 680110
- 50010A
- 390005
- 230002
- 100001
- 020000
Tones
- CB2936
- C43B3F
- BE4848
- B75351
- AF5C59
- A76461
- 9F6C69
- 957371
- 8B7A78
Color harmonies
Complementary +180°
- D1062B
Vermilion Scarlet
- 007F88
≈ Go Alpha
Analogous -30° +30°
- D1062B
Vermilion Scarlet
- C5117A
≈ Purple Anxiety
- AC5400
≈ Tijolo
Triadic +120° +240°
- D1062B
Vermilion Scarlet
- 00880E
≈ Lush Garden
- 2562EC
≈ Old Gungeon Red
Split-complementary +150° +210°
- D1062B
Vermilion Scarlet
- 00836A
≈ Viridis
- 007AA7
≈ Quiet Cove
Tetradic +90° +180° +270°
- D1062B
Vermilion Scarlet
- 717700
≈ Portuguese Green
- 007F88
≈ Go Alpha
- 7A47E0
≈ Aconite Purple
Contrast & accessibility
Ag
AAOn white
WCAG 5.56:1 · APCA Lc 75
Ag
FailOn black
WCAG 3.77:1 · APCA Lc 27
Best text color: #FFFFFF
WCAG 5.56:1 (AA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--vermilion-scarlet: #d1062b;
--vermilion-scarlet-rgb: 209 6 43;
--vermilion-scarlet-oklch: oklch(0.545 0.218 23.1);
}
.element {
color: var(--vermilion-scarlet);
background-color: hsl(349 94% 42%);
border-color: oklch(0.545 0.218 23.1);
}Tailwind CSS v4
@theme {
--color-vermilion-scarlet: #d1062b;
--color-vermilion-scarlet-50: #ffded6;
--color-vermilion-scarlet-100: #ffccc3;
--color-vermilion-scarlet-200: #ffaea4;
--color-vermilion-scarlet-300: #ff857d;
--color-vermilion-scarlet-400: #ff5a5e;
--color-vermilion-scarlet-500: #f51d39;
--color-vermilion-scarlet-600: #cf1e31;
--color-vermilion-scarlet-700: #a71927;
--color-vermilion-scarlet-800: #7d0f1e;
--color-vermilion-scarlet-900: #580a14;
--color-vermilion-scarlet-950: #3b0006;
}SCSS
$vermilion-scarlet: #d1062b;
$vermilion-scarlet-rgb: 209, 6, 43;
$vermilion-scarlet-light: mix(#fff, $vermilion-scarlet, 20%);
$vermilion-scarlet-dark: mix(#000, $vermilion-scarlet, 20%);
.element {
color: $vermilion-scarlet;
box-shadow: 0 0 0 2px rgba($vermilion-scarlet, 0.35);
}