Nearest named color · #D3586D
#D3586D
Nearest named color: Dragon Fruit
#D3586D (rgb(211 88 109), hsl(350 58% 59%), oklch(0.623 0.156 12.4)) is closest to the named color Dragon Fruit. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#D3586D
oklch(0.623 0.156 12.4)
Color conversions
- HEX
- #d3586d
- RGB
- rgb(211 88 109)
- HSL
- hsl(350 58% 59%)
- HWB
- hwb(350 35% 17%)
- OKLCH
- oklch(0.623 0.156 12.4)
- OKLab
- oklab(0.623 0.152 0.033)
- CIE Lab
- lab(54.47 50.71 14.1)
- LCH
- lch(54.47 52.64 15.5)
- CMYK
- cmyk(0% 58% 48% 17%)
Tints · Shades · Tones
Tints
- DA6A7B
- E07B89
- E58C97
- EA9DA5
- EFADB4
- F3BDC2
- F7CED1
- FADEE0
- FDEFF0
Shades
- B74B5E
- 9C3F4F
- 823341
- 692833
- 511D26
- 3A1219
- 24090D
- 100304
- 020001
Tones
- CC5E6F
- C46371
- BD6873
- B56C75
- AD7077
- A57479
- 9C777A
- 937A7C
- 8A7D7E
Color harmonies
Complementary +180°
- D3586D
Dragon Fruit
- 009B98
≈ Regula Barbara Blue
Analogous -30° +30°
- D3586D
Dragon Fruit
- C45CA0
≈ Llilacquered
- D2612F
≈ Vermilion Waxcap
Triadic +120° +240°
- D3586D
Dragon Fruit
- 619926
≈ Limeade
- 3489E1
≈ Bleu de France
Split-complementary +150° +210°
- D3586D
Dragon Fruit
- 00A06E
≈ Surgeon
- 0095B9
≈ Bondi Blue
Tetradic +90° +180° +270°
- D3586D
Dragon Fruit
- 978900
≈ Medusa Green
- 009B98
≈ Regula Barbara Blue
- 7B77E1
≈ Hera Blue
Contrast & accessibility
Ag
FailOn white
WCAG 3.89:1 · APCA Lc 66
Ag
AAOn black
WCAG 5.38:1 · APCA Lc 36
Best text color: #000000
WCAG 5.38:1 (AA) · APCA Lc 36
Contrast pairs
Code snippets
CSS
:root {
--dragon-fruit: #d3586d;
--dragon-fruit-rgb: 211 88 109;
--dragon-fruit-oklch: oklch(0.623 0.156 12.4);
}
.element {
color: var(--dragon-fruit);
background-color: hsl(350 58% 59%);
border-color: oklch(0.623 0.156 12.4);
}Tailwind CSS v4
@theme {
--color-dragon-fruit: #d3586d;
--color-dragon-fruit-50: #ffe4e7;
--color-dragon-fruit-100: #ffd3d8;
--color-dragon-fruit-200: #ffb9c0;
--color-dragon-fruit-300: #fc959f;
--color-dragon-fruit-400: #eb7385;
--color-dragon-fruit-500: #d8506a;
--color-dragon-fruit-600: #b7455a;
--color-dragon-fruit-700: #933747;
--color-dragon-fruit-800: #6d2636;
--color-dragon-fruit-900: #4d1a24;
--color-dragon-fruit-950: #330913;
}SCSS
$dragon-fruit: #d3586d;
$dragon-fruit-rgb: 211, 88, 109;
$dragon-fruit-light: mix(#fff, $dragon-fruit, 20%);
$dragon-fruit-dark: mix(#000, $dragon-fruit, 20%);
.element {
color: $dragon-fruit;
box-shadow: 0 0 0 2px rgba($dragon-fruit, 0.35);
}