Named color · #D1E6D5
Peppermint Patty
Peppermint Patty is #D1E6D5: rgb(209 230 213), hsl(131 30% 86%), oklch(0.905 0.032 151.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Peppermint Patty color name →
#D1E6D5
oklch(0.905 0.032 151.1)
Color conversions
- HEX
- #d1e6d5
- RGB
- rgb(209 230 213)
- HSL
- hsl(131 30% 86%)
- HWB
- hwb(131 82% 10%)
- OKLCH
- oklch(0.905 0.032 151.1)
- OKLab
- oklab(0.905 -0.028 0.015)
- CIE Lab
- lab(89.37 -9.56 5.82)
- LCH
- lch(89.37 11.2 148.7)
- CMYK
- cmyk(9% 0% 7% 10%)
Tints · Shades · Tones
Tints
- D6E8D9
- DAEBDD
- DFEDE1
- E3F0E6
- E8F2EA
- EDF5EE
- F1F7F2
- F6FAF7
- FAFCFB
Shades
- B5C8B9
- 9BAB9E
- 818E83
- 68736A
- 505951
- 39403A
- 232824
- 101310
- 020302
Tones
- C9DBCC
- C0D1C3
- B8C6BB
- B0BCB2
- A8B2AA
- A0A8A1
- 989D99
- 909490
- 888A88
Color harmonies
Complementary +180°
- D1E6D5
Peppermint Patty
- EDD8E9
≈ All Made Up
Analogous -30° +30°
- D1E6D5
Peppermint Patty
- DCE3CC
≈ Frozen Margarita
- CAE7E1
≈ Jagged Ice
Triadic +120° +240°
- D1E6D5
Peppermint Patty
- D7DFF6
≈ Puffy Cloud
- F4D8D3
≈ Scented Valentine
Split-complementary +150° +210°
- D1E6D5
Peppermint Patty
- E3DBF2
≈ Princess Fairy Tale
- F3D7DE
≈ Eliza Jane
Tetradic +90° +180° +270°
- D1E6D5
Peppermint Patty
- CEE3F3
≈ Salty Ice
- EDD8E9
≈ All Made Up
- F0DBCB
≈ Winners Shower
Contrast & accessibility
Ag
FailOn white
WCAG 1.31:1 · APCA Lc 15
Ag
AAAOn black
WCAG 15.99:1 · APCA Lc 88
Best text color: #000000
WCAG 15.99:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--peppermint-patty: #d1e6d5;
--peppermint-patty-rgb: 209 230 213;
--peppermint-patty-oklch: oklch(0.905 0.032 151.1);
}
.element {
color: var(--peppermint-patty);
background-color: hsl(131 30% 86%);
border-color: oklch(0.905 0.032 151.1);
}Tailwind CSS v4
@theme {
--color-peppermint-patty: #d1e6d5;
--color-peppermint-patty-50: #eff8f1;
--color-peppermint-patty-100: #e0ebe3;
--color-peppermint-patty-200: #cbd8ce;
--color-peppermint-patty-300: #acbcb0;
--color-peppermint-patty-400: #91a495;
--color-peppermint-patty-500: #778d7c;
--color-peppermint-patty-600: #657769;
--color-peppermint-patty-700: #515f54;
--color-peppermint-patty-800: #3b463c;
--color-peppermint-patty-900: #283029;
--color-peppermint-patty-950: #161c17;
}SCSS
$peppermint-patty: #d1e6d5;
$peppermint-patty-rgb: 209, 230, 213;
$peppermint-patty-light: mix(#fff, $peppermint-patty, 20%);
$peppermint-patty-dark: mix(#000, $peppermint-patty, 20%);
.element {
color: $peppermint-patty;
box-shadow: 0 0 0 2px rgba($peppermint-patty, 0.35);
}