Named color · #5C5E5F
Graphic Charcoal
Graphic Charcoal is #5C5E5F: rgb(92 94 95), hsl(200 2% 37%), oklch(0.48 0.003 228.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Graphic Charcoal color name →
#5C5E5F
oklch(0.48 0.003 228.8)
Color conversions
- HEX
- #5c5e5f
- RGB
- rgb(92 94 95)
- HSL
- hsl(200 2% 37%)
- HWB
- hwb(200 36% 63%)
- OKLCH
- oklch(0.48 0.003 228.8)
- OKLab
- oklab(0.48 -0.002 -0.002)
- CIE Lab
- lab(39.75 -0.66 -0.87)
- LCH
- lch(39.75 1.09 232.8)
- CMYK
- cmyk(3% 1% 0% 63%)
Tints · Shades · Tones
Tints
- 6B6D6E
- 7A7C7D
- 8A8B8C
- 9A9B9C
- AAABAB
- BABBBC
- CBCCCC
- DCDDDD
- EDEEEE
Shades
- 4F5152
- 424444
- 363738
- 2A2B2C
- 1F1F20
- 141415
- 0A0A0A
- 030303
- 000000
Tones
- 606162
- 636565
- 676869
- 6A6B6C
- 6E6F6F
- 717273
- 757676
- 797979
- 7C7D7D
Color harmonies
Complementary +180°
- 5C5E5F
Graphic Charcoal
- 5F5D5C
≈ Asphalt Grey
Analogous -30° +30°
- 5C5E5F
Graphic Charcoal
- 5C5E5E
≈ Graphic Charcoal
- 5D5E5F
≈ Graphic Charcoal
Triadic +120° +240°
- 5C5E5F
Graphic Charcoal
- 5F5D5E
≈ Rhine Castle
- 5E5E5C
≈ Soot Veil
Split-complementary +150° +210°
- 5C5E5F
Graphic Charcoal
- 5F5D5D
≈ Iron
- 5F5D5C
≈ Asphalt Grey
Tetradic +90° +180° +270°
- 5C5E5F
Graphic Charcoal
- 5E5D5F
≈ Rhine Castle
- 5F5D5C
≈ Asphalt Grey
- 5D5E5C
≈ Soot Veil
Contrast & accessibility
Ag
AAOn white
WCAG 6.51:1 · APCA Lc 82
Ag
FailOn black
WCAG 3.22:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.51:1 (AA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--graphic-charcoal: #5c5e5f;
--graphic-charcoal-rgb: 92 94 95;
--graphic-charcoal-oklch: oklch(0.48 0.003 228.8);
}
.element {
color: var(--graphic-charcoal);
background-color: hsl(200 2% 37%);
border-color: oklch(0.48 0.003 228.8);
}Tailwind CSS v4
@theme {
--color-graphic-charcoal: #5c5e5f;
--color-graphic-charcoal-50: #f4f5f6;
--color-graphic-charcoal-100: #e7e8e9;
--color-graphic-charcoal-200: #d3d4d5;
--color-graphic-charcoal-300: #b6b8b8;
--color-graphic-charcoal-400: #9d9fa0;
--color-graphic-charcoal-500: #848688;
--color-graphic-charcoal-600: #707273;
--color-graphic-charcoal-700: #595b5c;
--color-graphic-charcoal-800: #414343;
--color-graphic-charcoal-900: #2d2e2e;
--color-graphic-charcoal-950: #1a1b1b;
}SCSS
$graphic-charcoal: #5c5e5f;
$graphic-charcoal-rgb: 92, 94, 95;
$graphic-charcoal-light: mix(#fff, $graphic-charcoal, 20%);
$graphic-charcoal-dark: mix(#000, $graphic-charcoal, 20%);
.element {
color: $graphic-charcoal;
box-shadow: 0 0 0 2px rgba($graphic-charcoal, 0.35);
}