Named color · #D3ADB1
Ballet Rose
Ballet Rose is #D3ADB1: rgb(211 173 177), hsl(354 30% 75%), oklch(0.783 0.045 11). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Ballet Rose color name →
#D3ADB1
oklch(0.783 0.045 11)
Color conversions
- HEX
- #d3adb1
- RGB
- rgb(211 173 177)
- HSL
- hsl(354 30% 75%)
- HWB
- hwb(354 68% 17%)
- OKLCH
- oklch(0.783 0.045 11)
- OKLab
- oklab(0.783 0.044 0.009)
- CIE Lab
- lab(74.26 14.73 3.43)
- LCH
- lch(74.26 15.12 13.1)
- CMYK
- cmyk(0% 18% 16% 17%)
Tints · Shades · Tones
Tints
- D8B5B9
- DCBDC0
- E1C5C8
- E5CDD0
- E9D5D7
- EEDEDF
- F2E6E7
- F6EEEF
- FBF7F7
Shades
- B79699
- 9C7F83
- 826A6C
- 695557
- 514142
- 3A2D2F
- 241B1C
- 100B0C
- 020101
Tones
- CBA8AC
- C2A4A7
- BA9FA2
- B19B9D
- A99698
- A19293
- 998D8E
- 90898A
- 888485
Color harmonies
Complementary +180°
- D3ADB1
Ballet Rose
- 98C2BF
≈ Pitter Patter
Analogous -30° +30°
- D3ADB1
Ballet Rose
- CDADC1
≈ Winsome Orchid
- D2AFA3
≈ Rose Smoke
Triadic +120° +240°
- D3ADB1
Ballet Rose
- AEBFA1
≈ Green Andara
- A4BBD4
≈ Sky Pilot
Split-complementary +150° +210°
- D3ADB1
Ballet Rose
- A0C2AF
≈ Green Silk
- 99BFCC
≈ Rest Assured
Tetradic +90° +180° +270°
- D3ADB1
Ballet Rose
- BEBA99
≈ Salty Seeds
- 98C2BF
≈ Pitter Patter
- B2B5D5
≈ Wild Orchid Blue
Contrast & accessibility
Ag
FailOn white
WCAG 2.02:1 · APCA Lc 39
Ag
AAAOn black
WCAG 10.38:1 · APCA Lc 63
Best text color: #000000
WCAG 10.38:1 (AAA) · APCA Lc 63
Contrast pairs
Code snippets
CSS
:root {
--ballet-rose: #d3adb1;
--ballet-rose-rgb: 211 173 177;
--ballet-rose-oklch: oklch(0.783 0.045 11);
}
.element {
color: var(--ballet-rose);
background-color: hsl(354 30% 75%);
border-color: oklch(0.783 0.045 11);
}Tailwind CSS v4
@theme {
--color-ballet-rose: #d3adb1;
--color-ballet-rose-50: #fff0f1;
--color-ballet-rose-100: #f6e2e3;
--color-ballet-rose-200: #e7cdcf;
--color-ballet-rose-300: #cdafb1;
--color-ballet-rose-400: #b79498;
--color-ballet-rose-500: #a17a7f;
--color-ballet-rose-600: #88686b;
--color-ballet-rose-700: #6d5356;
--color-ballet-rose-800: #503c3f;
--color-ballet-rose-900: #38292b;
--color-ballet-rose-950: #231719;
}SCSS
$ballet-rose: #d3adb1;
$ballet-rose-rgb: 211, 173, 177;
$ballet-rose-light: mix(#fff, $ballet-rose, 20%);
$ballet-rose-dark: mix(#000, $ballet-rose, 20%);
.element {
color: $ballet-rose;
box-shadow: 0 0 0 2px rgba($ballet-rose, 0.35);
}