#646264#646264
#646264 is a mid, near-neutral grey. Relative luminance 0.124; OKLCH L 49.9% C 0.004 H 325.7°. Best body text is #FFFFFF at 6.05:1 contrast (WCAG AA passes).
Color values
| HEX | #646264 |
|---|---|
| RGB | rgb(100, 98, 100) |
| HSL | hsl(300, 1%, 39%) |
| HSV | hsv(300, 2%, 39%) |
| CMYK | cmyk(0%, 2%, 0%, 60.8%) |
| CIE-LAB | lab(41.79, 1.20, -0.85) |
| CIE-LCH | lch(41.79, 1.47, 324.55°) |
| OKLab | oklab(49.86% 0.0033 -0.0022) |
| OKLCH | oklch(49.86% 0.004 325.7) |
| XYZ | xyz(11.9231, 12.3648, 13.8126) |
| Luminance | 0.1236 (WCAG relative) |
| Temperature | neutral |
| Family | grey |
Closest named colors
Dimgray
#696969
ΔE00 3.08
Slate Grey
#59656D
ΔE00 7.13
Gunmetal (survey)
#536267
ΔE00 8.52
Slate
#516572
ΔE00 10.16
Umber
#635147
ΔE00 10.57
Flint
#6F7A80
ΔE00 10.67
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#646264 #626462
analogous
#636264 #646264 #646263
triadic
#646264 #646462 #626464
tetradic
#646264 #646362 #626462 #626364
square
#646264 #646362 #626462 #626364
split-complementary
#646264 #636462 #626463
monochromatic
#262526 #454445 #646264 #838083 #A19FA1
Accessibility & contrast
On white
6.05
#646264 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.47
#646264 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #646264
6.05:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##646264 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##646264 | 1.00 | 6.05 | 3.47 | 6.05 |
| #FFFFFF | 6.05 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.47 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.05 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#626264
Deuteranopia (green-blind)
#626364
Tritanopia (blue-blind)
#646263
Achromatopsia (no color)
#636363
Design tokens & code
CSS
--color: #646264; /* rgb */ color: rgb(100, 98, 100); /* oklch */ color: oklch(49.9% 0.004 325.7);
Tailwind
colors: {
custom: {
50: '#908e90',
500: '#646264',
950: '#000000',
},
}SCSS
$custom: #646264; $custom-light: #908e90; $custom-dark: #000000;
JSON
{
"hex": "#646264",
"rgb": {
"r": 100,
"g": 98,
"b": 100
},
"hsl": {
"h": 300,
"s": 1.01,
"l": 38.824
},
"oklch": {
"l": 0.49864,
"c": 0.00399,
"h": 325.7
},
"luminance": 0.12365
}Semantic roles & 50–950 ramp
primary
#646264
secondary
#909290
accent
#AA7E7E
background
#F8F8F8
surface
#F0F0F0
border
#CBCBCB
text
#0C0C0C
muted
#7D7D7D