Named color · #505555
Mako
Mako is #505555: rgb(80 85 85), hsl(180 3% 32%), oklch(0.445 0.006 196.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Mako color name →
#505555
oklch(0.445 0.006 196.9)
Color conversions
- HEX
- #505555
- RGB
- rgb(80 85 85)
- HSL
- hsl(180 3% 32%)
- HWB
- hwb(180 31% 67%)
- OKLCH
- oklch(0.445 0.006 196.9)
- OKLab
- oklab(0.445 -0.006 -0.002)
- CIE Lab
- lab(35.69 -2.07 -0.73)
- LCH
- lch(35.69 2.19 199.4)
- CMYK
- cmyk(6% 0% 0% 67%)
Tints · Shades · Tones
Tints
- 606464
- 707474
- 818484
- 929595
- A3A6A6
- B5B7B7
- C7C9C9
- D9DBDB
- ECEDED
Shades
- 444949
- 393D3D
- 2E3131
- 242626
- 1A1C1C
- 101111
- 070808
- 020202
- 000000
Tones
- 555959
- 595D5D
- 5E6262
- 636666
- 686A6A
- 6C6E6E
- 717373
- 767777
- 7B7C7C
Color harmonies
Complementary +180°
- 505555
Mako
- 575253
≈ Greyish Black
Analogous -30° +30°
- 505555
Mako
- 515553
≈ Muted Ebony
- 505557
≈ Mako
Triadic +120° +240°
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 7.57:1 · APCA Lc 86
Ag
FailOn black
WCAG 2.77:1 · APCA Lc 16
Best text color: #FFFFFF
WCAG 7.57:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--mako: #505555;
--mako-rgb: 80 85 85;
--mako-oklch: oklch(0.445 0.006 196.9);
}
.element {
color: var(--mako);
background-color: hsl(180 3% 32%);
border-color: oklch(0.445 0.006 196.9);
}Tailwind CSS v4
@theme {
--color-mako: #505555;
--color-mako-50: #f3f6f6;
--color-mako-100: #e5e8e8;
--color-mako-200: #d1d5d5;
--color-mako-300: #b4b8b8;
--color-mako-400: #9aa0a0;
--color-mako-500: #828787;
--color-mako-600: #6e7373;
--color-mako-700: #585c5c;
--color-mako-800: #404343;
--color-mako-900: #2c2e2e;
--color-mako-950: #191b1b;
}SCSS
$mako: #505555;
$mako-rgb: 80, 85, 85;
$mako-light: mix(#fff, $mako, 20%);
$mako-dark: mix(#000, $mako, 20%);
.element {
color: $mako;
box-shadow: 0 0 0 2px rgba($mako, 0.35);
}