Benoemde kleur · #EDD5DD
Lighthearted Pink
Lighthearted Pink is #EDD5DD: rgb(237 213 221), hsl(340 40% 88%), oklch(0.895 0.029 355.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Lighthearted Pink color name →
#EDD5DD
oklch(0.895 0.029 355.5)
Kleurconversies
- HEX
- #edd5dd
- RGB
- rgb(237 213 221)
- HSL
- hsl(340 40% 88%)
- HWB
- hwb(340 84% 7%)
- OKLCH
- oklch(0.895 0.029 355.5)
- OKLab
- oklab(0.895 0.028 -0.002)
- CIE Lab
- lab(87.45 9.59 -0.76)
- LCH
- lch(87.45 9.62 355.5)
- CMYK
- cmyk(0% 10% 7% 7%)
Tinten · Schaduwen · Tonen
Tinten
- EFD9E0
- F1DDE4
- F3E2E7
- F4E6EA
- F6EAEE
- F8EEF1
- FAF2F5
- FCF7F8
- FDFBFC
Schaduwen
- CEB9C0
- B09EA4
- 938388
- 776A6E
- 5C5155
- 423A3D
- 2A2426
- 141011
- 030202
Tonen
- E2CCD3
- D6C3CA
- CBBBC0
- C0B2B7
- B5AAAD
- AAA1A4
- A0999B
- 959092
- 8A8889
Kleurharmonieën
Complementair +180°
- EDD5DD
Lighthearted Pink
- CAE3DB
≈ Moody Mist
Analoog -30° +30°
- EDD5DD
Lighthearted Pink
- E7D6E7
≈ Pale Grey Magenta
- EFD6D3
≈ Radiant Rose
Triadisch +120° +240°
- EDD5DD
Lighthearted Pink
- DBDFCA
≈ Sip of Mint
- CBE0ED
≈ Atlantic Breeze
Gesplitst complementair +150° +210°
- EDD5DD
Lighthearted Pink
- D1E2D1
≈ Misty Marsh
- C8E2E5
≈ Melting Point
Tetradisch +90° +180° +270°
- EDD5DD
Lighthearted Pink
- E5DBC8
≈ Half Spanish White
- CAE3DB
≈ Moody Mist
- D3DDF0
≈ Puffy Cloud
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.38:1 · APCA Lc 19
Ag
AAAOp zwart
WCAG 15.16:1 · APCA Lc 85
Beste tekstkleur: #000000
WCAG 15.16:1 (AAA) · APCA Lc 85
Contrast pairs
Codefragmenten
CSS
:root {
--lighthearted-pink: #edd5dd;
--lighthearted-pink-rgb: 237 213 221;
--lighthearted-pink-oklch: oklch(0.895 0.029 355.5);
}
.element {
color: var(--lighthearted-pink);
background-color: hsl(340 40% 88%);
border-color: oklch(0.895 0.029 355.5);
}Tailwind CSS v4
@theme {
--color-lighthearted-pink: #edd5dd;
--color-lighthearted-pink-50: #fdf2f5;
--color-lighthearted-pink-100: #f0e4e8;
--color-lighthearted-pink-200: #dfcfd4;
--color-lighthearted-pink-300: #c4b2b7;
--color-lighthearted-pink-400: #ad989f;
--color-lighthearted-pink-500: #977f87;
--color-lighthearted-pink-600: #7f6b72;
--color-lighthearted-pink-700: #66565b;
--color-lighthearted-pink-800: #4b3e43;
--color-lighthearted-pink-900: #342b2e;
--color-lighthearted-pink-950: #1f181b;
}SCSS
$lighthearted-pink: #edd5dd;
$lighthearted-pink-rgb: 237, 213, 221;
$lighthearted-pink-light: mix(#fff, $lighthearted-pink, 20%);
$lighthearted-pink-dark: mix(#000, $lighthearted-pink, 20%);
.element {
color: $lighthearted-pink;
box-shadow: 0 0 0 2px rgba($lighthearted-pink, 0.35);
}