Named color · #F7D5D4
Ballet
Ballet is #F7D5D4: rgb(247 213 212), hsl(2 69% 90%), oklch(0.901 0.038 19.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Ballet color name →
#F7D5D4
oklch(0.901 0.038 19.9)
Color conversions
- HEX
- #f7d5d4
- RGB
- rgb(247 213 212)
- HSL
- hsl(2 69% 90%)
- HWB
- hwb(2 83% 3%)
- OKLCH
- oklch(0.901 0.038 19.9)
- OKLab
- oklab(0.901 0.036 0.013)
- CIE Lab
- lab(88.15 12.11 5.11)
- LCH
- lch(88.15 13.15 22.9)
- CMYK
- cmyk(0% 14% 14% 3%)
Tints · Shades · Tones
Tints
- F8D9D8
- F9DDDC
- FAE2E1
- FBE6E5
- FBEAE9
- FCEEEE
- FDF2F2
- FEF7F6
- FEFBFB
Shades
- D7B9B8
- B79E9D
- 998383
- 7C6A69
- 605151
- 453A3A
- 2C2424
- 151010
- 030202
Tones
- EBCCCB
- DEC3C3
- D2BBBA
- C6B2B1
- BAAAA9
- AEA1A1
- A29998
- 979090
- 8B8888
Color harmonies
Complementary +180°
- F7D5D4
Ballet
- C2E7E8
≈ On Cloud Nine
Analogous -30° +30°
- F7D5D4
Ballet
- F3D5E2
≈ Hopeful
- F4D8C8
≈ Melon Ice
Triadic +120° +240°
- F7D5D4
Ballet
- D2E5CD
≈ Lime Flip
- D0DFF8
≈ Puffy Cloud
Split-complementary +150° +210°
- F7D5D4
Ballet
- C7E7DA
≈ Mint Whisper
- C6E4F3
≈ Icy Landscape
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.42:1 · APCA Lc 86
Best text color: #000000
WCAG 15.42:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--ballet: #f7d5d4;
--ballet-rgb: 247 213 212;
--ballet-oklch: oklch(0.901 0.038 19.9);
}
.element {
color: var(--ballet);
background-color: hsl(2 69% 90%);
border-color: oklch(0.901 0.038 19.9);
}Tailwind CSS v4
@theme {
--color-ballet: #f7d5d4;
--color-ballet-50: #fff1f0;
--color-ballet-100: #f5e3e2;
--color-ballet-200: #e4cecd;
--color-ballet-300: #cab0af;
--color-ballet-400: #b49695;
--color-ballet-500: #9e7c7c;
--color-ballet-600: #866969;
--color-ballet-700: #6b5454;
--color-ballet-800: #4f3d3d;
--color-ballet-900: #372a2a;
--color-ballet-950: #221818;
}SCSS
$ballet: #f7d5d4;
$ballet-rgb: 247, 213, 212;
$ballet-light: mix(#fff, $ballet, 20%);
$ballet-dark: mix(#000, $ballet, 20%);
.element {
color: $ballet;
box-shadow: 0 0 0 2px rgba($ballet, 0.35);
}