Named color · #D46036
Vermilion Waxcap
Vermilion Waxcap is #D46036: rgb(212 96 54), hsl(16 65% 52%), oklch(0.626 0.157 39.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Vermilion Waxcap color name →
#D46036
oklch(0.626 0.157 39.7)
Color conversions
- HEX
- #d46036
- RGB
- rgb(212 96 54)
- HSL
- hsl(16 65% 52%)
- HWB
- hwb(16 21% 17%)
- OKLCH
- oklch(0.626 0.157 39.7)
- OKLab
- oklab(0.626 0.121 0.1)
- CIE Lab
- lab(55.34 44.85 46.11)
- LCH
- lch(55.34 64.33 45.8)
- CMYK
- cmyk(0% 55% 75% 17%)
Tints · Shades · Tones
Tints
- DA714C
- E08261
- E59275
- EAA188
- EFB19C
- F3C1B0
- F7D0C3
- FAE0D7
- FDEFEB
Shades
- B8522E
- 9D4525
- 83381E
- 692C16
- 51200F
- 3A1508
- 240A03
- 100301
- 020000
Tones
- CC6540
- C56949
- BD6D51
- B57159
- AD7460
- A57767
- 9C796E
- 937C74
- 8A7E7A
Color harmonies
Complementary +180°
- D46036
Vermilion Waxcap
- 0097B7
≈ Bondi Blue
Analogous -30° +30°
- D46036
Vermilion Waxcap
- D45873
≈ Kenny’s Kiss
- BB7600
≈ Cassandra’s Curse
Triadic +120° +240°
- D46036
Vermilion Waxcap
- 00A169
≈ Emerald Light Green
- 777AE4
≈ Hera Blue
Split-complementary +150° +210°
- D46036
Vermilion Waxcap
- 009C96
≈ Caribbean Turquoise
- 288CE2
≈ Bleu de France
Tetradic +90° +180° +270°
- D46036
Vermilion Waxcap
- 68991C
≈ Gecko’s Dream
- 0097B7
≈ Bondi Blue
- A469CE
≈ Rich Lavender
Contrast & accessibility
Ag
FailOn white
WCAG 3.80:1 · APCA Lc 65
Ag
AAOn black
WCAG 5.52:1 · APCA Lc 37
Best text color: #000000
WCAG 5.52:1 (AA) · APCA Lc 37
Contrast pairs
Code snippets
CSS
:root {
--vermilion-waxcap: #d46036;
--vermilion-waxcap-rgb: 212 96 54;
--vermilion-waxcap-oklch: oklch(0.626 0.157 39.7);
}
.element {
color: var(--vermilion-waxcap);
background-color: hsl(16 65% 52%);
border-color: oklch(0.626 0.157 39.7);
}Tailwind CSS v4
@theme {
--color-vermilion-waxcap: #d46036;
--color-vermilion-waxcap-50: #ffe7d3;
--color-vermilion-waxcap-100: #ffd7bf;
--color-vermilion-waxcap-200: #ffbea0;
--color-vermilion-waxcap-300: #fb9b76;
--color-vermilion-waxcap-400: #ea7a53;
--color-vermilion-waxcap-500: #d85827;
--color-vermilion-waxcap-600: #b74b23;
--color-vermilion-waxcap-700: #933c1c;
--color-vermilion-waxcap-800: #6e2a15;
--color-vermilion-waxcap-900: #4d1c0d;
--color-vermilion-waxcap-950: #330c02;
}SCSS
$vermilion-waxcap: #d46036;
$vermilion-waxcap-rgb: 212, 96, 54;
$vermilion-waxcap-light: mix(#fff, $vermilion-waxcap, 20%);
$vermilion-waxcap-dark: mix(#000, $vermilion-waxcap, 20%);
.element {
color: $vermilion-waxcap;
box-shadow: 0 0 0 2px rgba($vermilion-waxcap, 0.35);
}