Named color · #B6B095
Heathered Grey
Heathered Grey is #B6B095: rgb(182 176 149), hsl(49 18% 65%), oklch(0.755 0.038 96.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Heathered Grey color name →
#B6B095
oklch(0.755 0.038 96.8)
Color conversions
- HEX
- #b6b095
- RGB
- rgb(182 176 149)
- HSL
- hsl(49 18% 65%)
- HWB
- hwb(49 58% 29%)
- OKLCH
- oklch(0.755 0.038 96.8)
- OKLab
- oklab(0.755 -0.005 0.038)
- CIE Lab
- lab(71.79 -1.17 14.7)
- LCH
- lch(71.79 14.75 94.5)
- CMYK
- cmyk(0% 3% 18% 29%)
Tints · Shades · Tones
Tints
- BDB89F
- C4BFAA
- CBC7B4
- D3CFBF
- DAD7C9
- E1DFD4
- E9E7DE
- F0EFE9
- F7F7F4
Shades
- 9E9981
- 86826D
- 6F6C5A
- 595648
- 444237
- 302E26
- 1D1C16
- 0C0B08
- 020101
Tones
- B0AB93
- ABA691
- A5A18F
- A09D8D
- 9B988B
- 959389
- 908E86
- 8B8984
- 858582
Color harmonies
Complementary +180°
- B6B095
Heathered Grey
- A9AEC8
≈ Meadow Phlox
Analogous -30° +30°
- B6B095
Heathered Grey
- C0AB97
≈ Western Sandstone
- A9B49B
≈ Mow the Lawn
Triadic +120° +240°
- B6B095
Heathered Grey
- 95B6BF
≈ Tahoe Blue
- C0A7B8
≈ Pansy Posie
Split-complementary +150° +210°
- B6B095
Heathered Grey
- 9DB2C7
≈ Aerial View
- B6AAC3
≈ Velour
Tetradic +90° +180° +270°
- B6B095
Heathered Grey
- 95B8B3
≈ Teal Tree
- A9AEC8
≈ Meadow Phlox
- C6A6AB
≈ Dutchess Dawn
Contrast & accessibility
Ag
FailOn white
WCAG 2.17:1 · APCA Lc 43
Ag
AAAOn black
WCAG 9.63:1 · APCA Lc 59
Best text color: #000000
WCAG 9.63:1 (AAA) · APCA Lc 59
Contrast pairs
Code snippets
CSS
:root {
--heathered-grey: #b6b095;
--heathered-grey-rgb: 182 176 149;
--heathered-grey-oklch: oklch(0.755 0.038 96.8);
}
.element {
color: var(--heathered-grey);
background-color: hsl(49 18% 65%);
border-color: oklch(0.755 0.038 96.8);
}Tailwind CSS v4
@theme {
--color-heathered-grey: #b6b095;
--color-heathered-grey-50: #f8f6e9;
--color-heathered-grey-100: #ebe8da;
--color-heathered-grey-200: #d8d5c3;
--color-heathered-grey-300: #bcb8a2;
--color-heathered-grey-400: #a49f86;
--color-heathered-grey-500: #8d876a;
--color-heathered-grey-600: #77725a;
--color-heathered-grey-700: #5f5b48;
--color-heathered-grey-800: #464234;
--color-heathered-grey-900: #312e23;
--color-heathered-grey-950: #1d1b12;
}SCSS
$heathered-grey: #b6b095;
$heathered-grey-rgb: 182, 176, 149;
$heathered-grey-light: mix(#fff, $heathered-grey, 20%);
$heathered-grey-dark: mix(#000, $heathered-grey, 20%);
.element {
color: $heathered-grey;
box-shadow: 0 0 0 2px rgba($heathered-grey, 0.35);
}