Nazwany kolor · #C8E3D2
Duck Egg Cream
Duck Egg Cream to #C8E3D2: rgb(200 227 210), hsl(142 33% 84%), oklch(0.891 0.037 158). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Duck Egg Cream color name →
#C8E3D2
oklch(0.891 0.037 158)
Konwersje koloru
- HEX
- #c8e3d2
- RGB
- rgb(200 227 210)
- HSL
- hsl(142 33% 84%)
- HWB
- hwb(142 78% 11%)
- OKLCH
- oklch(0.891 0.037 158)
- OKLab
- oklab(0.891 -0.034 0.014)
- CIE Lab
- lab(87.88 -11.65 5.16)
- LCH
- lch(87.88 12.75 156.1)
- CMYK
- cmyk(12% 0% 7% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CDE6D6
- D3E9DB
- D8EBDF
- DEEEE4
- E3F1E8
- E9F4ED
- EEF7F1
- F4F9F6
- F9FCFA
Odcienie ciemniejsze
- AEC5B6
- 94A89B
- 7B8C81
- 637168
- 4C5750
- 363F39
- 212724
- 0F1210
- 020302
Tony
- C1D9C9
- B9CEC1
- B2C4B9
- ABBAB0
- A3B0A8
- 9CA6A0
- 959D98
- 8E9390
- 878988
Harmonie kolorów
Komplementarna +180°
- C8E3D2
Duck Egg Cream
- ECD2E4
≈ Champagne Elegance
Analogowa -30° +30°
- C8E3D2
Duck Egg Cream
- D4E0C7
≈ Dream Seascape
- C1E4DF
≈ Windwood Spring
Triada +120° +240°
- C8E3D2
Duck Egg Cream
- D5D9F4
≈ Flax Bloom
- F2D3CA
≈ Cool Cantaloupe
Komplementarna rozszczepiona +150° +210°
- C8E3D2
Duck Egg Cream
- E2D5EE
≈ Light Purity
- F2D2D6
≈ Impatiens Petal
Tetrada +90° +180° +270°
- C8E3D2
Duck Egg Cream
- C9DEF3
≈ Blue Booties
- ECD2E4
≈ Champagne Elegance
- ECD7C2
≈ Burrito
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.36:1 · APCA Lc 18
Ag
AAANa czerni
WCAG 15.37:1 · APCA Lc 86
Najlepszy kolor tekstu: #000000
WCAG 15.37:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--duck-egg-cream: #c8e3d2;
--duck-egg-cream-rgb: 200 227 210;
--duck-egg-cream-oklch: oklch(0.891 0.037 158);
}
.element {
color: var(--duck-egg-cream);
background-color: hsl(142 33% 84%);
border-color: oklch(0.891 0.037 158);
}Tailwind CSS v4
@theme {
--color-duck-egg-cream: #c8e3d2;
--color-duck-egg-cream-50: #edf9f1;
--color-duck-egg-cream-100: #deece4;
--color-duck-egg-cream-200: #c8d9cf;
--color-duck-egg-cream-300: #a8beb1;
--color-duck-egg-cream-400: #8da596;
--color-duck-egg-cream-500: #728e7d;
--color-duck-egg-cream-600: #61786a;
--color-duck-egg-cream-700: #4d6055;
--color-duck-egg-cream-800: #38463d;
--color-duck-egg-cream-900: #27312a;
--color-duck-egg-cream-950: #151d18;
}SCSS
$duck-egg-cream: #c8e3d2;
$duck-egg-cream-rgb: 200, 227, 210;
$duck-egg-cream-light: mix(#fff, $duck-egg-cream, 20%);
$duck-egg-cream-dark: mix(#000, $duck-egg-cream, 20%);
.element {
color: $duck-egg-cream;
box-shadow: 0 0 0 2px rgba($duck-egg-cream, 0.35);
}