Named color · #BCC3C7
Metallic
Metallic is #BCC3C7: rgb(188 195 199), hsl(202 9% 76%), oklch(0.813 0.01 232.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Metallic color name →
#BCC3C7
oklch(0.813 0.01 232.4)
Color conversions
- HEX
- #bcc3c7
- RGB
- rgb(188 195 199)
- HSL
- hsl(202 9% 76%)
- HWB
- hwb(202 74% 22%)
- OKLCH
- oklch(0.813 0.01 232.4)
- OKLab
- oklab(0.813 -0.006 -0.008)
- CIE Lab
- lab(78.33 -1.93 -2.9)
- LCH
- lch(78.33 3.48 236.4)
- CMYK
- cmyk(6% 2% 0% 22%)
Tints · Shades · Tones
Tints
- C3C9CC
- C9CFD2
- D0D5D8
- D6DBDD
- DDE1E3
- E4E7E8
- EBEDEE
- F1F3F4
- F8F9F9
Shades
- A3A9AD
- 8B9093
- 73787A
- 5D6062
- 474A4C
- 323436
- 1F2021
- 0D0E0E
- 020202
Tones
- B6BCC0
- B0B5B8
- AAAEB1
- A4A8AA
- 9DA1A3
- 989A9C
- 929495
- 8C8D8E
- 868687
Color harmonies
Complementary +180°
- BCC3C7
Metallic
- C7C0BC
≈ Modest Silver
Analogous -30° +30°
- BCC3C7
Metallic
- BBC4C4
≈ Silver Whiskers
- BEC2C8
≈ Metallic
Triadic +120° +240°
- BCC3C7
Metallic
- C7BFC2
≈ Easter Rabbit
- C2C2BC
≈ Gull Feather
Split-complementary +150° +210°
- BCC3C7
Metallic
- C8BFBF
≈ Nantucket Mist
- C5C1BB
≈ San Francisco Fog
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.78:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.76:1 · APCA Lc 70
Best text color: #000000
WCAG 11.76:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--metallic: #bcc3c7;
--metallic-rgb: 188 195 199;
--metallic-oklch: oklch(0.813 0.01 232.4);
}
.element {
color: var(--metallic);
background-color: hsl(202 9% 76%);
border-color: oklch(0.813 0.01 232.4);
}Tailwind CSS v4
@theme {
--color-metallic: #bcc3c7;
--color-metallic-50: #f3f6f7;
--color-metallic-100: #e5e8eb;
--color-metallic-200: #d0d5d8;
--color-metallic-300: #b3b8bc;
--color-metallic-400: #999fa3;
--color-metallic-500: #80878b;
--color-metallic-600: #6d7376;
--color-metallic-700: #575c5e;
--color-metallic-800: #3f4345;
--color-metallic-900: #2b2e30;
--color-metallic-950: #191b1c;
}SCSS
$metallic: #bcc3c7;
$metallic-rgb: 188, 195, 199;
$metallic-light: mix(#fff, $metallic, 20%);
$metallic-dark: mix(#000, $metallic, 20%);
.element {
color: $metallic;
box-shadow: 0 0 0 2px rgba($metallic, 0.35);
}