Benannte Farbe · #D5D8C9
Light Green Alabaster
Light Green Alabaster ist #D5D8C9: rgb(213 216 201), hsl(72 16% 82%), oklch(0.876 0.02 116). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Light Green Alabaster color name →
#D5D8C9
oklch(0.876 0.02 116)
Farbumrechnungen
- HEX
- #d5d8c9
- RGB
- rgb(213 216 201)
- HSL
- hsl(72 16% 82%)
- HWB
- hwb(72 79% 15%)
- OKLCH
- oklch(0.876 0.02 116)
- OKLab
- oklab(0.876 -0.009 0.018)
- CIE Lab
- lab(85.79 -3.03 7.05)
- LCH
- lch(85.79 7.67 113.2)
- CMYK
- cmyk(1% 0% 7% 15%)
Tints · Shades · Tones
Tints
- D9DCCE
- DDE0D4
- E1E4D9
- E6E7DE
- EAEBE4
- EEEFE9
- F2F3EF
- F6F7F4
- FBFBFA
Shades
- B9BCAE
- 9EA095
- 83857C
- 6A6B64
- 51534C
- 3A3B36
- 242522
- 10110F
- 020202
Tones
- CCCFC1
- C3C6BA
- BBBDB3
- B2B4AB
- AAABA4
- A1A29D
- 999A95
- 90918E
- 888887
Farbharmonien
Komplementär +180°
- D5D8C9
Light Green Alabaster
- D7D4E2
≈ Light Gregorio Garden
Analog -30° +30°
- D5D8C9
Light Green Alabaster
- DCD5C7
≈ Polished Limestone
- CEDACE
≈ Light Gentle Calm
Triadisch +120° +240°
- D5D8C9
Light Green Alabaster
- CAD9E2
≈ Vanilla Ice Smoke
- E2D1D6
≈ Santolina Blooms
Geteilt komplementär +150° +210°
- D5D8C9
Light Green Alabaster
- D0D6E4
≈ Jewellery White
- DED2DD
≈ Timid Violet
Tetradisch +90° +180° +270°
- D5D8C9
Light Green Alabaster
- C7DADD
≈ Wan Blue
- D7D4E2
≈ Light Gregorio Garden
- E3D1CF
≈ Light Lavender Blush
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.44:1 · APCA Lc 21
Ag
AAAAuf Schwarz
WCAG 14.49:1 · APCA Lc 82
Beste Textfarbe: #000000
WCAG 14.49:1 (AAA) · APCA Lc 82
Contrast pairs
Code-Snippets
CSS
:root {
--light-green-alabaster: #d5d8c9;
--light-green-alabaster-rgb: 213 216 201;
--light-green-alabaster-oklch: oklch(0.876 0.02 116);
}
.element {
color: var(--light-green-alabaster);
background-color: hsl(72 16% 82%);
border-color: oklch(0.876 0.02 116);
}Tailwind CSS v4
@theme {
--color-light-green-alabaster: #d5d8c9;
--color-light-green-alabaster-50: #f4f6ef;
--color-light-green-alabaster-100: #e7e9e1;
--color-light-green-alabaster-200: #d3d6cc;
--color-light-green-alabaster-300: #b6b9ad;
--color-light-green-alabaster-400: #9da093;
--color-light-green-alabaster-500: #858879;
--color-light-green-alabaster-600: #717366;
--color-light-green-alabaster-700: #5a5c52;
--color-light-green-alabaster-800: #42433b;
--color-light-green-alabaster-900: #2e2e29;
--color-light-green-alabaster-950: #1a1b17;
}SCSS
$light-green-alabaster: #d5d8c9;
$light-green-alabaster-rgb: 213, 216, 201;
$light-green-alabaster-light: mix(#fff, $light-green-alabaster, 20%);
$light-green-alabaster-dark: mix(#000, $light-green-alabaster, 20%);
.element {
color: $light-green-alabaster;
box-shadow: 0 0 0 2px rgba($light-green-alabaster, 0.35);
}