Named color · #DFB5B0
Princess Pink
Princess Pink is #DFB5B0: rgb(223 181 176), hsl(6 42% 78%), oklch(0.809 0.049 26.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Princess Pink color name →
#DFB5B0
oklch(0.809 0.049 26.1)
Color conversions
- HEX
- #dfb5b0
- RGB
- rgb(223 181 176)
- HSL
- hsl(6 42% 78%)
- HWB
- hwb(6 69% 13%)
- OKLCH
- oklch(0.809 0.049 26.1)
- OKLab
- oklab(0.809 0.044 0.022)
- CIE Lab
- lab(77.39 15.09 8.6)
- LCH
- lch(77.39 17.37 29.7)
- CMYK
- cmyk(0% 19% 21% 13%)
Tints · Shades · Tones
Tints
- E2BCB8
- E6C4BF
- E9CBC7
- ECD2CF
- F0DAD7
- F3E1DF
- F6E9E7
- F9F0EF
- FCF7F7
Shades
- C29D99
- A58682
- 8A6F6C
- 6F5956
- 564442
- 3D302E
- 271D1C
- 120C0B
- 020201
Tones
- D5B0AB
- CCAAA6
- C2A5A1
- B8A09D
- AF9A98
- A59593
- 9C908E
- 938A89
- 898585
Color harmonies
Complementary +180°
- DFB5B0
Princess Pink
- 9CCAD0
≈ Surfside
Analogous -30° +30°
- DFB5B0
Princess Pink
- DCB4C1
≈ Mental Floss
- DAB9A2
≈ Tracery
Triadic +120° +240°
- DFB5B0
Princess Pink
- ADCAAE
≈ Pastel Meadow
- B2C1E1
≈ Promise
Split-complementary +150° +210°
- DFB5B0
Princess Pink
- A0CCBF
≈ Tareyton
- A3C6DD
≈ Mr Frosty
Tetradic +90° +180° +270°
- DFB5B0
Princess Pink
- BEC5A1
≈ Seagrass
- 9CCAD0
≈ Surfside
- C3BBDE
≈ Melrose
Contrast & accessibility
Ag
FailOn white
WCAG 1.84:1 · APCA Lc 35
Ag
AAAOn black
WCAG 11.37:1 · APCA Lc 68
Best text color: #000000
WCAG 11.37:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--princess-pink: #dfb5b0;
--princess-pink-rgb: 223 181 176;
--princess-pink-oklch: oklch(0.809 0.049 26.1);
}
.element {
color: var(--princess-pink);
background-color: hsl(6 42% 78%);
border-color: oklch(0.809 0.049 26.1);
}Tailwind CSS v4
@theme {
--color-princess-pink: #dfb5b0;
--color-princess-pink-50: #fff0ed;
--color-princess-pink-100: #f8e2df;
--color-princess-pink-200: #e9cdc9;
--color-princess-pink-300: #d0aea9;
--color-princess-pink-400: #ba948f;
--color-princess-pink-500: #a57a75;
--color-princess-pink-600: #8b6763;
--color-princess-pink-700: #70524f;
--color-princess-pink-800: #523c3a;
--color-princess-pink-900: #392928;
--color-princess-pink-950: #241716;
}SCSS
$princess-pink: #dfb5b0;
$princess-pink-rgb: 223, 181, 176;
$princess-pink-light: mix(#fff, $princess-pink, 20%);
$princess-pink-dark: mix(#000, $princess-pink, 20%);
.element {
color: $princess-pink;
box-shadow: 0 0 0 2px rgba($princess-pink, 0.35);
}