Named color · #DFC5D5
Extreme Lavender
Extreme Lavender is #DFC5D5: rgb(223 197 213), hsl(323 29% 82%), oklch(0.85 0.036 340.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Extreme Lavender color name →
#DFC5D5
oklch(0.85 0.036 340.4)
Color conversions
- HEX
- #dfc5d5
- RGB
- rgb(223 197 213)
- HSL
- hsl(323 29% 82%)
- HWB
- hwb(323 77% 13%)
- OKLCH
- oklch(0.85 0.036 340.4)
- OKLab
- oklab(0.85 0.034 -0.012)
- CIE Lab
- lab(82.1 11.49 -4.47)
- LCH
- lch(82.1 12.33 338.7)
- CMYK
- cmyk(0% 12% 4% 13%)
Tints · Shades · Tones
Tints
- E2CBD9
- E5D0DD
- E9D6E1
- ECDCE6
- EFE2EA
- F2E8EE
- F6EDF2
- F9F3F7
- FCF9FB
Shades
- C2ABB9
- A5929E
- 8A7983
- 6F616A
- 564B51
- 3D353A
- 272124
- 120E10
- 020202
Tones
- D5BECC
- CBB7C3
- C2B0BB
- B8A9B2
- AEA2AA
- A59BA1
- 9C9499
- 928D90
- 898788
Color harmonies
Complementary +180°
- DFC5D5
Extreme Lavender
- BAD5C6
≈ Sage Bundle
Analogous -30° +30°
- DFC5D5
Extreme Lavender
- D5C8E0
≈ Watercolour Grape
- E4C5C8
≈ Pink Pandora
Triadic +120° +240°
- DFC5D5
Extreme Lavender
- D3CFB4
≈ White Rock
- B5D4DE
≈ Foamy Surf
Split-complementary +150° +210°
- DFC5D5
Extreme Lavender
- C6D3BB
≈ Willow Tree Mouse
- B4D6D3
≈ Dante Peak
Tetradic +90° +180° +270°
- DFC5D5
Extreme Lavender
- DDCAB5
≈ Loft Light
- BAD5C6
≈ Sage Bundle
- BDD0E5
≈ Bewitching Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.60:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.08:1 · APCA Lc 76
Best text color: #000000
WCAG 13.08:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--extreme-lavender: #dfc5d5;
--extreme-lavender-rgb: 223 197 213;
--extreme-lavender-oklch: oklch(0.85 0.036 340.4);
}
.element {
color: var(--extreme-lavender);
background-color: hsl(323 29% 82%);
border-color: oklch(0.85 0.036 340.4);
}Tailwind CSS v4
@theme {
--color-extreme-lavender: #dfc5d5;
--color-extreme-lavender-50: #fdf1f8;
--color-extreme-lavender-100: #f1e3eb;
--color-extreme-lavender-200: #e0ced8;
--color-extreme-lavender-300: #c5b0bc;
--color-extreme-lavender-400: #ae96a5;
--color-extreme-lavender-500: #977d8e;
--color-extreme-lavender-600: #806a78;
--color-extreme-lavender-700: #675560;
--color-extreme-lavender-800: #4b3e47;
--color-extreme-lavender-900: #342a31;
--color-extreme-lavender-950: #20181d;
}SCSS
$extreme-lavender: #dfc5d5;
$extreme-lavender-rgb: 223, 197, 213;
$extreme-lavender-light: mix(#fff, $extreme-lavender, 20%);
$extreme-lavender-dark: mix(#000, $extreme-lavender, 20%);
.element {
color: $extreme-lavender;
box-shadow: 0 0 0 2px rgba($extreme-lavender, 0.35);
}