Named color · #B1D4B7
Enchanted Meadow
Enchanted Meadow is #B1D4B7: rgb(177 212 183), hsl(130 29% 76%), oklch(0.836 0.055 150). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Enchanted Meadow color name →
#B1D4B7
oklch(0.836 0.055 150)
Color conversions
- HEX
- #b1d4b7
- RGB
- rgb(177 212 183)
- HSL
- hsl(130 29% 76%)
- HWB
- hwb(130 69% 17%)
- OKLCH
- oklch(0.836 0.055 150)
- OKLab
- oklab(0.836 -0.047 0.027)
- CIE Lab
- lab(81.76 -16.21 10.37)
- LCH
- lch(81.76 19.25 147.4)
- CMYK
- cmyk(17% 0% 14% 17%)
Tints · Shades · Tones
Tints
- B9D8BE
- C1DDC5
- C8E1CC
- D0E5D3
- D8E9DB
- E0EEE2
- E7F2E9
- EFF6F0
- F7FBF8
Shades
- 99B89F
- 839D87
- 6C8370
- 57695A
- 425145
- 2F3A31
- 1C241E
- 0C100C
- 010202
Tones
- ACCBB1
- A7C3AC
- A2BAA6
- 9DB2A1
- 99A99B
- 94A196
- 8F9890
- 8A908B
- 858885
Color harmonies
Complementary +180°
- B1D4B7
Enchanted Meadow
- DFBDDB
≈ Faded Violet
Analogous -30° +30°
- B1D4B7
Enchanted Meadow
- C4CFA8
≈ Landscape
- A3D6CB
≈ Yucca Cream
Triadic +120° +240°
- B1D4B7
Enchanted Meadow
- BBC8EE
≈ Pale Wisteria
- EBBDB5
≈ Rosewood Dreams
Split-complementary +150° +210°
- B1D4B7
Enchanted Meadow
- CEC2E8
≈ York Plum
- E9BBC8
≈ Pink Mist
Tetradic +90° +180° +270°
- B1D4B7
Enchanted Meadow
- AACFEA
≈ Gentle Wind
- DFBDDB
≈ Faded Violet
- E5C2A6
≈ Adobe South
Contrast & accessibility
Ag
FailOn white
WCAG 1.61:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.97:1 · APCA Lc 75
Best text color: #000000
WCAG 12.97:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--enchanted-meadow: #b1d4b7;
--enchanted-meadow-rgb: 177 212 183;
--enchanted-meadow-oklch: oklch(0.836 0.055 150);
}
.element {
color: var(--enchanted-meadow);
background-color: hsl(130 29% 76%);
border-color: oklch(0.836 0.055 150);
}Tailwind CSS v4
@theme {
--color-enchanted-meadow: #b1d4b7;
--color-enchanted-meadow-50: #eafaee;
--color-enchanted-meadow-100: #dbeddf;
--color-enchanted-meadow-200: #c4dbc9;
--color-enchanted-meadow-300: #a3c0aa;
--color-enchanted-meadow-400: #88a88e;
--color-enchanted-meadow-500: #6c9173;
--color-enchanted-meadow-600: #5c7a62;
--color-enchanted-meadow-700: #49624e;
--color-enchanted-meadow-800: #364838;
--color-enchanted-meadow-900: #253226;
--color-enchanted-meadow-950: #131e14;
}SCSS
$enchanted-meadow: #b1d4b7;
$enchanted-meadow-rgb: 177, 212, 183;
$enchanted-meadow-light: mix(#fff, $enchanted-meadow, 20%);
$enchanted-meadow-dark: mix(#000, $enchanted-meadow, 20%);
.element {
color: $enchanted-meadow;
box-shadow: 0 0 0 2px rgba($enchanted-meadow, 0.35);
}