Named color · #D9308A
Dark Princess Pink
Dark Princess Pink is #D9308A: rgb(217 48 138), hsl(328 69% 52%), oklch(0.6 0.216 353.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Dark Princess Pink color name →
#D9308A
oklch(0.6 0.216 353.6)
Color conversions
- HEX
- #d9308a
- RGB
- rgb(217 48 138)
- HSL
- hsl(328 69% 52%)
- HWB
- hwb(328 19% 15%)
- OKLCH
- oklch(0.6 0.216 353.6)
- OKLab
- oklab(0.6 0.215 -0.024)
- CIE Lab
- lab(50.8 68.83 -8.27)
- LCH
- lch(50.8 69.33 353.1)
- CMYK
- cmyk(0% 78% 36% 15%)
Tints · Shades · Tones
Tints
- E04D95
- E664A0
- EB79AC
- F08DB7
- F5A0C3
- F8B4CF
- FBC7DB
- FDD9E7
- FFECF3
Shades
- BC2877
- A12165
- 861A53
- 6C1342
- 530C32
- 3B0622
- 250314
- 110107
- 020001
Tones
- D23F89
- CA4A88
- C25487
- BA5C86
- B26485
- A96A84
- A07083
- 967682
- 8B7B81
Color harmonies
Complementary +180°
- D9308A
Dark Princess Pink
- 00967B
≈ Pool Table
Analogous -30° +30°
- D9308A
Dark Princess Pink
- BB44C8
≈ Ultraviolet Berl
- E52E3B
≈ Alizarin
Triadic +120° +240°
- D9308A
Dark Princess Pink
- 818800
≈ Krypton Green
- 008BBF
≈ Cyan Cornflower Blue
Split-complementary +150° +210°
- D9308A
Dark Princess Pink
- 009C19
≈ Space Invader
- 00929C
≈ Peacock Feather
Tetradic +90° +180° +270°
- D9308A
Dark Princess Pink
- A37800
≈ Nataneyu Gold
- 00967B
≈ Pool Table
- 3874FF
≈ Hailey Blue
Contrast & accessibility
Ag
FailOn white
WCAG 4.43:1 · APCA Lc 69
Ag
AAOn black
WCAG 4.74:1 · APCA Lc 32
Best text color: #000000
WCAG 4.74:1 (AA) · APCA Lc 32
Contrast pairs
Code snippets
CSS
:root {
--dark-princess-pink: #d9308a;
--dark-princess-pink-rgb: 217 48 138;
--dark-princess-pink-oklch: oklch(0.6 0.216 353.6);
}
.element {
color: var(--dark-princess-pink);
background-color: hsl(328 69% 52%);
border-color: oklch(0.6 0.216 353.6);
}Tailwind CSS v4
@theme {
--color-dark-princess-pink: #d9308a;
--color-dark-princess-pink-50: #ffdcf8;
--color-dark-princess-pink-100: #ffcaeb;
--color-dark-princess-pink-200: #ffacd8;
--color-dark-princess-pink-300: #ff83bc;
--color-dark-princess-pink-400: #f95ba8;
--color-dark-princess-pink-500: #e72491;
--color-dark-princess-pink-600: #c3237b;
--color-dark-princess-pink-700: #9d1d62;
--color-dark-princess-pink-800: #75134b;
--color-dark-princess-pink-900: #520c34;
--color-dark-princess-pink-950: #37001f;
}SCSS
$dark-princess-pink: #d9308a;
$dark-princess-pink-rgb: 217, 48, 138;
$dark-princess-pink-light: mix(#fff, $dark-princess-pink, 20%);
$dark-princess-pink-dark: mix(#000, $dark-princess-pink, 20%);
.element {
color: $dark-princess-pink;
box-shadow: 0 0 0 2px rgba($dark-princess-pink, 0.35);
}