Nazwany kolor · #ECEAD9
Swiss Cream
Swiss Cream to #ECEAD9: rgb(236 234 217), hsl(54 33% 89%), oklch(0.934 0.023 101.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Swiss Cream color name →
#ECEAD9
oklch(0.934 0.023 101.4)
Konwersje koloru
- HEX
- #ecead9
- RGB
- rgb(236 234 217)
- HSL
- hsl(54 33% 89%)
- HWB
- hwb(54 85% 7%)
- OKLCH
- oklch(0.934 0.023 101.4)
- OKLab
- oklab(0.934 -0.004 0.022)
- CIE Lab
- lab(92.51 -1.46 8.54)
- LCH
- lch(92.51 8.66 99.7)
- CMYK
- cmyk(0% 1% 8% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- EEECDD
- F0EEE1
- F2F0E4
- F4F2E8
- F5F4EC
- F7F7F0
- F9F9F4
- FBFBF7
- FDFDFB
Odcienie ciemniejsze
- CDCBBC
- AFAEA1
- 929186
- 76756C
- 5B5A53
- 42413B
- 292925
- 131311
- 030302
Tony
- E1DFD0
- D5D4C7
- CAC9BD
- BFBEB4
- B4B4AB
- AAA9A3
- 9F9F9A
- 959491
- 8A8A89
Harmonie kolorów
Komplementarna +180°
- ECEAD9
Swiss Cream
- E6E8F9
≈ Glitter
Analogowa -30° +30°
- ECEAD9
Swiss Cream
- F3E7D9
≈ Ballet White
- E4EDDD
≈ Establish Mint
Triada +120° +240°
- ECEAD9
Swiss Cream
- DAEDF4
≈ Ice Fishing
- F5E4EE
≈ Petal Poise
Komplementarna rozszczepiona +150° +210°
- ECEAD9
Swiss Cream
- DFEBF8
≈ Husky
- EEE5F5
≈ Holographic Lavender
Tetrada +90° +180° +270°
- ECEAD9
Swiss Cream
- D9EEED
≈ Blue Green Rules
- E6E8F9
≈ Glitter
- F8E3E5
≈ Eased Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.21:1 · APCA Lc 10
Ag
AAANa czerni
WCAG 17.33:1 · APCA Lc 94
Najlepszy kolor tekstu: #000000
WCAG 17.33:1 (AAA) · APCA Lc 94
Contrast pairs
Fragmenty kodu
CSS
:root {
--swiss-cream: #ecead9;
--swiss-cream-rgb: 236 234 217;
--swiss-cream-oklch: oklch(0.934 0.023 101.4);
}
.element {
color: var(--swiss-cream);
background-color: hsl(54 33% 89%);
border-color: oklch(0.934 0.023 101.4);
}Tailwind CSS v4
@theme {
--color-swiss-cream: #ecead9;
--color-swiss-cream-50: #f6f5ee;
--color-swiss-cream-100: #e9e8e0;
--color-swiss-cream-200: #d6d5ca;
--color-swiss-cream-300: #b9b8ab;
--color-swiss-cream-400: #a19f90;
--color-swiss-cream-500: #898776;
--color-swiss-cream-600: #747264;
--color-swiss-cream-700: #5d5b50;
--color-swiss-cream-800: #44433a;
--color-swiss-cream-900: #2f2e28;
--color-swiss-cream-950: #1c1b16;
}SCSS
$swiss-cream: #ecead9;
$swiss-cream-rgb: 236, 234, 217;
$swiss-cream-light: mix(#fff, $swiss-cream, 20%);
$swiss-cream-dark: mix(#000, $swiss-cream, 20%);
.element {
color: $swiss-cream;
box-shadow: 0 0 0 2px rgba($swiss-cream, 0.35);
}