Benannte Farbe · #ECEAD9
Swiss Cream
Swiss Cream ist #ECEAD9: rgb(236 234 217), hsl(54 33% 89%), oklch(0.934 0.023 101.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Swiss Cream color name →
#ECEAD9
oklch(0.934 0.023 101.4)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- EEECDD
- F0EEE1
- F2F0E4
- F4F2E8
- F5F4EC
- F7F7F0
- F9F9F4
- FBFBF7
- FDFDFB
Shades
- CDCBBC
- AFAEA1
- 929186
- 76756C
- 5B5A53
- 42413B
- 292925
- 131311
- 030302
Tones
- E1DFD0
- D5D4C7
- CAC9BD
- BFBEB4
- B4B4AB
- AAA9A3
- 9F9F9A
- 959491
- 8A8A89
Farbharmonien
Komplementär +180°
- ECEAD9
Swiss Cream
- E6E8F9
≈ Glitter
Analog -30° +30°
- ECEAD9
Swiss Cream
- F3E7D9
≈ Ballet White
- E4EDDD
≈ Establish Mint
Triadisch +120° +240°
- ECEAD9
Swiss Cream
- DAEDF4
≈ Ice Fishing
- F5E4EE
≈ Petal Poise
Geteilt komplementär +150° +210°
- ECEAD9
Swiss Cream
- DFEBF8
≈ Husky
- EEE5F5
≈ Holographic Lavender
Tetradisch +90° +180° +270°
- ECEAD9
Swiss Cream
- D9EEED
≈ Blue Green Rules
- E6E8F9
≈ Glitter
- F8E3E5
≈ Eased Pink
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.21:1 · APCA Lc 10
Ag
AAAAuf Schwarz
WCAG 17.33:1 · APCA Lc 94
Beste Textfarbe: #000000
WCAG 17.33:1 (AAA) · APCA Lc 94
Contrast pairs
Code-Snippets
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);
}