Couleur nommée · #ECC4DC
Sugar Sweet
Sugar Sweet correspond à #ECC4DC : rgb(236 196 220), hsl(324 51% 85%), oklch(0.862 0.055 341.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Pink mean? → · Sugar Sweet color name →
#ECC4DC
oklch(0.862 0.055 341.6)
Conversions de couleur
- HEX
- #ecc4dc
- RGB
- rgb(236 196 220)
- HSL
- hsl(324 51% 85%)
- HWB
- hwb(324 77% 7%)
- OKLCH
- oklch(0.862 0.055 341.6)
- OKLab
- oklab(0.862 0.052 -0.017)
- CIE Lab
- lab(83.22 17.55 -6.39)
- LCH
- lch(83.22 18.68 340)
- CMYK
- cmyk(0% 17% 7% 7%)
Teintes · Ombres · Tons
Teintes
- EECADF
- F0D0E3
- F2D6E6
- F4DBEA
- F6E1ED
- F8E7F1
- FAEDF4
- FCF3F8
- FDF9FB
Ombres
- CDAABF
- AF91A3
- 927888
- 76616E
- 5B4A54
- 42353C
- 292126
- 130E11
- 030202
Tons
- E1BDD2
- D6B6C9
- CBAFBF
- C0A8B6
- B5A2AD
- AA9BA4
- 9F949B
- 958D92
- 8A8789
Harmonies de couleurs
Complémentaire +180°
- ECC4DC
Sugar Sweet
- B2DDC6
≈ Quantum Effect
Analogue -30° +30°
- ECC4DC
Sugar Sweet
- DEC8ED
≈ Foggy Love
- F3C3C8
≈ Rose Reminder
Triadique +120° +240°
- ECC4DC
Sugar Sweet
- D9D3AA
≈ Dull Sage
- ABDAEC
≈ Blue Feather
Complémentaire divisée +150° +210°
- ECC4DC
Sugar Sweet
- C5DAB5
≈ White Vienna
- A8DEDA
≈ High Altitude
Tétradique +90° +180° +270°
- ECC4DC
Sugar Sweet
- E9CCAB
≈ Sandpoint
- B2DDC6
≈ Quantum Effect
- B8D5F5
≈ Summer Birthday
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.55:1 · APCA Lc 25
Ag
AAASur noir
WCAG 13.49:1 · APCA Lc 78
Meilleure couleur de texte: #000000
WCAG 13.49:1 (AAA) · APCA Lc 78
Contrast pairs
Extraits de code
CSS
:root {
--sugar-sweet: #ecc4dc;
--sugar-sweet-rgb: 236 196 220;
--sugar-sweet-oklch: oklch(0.862 0.055 341.6);
}
.element {
color: var(--sugar-sweet);
background-color: hsl(324 51% 85%);
border-color: oklch(0.862 0.055 341.6);
}Tailwind CSS v4
@theme {
--color-sugar-sweet: #ecc4dc;
--color-sugar-sweet-50: #ffeff9;
--color-sugar-sweet-100: #f6e1ec;
--color-sugar-sweet-200: #e6cbda;
--color-sugar-sweet-300: #cdadbe;
--color-sugar-sweet-400: #b692a8;
--color-sugar-sweet-500: #a07891;
--color-sugar-sweet-600: #87667a;
--color-sugar-sweet-700: #6c5162;
--color-sugar-sweet-800: #503b48;
--color-sugar-sweet-900: #372932;
--color-sugar-sweet-950: #22161e;
}SCSS
$sugar-sweet: #ecc4dc;
$sugar-sweet-rgb: 236, 196, 220;
$sugar-sweet-light: mix(#fff, $sugar-sweet, 20%);
$sugar-sweet-dark: mix(#000, $sugar-sweet, 20%);
.element {
color: $sugar-sweet;
box-shadow: 0 0 0 2px rgba($sugar-sweet, 0.35);
}