Benannte Farbe · #A1D7C9
Yucca Cream
Yucca Cream ist #A1D7C9: rgb(161 215 201), hsl(164 40% 74%), oklch(0.838 0.059 177.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Teal mean? → · Yucca Cream color name →
#A1D7C9
oklch(0.838 0.059 177.1)
Farbumrechnungen
- HEX
- #a1d7c9
- RGB
- rgb(161 215 201)
- HSL
- hsl(164 40% 74%)
- HWB
- hwb(164 63% 16%)
- OKLCH
- oklch(0.838 0.059 177.1)
- OKLab
- oklab(0.838 -0.059 0.003)
- CIE Lab
- lab(81.94 -20.27 0.98)
- LCH
- lch(81.94 20.3 177.2)
- CMYK
- cmyk(25% 0% 7% 16%)
Tints · Shades · Tones
Tints
- ABDBCE
- B4DFD4
- BEE3D9
- C7E7DE
- D1EBE4
- DAEFE9
- E3F3EF
- EDF7F4
- F6FBF9
Shades
- 8BBBAE
- 769F95
- 62857C
- 4E6B64
- 3C524C
- 2A3B36
- 192522
- 09110F
- 010202
Tones
- 9ECEC1
- 9BC5BA
- 98BCB2
- 95B3AB
- 92ABA4
- 8EA29C
- 8B9995
- 87918E
- 848887
Farbharmonien
Komplementär +180°
- A1D7C9
Yucca Cream
- EBBACA
≈ Madder Rose
Analog -30° +30°
- A1D7C9
Yucca Cream
- B1D5B4
≈ Enchanted Meadow
- 9DD5DD
≈ Ocean Cruise
Triadisch +120° +240°
- A1D7C9
Yucca Cream
- CDC2EC
≈ York Plum
- E8C1A5
≈ Adobe South
Geteilt komplementär +150° +210°
- A1D7C9
Yucca Cream
- DFBDDE
≈ Romantic Ballad
- EEBCB5
≈ Sweet Sherry
Tetradisch +90° +180° +270°
- A1D7C9
Yucca Cream
- B9C9F1
≈ Cuddle
- EBBACA
≈ Madder Rose
- DAC89E
≈ Surrey Cream
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.60:1 · APCA Lc 27
Ag
AAAAuf Schwarz
WCAG 13.07:1 · APCA Lc 76
Beste Textfarbe: #000000
WCAG 13.07:1 (AAA) · APCA Lc 76
Contrast pairs
Code-Snippets
CSS
:root {
--yucca-cream: #a1d7c9;
--yucca-cream-rgb: 161 215 201;
--yucca-cream-oklch: oklch(0.838 0.059 177.1);
}
.element {
color: var(--yucca-cream);
background-color: hsl(164 40% 74%);
border-color: oklch(0.838 0.059 177.1);
}Tailwind CSS v4
@theme {
--color-yucca-cream: #a1d7c9;
--color-yucca-cream-50: #e4fbf5;
--color-yucca-cream-100: #d4efe8;
--color-yucca-cream-200: #baddd5;
--color-yucca-cream-300: #97c2b8;
--color-yucca-cream-400: #79aa9e;
--color-yucca-cream-500: #599385;
--color-yucca-cream-600: #4c7d71;
--color-yucca-cream-700: #3d645a;
--color-yucca-cream-800: #2c4941;
--color-yucca-cream-900: #1d332d;
--color-yucca-cream-950: #0d1e1a;
}SCSS
$yucca-cream: #a1d7c9;
$yucca-cream-rgb: 161, 215, 201;
$yucca-cream-light: mix(#fff, $yucca-cream, 20%);
$yucca-cream-dark: mix(#000, $yucca-cream, 20%);
.element {
color: $yucca-cream;
box-shadow: 0 0 0 2px rgba($yucca-cream, 0.35);
}