Named color · #B1B5A0
Environmental
Environmental is #B1B5A0: rgb(177 181 160), hsl(71 12% 67%), oklch(0.764 0.03 115.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Environmental color name →
#B1B5A0
oklch(0.764 0.03 115.9)
Color conversions
- HEX
- #b1b5a0
- RGB
- rgb(177 181 160)
- HSL
- hsl(71 12% 67%)
- HWB
- hwb(71 63% 29%)
- OKLCH
- oklch(0.764 0.03 115.9)
- OKLab
- oklab(0.764 -0.013 0.027)
- CIE Lab
- lab(72.92 -4.26 10.24)
- LCH
- lch(72.92 11.09 112.6)
- CMYK
- cmyk(2% 0% 12% 29%)
Tints · Shades · Tones
Tints
- B9BCA9
- C0C3B2
- C8CBBC
- D0D2C5
- D7D9CF
- DFE1D8
- E7E8E2
- EFF0EB
- F7F7F5
Shades
- 999D8B
- 838676
- 6C6F61
- 57594E
- 42443B
- 2F3029
- 1C1D19
- 0C0C09
- 010201
Tones
- ACB09D
- A7AA9A
- A2A596
- 9D9F93
- 989A90
- 93958D
- 8E908A
- 8A8A86
- 858583
Color harmonies
Complementary +180°
- B1B5A0
Environmental
- B4AFC4
≈ Noble Purple
Analogous -30° +30°
- B1B5A0
Environmental
- BBB19E
≈ Cannery Park
- A7B8A7
≈ Thrush Egg
Triadic +120° +240°
- B1B5A0
Environmental
- A1B6C3
≈ Country Air
- C3ABB3
≈ Bedroom Plum
Split-complementary +150° +210°
- B1B5A0
Environmental
- A9B2C6
≈ Perseverance
- BDACBD
≈ Lavender Frost
Tetradic +90° +180° +270°
- B1B5A0
Environmental
- 9DB8BC
≈ Windswept Clouds
- B4AFC4
≈ Noble Purple
- C5ACA9
≈ Dusky
Contrast & accessibility
Ag
FailOn white
WCAG 2.10:1 · APCA Lc 41
Ag
AAAOn black
WCAG 9.98:1 · APCA Lc 61
Best text color: #000000
WCAG 9.98:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--environmental: #b1b5a0;
--environmental-rgb: 177 181 160;
--environmental-oklch: oklch(0.764 0.03 115.9);
}
.element {
color: var(--environmental);
background-color: hsl(71 12% 67%);
border-color: oklch(0.764 0.03 115.9);
}Tailwind CSS v4
@theme {
--color-environmental: #b1b5a0;
--color-environmental-50: #f4f6ed;
--color-environmental-100: #e7e9de;
--color-environmental-200: #d3d6c8;
--color-environmental-300: #b6baa9;
--color-environmental-400: #9da18d;
--color-environmental-500: #858973;
--color-environmental-600: #707461;
--color-environmental-700: #5a5d4e;
--color-environmental-800: #424438;
--color-environmental-900: #2e2f26;
--color-environmental-950: #1a1b15;
}SCSS
$environmental: #b1b5a0;
$environmental-rgb: 177, 181, 160;
$environmental-light: mix(#fff, $environmental, 20%);
$environmental-dark: mix(#000, $environmental, 20%);
.element {
color: $environmental;
box-shadow: 0 0 0 2px rgba($environmental, 0.35);
}