Named color · #B2B1AD
Colonnade Grey
Colonnade Grey is #B2B1AD: rgb(178 177 173), hsl(48 3% 69%), oklch(0.76 0.006 95.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Colonnade Grey color name →
#B2B1AD
oklch(0.76 0.006 95.1)
Color conversions
- HEX
- #b2b1ad
- RGB
- rgb(178 177 173)
- HSL
- hsl(48 3% 69%)
- HWB
- hwb(48 68% 30%)
- OKLCH
- oklch(0.76 0.006 95.1)
- OKLab
- oklab(0.76 -0.001 0.006)
- CIE Lab
- lab(72.2 -0.18 2.18)
- LCH
- lch(72.2 2.19 94.8)
- CMYK
- cmyk(0% 1% 3% 30%)
Tints · Shades · Tones
Tints
- B9B9B5
- C1C0BD
- C9C8C5
- D0D0CD
- D8D7D5
- E0DFDD
- E7E7E6
- EFEFEE
- F7F7F7
Shades
- 9A9996
- 83837F
- 6D6C6A
- 575755
- 434241
- 2F2F2D
- 1D1C1B
- 0C0C0B
- 010101
Tones
- ADACA8
- A8A7A4
- A3A29F
- 9E9D9B
- 999896
- 949392
- 8F8E8D
- 8A8A89
- 858584
Color harmonies
Complementary +180°
- B2B1AD
Colonnade Grey
- B0B1B5
≈ Harbour Fog
Analogous -30° +30°
- B2B1AD
Colonnade Grey
- B4B0AD
≈ Bashful Emu
- B0B2AE
≈ Steam Engine
Triadic +120° +240°
- B2B1AD
Colonnade Grey
- ADB2B3
≈ High Rise
- B3B0B2
≈ Palladium
Split-complementary +150° +210°
- B2B1AD
Colonnade Grey
- AEB1B4
≈ Harbour Fog
- B2B0B4
≈ Harbour Fog
Tetradic +90° +180° +270°
- B2B1AD
Colonnade Grey
- ADB2B1
≈ Tin Foil
- B0B1B5
≈ Harbour Fog
- B4B0B0
≈ Warm Shale
Contrast & accessibility
Ag
FailOn white
WCAG 2.14:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.78:1 · APCA Lc 60
Best text color: #000000
WCAG 9.78:1 (AAA) · APCA Lc 60
Contrast pairs
Code snippets
CSS
:root {
--colonnade-grey: #b2b1ad;
--colonnade-grey-rgb: 178 177 173;
--colonnade-grey-oklch: oklch(0.76 0.006 95.1);
}
.element {
color: var(--colonnade-grey);
background-color: hsl(48 3% 69%);
border-color: oklch(0.76 0.006 95.1);
}Tailwind CSS v4
@theme {
--color-colonnade-grey: #b2b1ad;
--color-colonnade-grey-50: #f5f5f3;
--color-colonnade-grey-100: #e8e8e6;
--color-colonnade-grey-200: #d5d4d1;
--color-colonnade-grey-300: #b8b7b4;
--color-colonnade-grey-400: #9f9e9b;
--color-colonnade-grey-500: #878682;
--color-colonnade-grey-600: #72716e;
--color-colonnade-grey-700: #5b5b58;
--color-colonnade-grey-800: #434240;
--color-colonnade-grey-900: #2e2e2c;
--color-colonnade-grey-950: #1b1b19;
}SCSS
$colonnade-grey: #b2b1ad;
$colonnade-grey-rgb: 178, 177, 173;
$colonnade-grey-light: mix(#fff, $colonnade-grey, 20%);
$colonnade-grey-dark: mix(#000, $colonnade-grey, 20%);
.element {
color: $colonnade-grey;
box-shadow: 0 0 0 2px rgba($colonnade-grey, 0.35);
}