Nazwany kolor · #ECC4DC
Sugar Sweet
Sugar Sweet to #ECC4DC: rgb(236 196 220), hsl(324 51% 85%), oklch(0.862 0.055 341.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Sugar Sweet color name →
#ECC4DC
oklch(0.862 0.055 341.6)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- EECADF
- F0D0E3
- F2D6E6
- F4DBEA
- F6E1ED
- F8E7F1
- FAEDF4
- FCF3F8
- FDF9FB
Odcienie ciemniejsze
- CDAABF
- AF91A3
- 927888
- 76616E
- 5B4A54
- 42353C
- 292126
- 130E11
- 030202
Tony
- E1BDD2
- D6B6C9
- CBAFBF
- C0A8B6
- B5A2AD
- AA9BA4
- 9F949B
- 958D92
- 8A8789
Harmonie kolorów
Komplementarna +180°
- ECC4DC
Sugar Sweet
- B2DDC6
≈ Quantum Effect
Analogowa -30° +30°
- ECC4DC
Sugar Sweet
- DEC8ED
≈ Foggy Love
- F3C3C8
≈ Rose Reminder
Triada +120° +240°
- ECC4DC
Sugar Sweet
- D9D3AA
≈ Dull Sage
- ABDAEC
≈ Blue Feather
Komplementarna rozszczepiona +150° +210°
- ECC4DC
Sugar Sweet
- C5DAB5
≈ White Vienna
- A8DEDA
≈ High Altitude
Tetrada +90° +180° +270°
- ECC4DC
Sugar Sweet
- E9CCAB
≈ Sandpoint
- B2DDC6
≈ Quantum Effect
- B8D5F5
≈ Summer Birthday
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.55:1 · APCA Lc 25
Ag
AAANa czerni
WCAG 13.49:1 · APCA Lc 78
Najlepszy kolor tekstu: #000000
WCAG 13.49:1 (AAA) · APCA Lc 78
Contrast pairs
Fragmenty kodu
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);
}