Nearest named color · #A4B7B7
#A4B7B7
Nearest named color: Seafoam Slate
#A4B7B7 (rgb(164 183 183), hsl(180 12% 68%), oklch(0.765 0.021 196.7)) is closest to the named color Seafoam Slate. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#A4B7B7
oklch(0.765 0.021 196.7)
Color conversions
- HEX
- #a4b7b7
- RGB
- rgb(164 183 183)
- HSL
- hsl(180 12% 68%)
- HWB
- hwb(180 64% 28%)
- OKLCH
- oklch(0.765 0.021 196.7)
- OKLab
- oklab(0.765 -0.02 -0.006)
- CIE Lab
- lab(72.94 -6.78 -2.35)
- LCH
- lch(72.94 7.18 199.1)
- CMYK
- cmyk(10% 0% 0% 28%)
Tints · Shades · Tones
Tints
- ADBEBE
- B6C5C5
- BFCCCC
- C8D3D3
- D1DADA
- DAE2E2
- E3E9E9
- ECF0F0
- F6F8F8
Shades
- 8E9F9F
- 798787
- 647070
- 505A5A
- 3D4545
- 2B3131
- 1A1E1E
- 0A0C0C
- 010202
Tones
- A0B1B1
- 9DACAC
- 99A6A6
- 96A1A1
- 929B9B
- 8E9696
- 8B9090
- 878B8B
- 848585
Color harmonies
Complementary +180°
- A4B7B7
Seafoam Slate
- C0AEAE
≈ Black Shadows
Analogous -30° +30°
- A4B7B7
Seafoam Slate
- A7B7B0
≈ Cyprus Spring
- A5B6BD
≈ Languid Blue
Triadic +120° +240°
- A4B7B7
Seafoam Slate
- B8AFBC
≈ Virtuous Violet
- BAB1A4
≈ Stonelake
Split-complementary +150° +210°
- A4B7B7
Seafoam Slate
- BDADB5
≈ Castle Mist
- BFAFA8
≈ Oak Ridge
Tetradic +90° +180° +270°
- A4B7B7
Seafoam Slate
- B1B1C0
≈ Veiled Delight
- C0AEAE
≈ Black Shadows
- B4B4A5
≈ Digital Garage
Contrast & accessibility
Ag
FailOn white
WCAG 2.09:1 · APCA Lc 41
Ag
AAAOn black
WCAG 10.03:1 · APCA Lc 61
Best text color: #000000
WCAG 10.03:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--seafoam-slate: #a4b7b7;
--seafoam-slate-rgb: 164 183 183;
--seafoam-slate-oklch: oklch(0.765 0.021 196.7);
}
.element {
color: var(--seafoam-slate);
background-color: hsl(180 12% 68%);
border-color: oklch(0.765 0.021 196.7);
}Tailwind CSS v4
@theme {
--color-seafoam-slate: #a4b7b7;
--color-seafoam-slate-50: #eff7f7;
--color-seafoam-slate-100: #e0eaea;
--color-seafoam-slate-200: #cbd7d7;
--color-seafoam-slate-300: #acbbbb;
--color-seafoam-slate-400: #91a2a2;
--color-seafoam-slate-500: #778b8b;
--color-seafoam-slate-600: #657575;
--color-seafoam-slate-700: #505e5e;
--color-seafoam-slate-800: #3a4544;
--color-seafoam-slate-900: #28302f;
--color-seafoam-slate-950: #161c1c;
}SCSS
$seafoam-slate: #a4b7b7;
$seafoam-slate-rgb: 164, 183, 183;
$seafoam-slate-light: mix(#fff, $seafoam-slate, 20%);
$seafoam-slate-dark: mix(#000, $seafoam-slate, 20%);
.element {
color: $seafoam-slate;
box-shadow: 0 0 0 2px rgba($seafoam-slate, 0.35);
}