Named color · #DDAAEE
Petal Plush
Petal Plush is #DDAAEE: rgb(221 170 238), hsl(285 67% 80%), oklch(0.807 0.108 317.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Petal Plush color name →
#DDAAEE
oklch(0.807 0.108 317.5)
Color conversions
- HEX
- #ddaaee
- RGB
- rgb(221 170 238)
- HSL
- hsl(285 67% 80%)
- HWB
- hwb(285 67% 7%)
- OKLCH
- oklch(0.807 0.108 317.5)
- OKLab
- oklab(0.807 0.08 -0.073)
- CIE Lab
- lab(76.12 27.98 -26.79)
- LCH
- lch(76.12 38.74 316.2)
- CMYK
- cmyk(7% 29% 0% 7%)
Tints · Shades · Tones
Tints
- E1B3F0
- E4BBF2
- E8C4F4
- EBCCF6
- EED5F7
- F2DDF9
- F5E6FB
- F9EEFC
- FCF7FE
Shades
- C093CF
- A47DB1
- 886893
- 6E5377
- 553F5C
- 3D2D42
- 261B2A
- 110B14
- 020103
Tones
- D3A6E3
- CAA2D7
- C09ECC
- B79AC1
- AE95B6
- A491AB
- 9B8DA0
- 928995
- 89848B
Color harmonies
Complementary +180°
- DDAAEE
Petal Plush
- 9ED18B
≈ Botanist
Analogous -30° +30°
- DDAAEE
Petal Plush
- BCB6FF
≈ Greyish Lavender
- F4A3CD
≈ Violet Kiss
Triadic +120° +240°
- DDAAEE
Petal Plush
- E7B76C
≈ California Chamois
- 5BD5D9
≈ Blue Radiance
Split-complementary +150° +210°
- DDAAEE
Petal Plush
- C7C570
≈ Siskin Green
- 74D7B2
≈ Peppy
Tetradic +90° +180° +270°
- DDAAEE
Petal Plush
- FAAA82
≈ Sunset Peach
- 9ED18B
≈ Botanist
- 6CCEF7
≈ Skyan
Contrast & accessibility
Ag
FailOn white
WCAG 1.89:1 · APCA Lc 36
Ag
AAAOn black
WCAG 11.05:1 · APCA Lc 66
Best text color: #000000
WCAG 11.05:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--petal-plush: #ddaaee;
--petal-plush-rgb: 221 170 238;
--petal-plush-oklch: oklch(0.807 0.108 317.5);
}
.element {
color: var(--petal-plush);
background-color: hsl(285 67% 80%);
border-color: oklch(0.807 0.108 317.5);
}Tailwind CSS v4
@theme {
--color-petal-plush: #ddaaee;
--color-petal-plush-50: #ffecff;
--color-petal-plush-100: #f8ddff;
--color-petal-plush-200: #e9c6f2;
--color-petal-plush-300: #d0a6db;
--color-petal-plush-400: #b98ac8;
--color-petal-plush-500: #a36eb5;
--color-petal-plush-600: #8a5d99;
--color-petal-plush-700: #6f4b7b;
--color-petal-plush-800: #51365c;
--color-petal-plush-900: #382540;
--color-petal-plush-950: #231329;
}SCSS
$petal-plush: #ddaaee;
$petal-plush-rgb: 221, 170, 238;
$petal-plush-light: mix(#fff, $petal-plush, 20%);
$petal-plush-dark: mix(#000, $petal-plush, 20%);
.element {
color: $petal-plush;
box-shadow: 0 0 0 2px rgba($petal-plush, 0.35);
}