Named color · #B2B2AD
Steam Engine
Steam Engine is #B2B2AD: rgb(178 178 173), hsl(60 3% 69%), oklch(0.762 0.007 106.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Steam Engine color name →
#B2B2AD
oklch(0.762 0.007 106.6)
Color conversions
- HEX
- #b2b2ad
- RGB
- rgb(178 178 173)
- HSL
- hsl(60 3% 69%)
- HWB
- hwb(60 68% 30%)
- OKLCH
- oklch(0.762 0.007 106.6)
- OKLab
- oklab(0.762 -0.002 0.007)
- CIE Lab
- lab(72.46 -0.69 2.56)
- LCH
- lch(72.46 2.65 105)
- CMYK
- cmyk(0% 0% 3% 30%)
Tints · Shades · Tones
Tints
- B9B9B5
- C1C1BD
- C9C9C5
- D0D0CD
- D8D8D5
- E0E0DE
- E7E7E6
- EFEFEE
- F7F7F7
Shades
- 9A9A96
- 83837F
- 6D6D6A
- 575755
- 434341
- 2F2F2D
- 1D1D1B
- 0C0C0B
- 010101
Tones
- ADADA8
- A8A8A4
- A3A39F
- 9E9E9B
- 999996
- 949492
- 8F8F8D
- 8A8A89
- 858584
Color harmonies
Complementary +180°
- B2B2AD
Steam Engine
- B1B1B6
≈ Harbour Fog
Analogous -30° +30°
- B2B2AD
Steam Engine
- B4B1AD
≈ Colonnade Grey
- B0B3AE
≈ Steam Engine
Triadic +120° +240°
- B2B2AD
Steam Engine
- ADB3B5
≈ High Rise
- B5B0B2
≈ Swanky Grey
Split-complementary +150° +210°
- B2B2AD
Steam Engine
- AFB2B6
≈ High Rise
- B3B0B5
≈ Swanky Grey
Tetradic +90° +180° +270°
- B2B2AD
Steam Engine
- ADB3B3
≈ High Rise
- B1B1B6
≈ Harbour Fog
- B6B0B0
≈ Grey Scape
Contrast & accessibility
Ag
FailOn white
WCAG 2.12:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.86:1 · APCA Lc 60
Best text color: #000000
WCAG 9.86:1 (AAA) · APCA Lc 60
Contrast pairs
Code snippets
CSS
:root {
--steam-engine: #b2b2ad;
--steam-engine-rgb: 178 178 173;
--steam-engine-oklch: oklch(0.762 0.007 106.6);
}
.element {
color: var(--steam-engine);
background-color: hsl(60 3% 69%);
border-color: oklch(0.762 0.007 106.6);
}Tailwind CSS v4
@theme {
--color-steam-engine: #b2b2ad;
--color-steam-engine-50: #f5f5f3;
--color-steam-engine-100: #e8e8e5;
--color-steam-engine-200: #d4d4d1;
--color-steam-engine-300: #b7b8b4;
--color-steam-engine-400: #9f9f9a;
--color-steam-engine-500: #868681;
--color-steam-engine-600: #72726d;
--color-steam-engine-700: #5b5b57;
--color-steam-engine-800: #434240;
--color-steam-engine-900: #2e2e2c;
--color-steam-engine-950: #1b1b19;
}SCSS
$steam-engine: #b2b2ad;
$steam-engine-rgb: 178, 178, 173;
$steam-engine-light: mix(#fff, $steam-engine, 20%);
$steam-engine-dark: mix(#000, $steam-engine, 20%);
.element {
color: $steam-engine;
box-shadow: 0 0 0 2px rgba($steam-engine, 0.35);
}