Couleur nommée · #EDD5DD
Lighthearted Pink
Lighthearted Pink correspond à #EDD5DD : rgb(237 213 221), hsl(340 40% 88%), oklch(0.895 0.029 355.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Lighthearted Pink color name →
#EDD5DD
oklch(0.895 0.029 355.5)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- EFD9E0
- F1DDE4
- F3E2E7
- F4E6EA
- F6EAEE
- F8EEF1
- FAF2F5
- FCF7F8
- FDFBFC
Ombres
- CEB9C0
- B09EA4
- 938388
- 776A6E
- 5C5155
- 423A3D
- 2A2426
- 141011
- 030202
Tons
- E2CCD3
- D6C3CA
- CBBBC0
- C0B2B7
- B5AAAD
- AAA1A4
- A0999B
- 959092
- 8A8889
Harmonies de couleurs
Complémentaire +180°
- EDD5DD
Lighthearted Pink
- CAE3DB
≈ Moody Mist
Analogue -30° +30°
- EDD5DD
Lighthearted Pink
- E7D6E7
≈ Pale Grey Magenta
- EFD6D3
≈ Radiant Rose
Triadique +120° +240°
- EDD5DD
Lighthearted Pink
- DBDFCA
≈ Sip of Mint
- CBE0ED
≈ Atlantic Breeze
Complémentaire divisée +150° +210°
- EDD5DD
Lighthearted Pink
- D1E2D1
≈ Misty Marsh
- C8E2E5
≈ Melting Point
Tétradique +90° +180° +270°
- EDD5DD
Lighthearted Pink
- E5DBC8
≈ Half Spanish White
- CAE3DB
≈ Moody Mist
- D3DDF0
≈ Puffy Cloud
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.38:1 · APCA Lc 19
Ag
AAASur noir
WCAG 15.16:1 · APCA Lc 85
Meilleure couleur de texte: #000000
WCAG 15.16:1 (AAA) · APCA Lc 85
Contrast pairs
Extraits de code
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);
}