Named color · #636869
Stone Hearth
Stone Hearth is #636869: rgb(99 104 105), hsl(190 3% 40%), oklch(0.513 0.006 211). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Stone Hearth color name →
#636869
oklch(0.513 0.006 211)
Color conversions
- HEX
- #636869
- RGB
- rgb(99 104 105)
- HSL
- hsl(190 3% 40%)
- HWB
- hwb(190 39% 59%)
- OKLCH
- oklch(0.513 0.006 211)
- OKLab
- oklab(0.513 -0.005 -0.003)
- CIE Lab
- lab(43.59 -1.84 -1.27)
- LCH
- lch(43.59 2.23 214.6)
- CMYK
- cmyk(6% 1% 0% 59%)
Tints · Shades · Tones
Tints
- 717677
- 808485
- 8F9393
- 9EA1A2
- AEB0B1
- BEC0C0
- CECFD0
- DEDFDF
- EEEFEF
Shades
- 55595A
- 474B4C
- 3A3E3E
- 2E3031
- 212424
- 161818
- 0B0C0C
- 030404
- 000000
Tones
- 666A6B
- 696D6E
- 6C6F70
- 6E7172
- 717474
- 747677
- 777979
- 7A7B7B
- 7D7E7E
Color harmonies
Complementary +180°
- 636869
Stone Hearth
- 6B6665
≈ Trail Print
Analogous -30° +30°
- 636869
Stone Hearth
- 636867
≈ Stone Hearth
- 64676A
≈ Thames Dusk
Triadic +120° +240°
- 636869
Stone Hearth
- 696669
≈ Cracked Slate
- 686763
≈ Wire Wool
Split-complementary +150° +210°
- 636869
Stone Hearth
- 6A6567
≈ Scorpion
- 6A6663
≈ Trail Print
Tetradic +90° +180° +270°
- 636869
Stone Hearth
- 67666A
≈ Cracked Slate
- 6B6665
≈ Trail Print
- 666864
≈ Fade to Black
Contrast & accessibility
Ag
AAOn white
WCAG 5.65:1 · APCA Lc 78
Ag
FailOn black
WCAG 3.71:1 · APCA Lc 23
Best text color: #FFFFFF
WCAG 5.65:1 (AA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--stone-hearth: #636869;
--stone-hearth-rgb: 99 104 105;
--stone-hearth-oklch: oklch(0.513 0.006 211);
}
.element {
color: var(--stone-hearth);
background-color: hsl(190 3% 40%);
border-color: oklch(0.513 0.006 211);
}Tailwind CSS v4
@theme {
--color-stone-hearth: #636869;
--color-stone-hearth-50: #f3f6f6;
--color-stone-hearth-100: #e5e8e9;
--color-stone-hearth-200: #d1d5d6;
--color-stone-hearth-300: #b4b8b9;
--color-stone-hearth-400: #9a9fa0;
--color-stone-hearth-500: #828788;
--color-stone-hearth-600: #6e7373;
--color-stone-hearth-700: #585c5c;
--color-stone-hearth-800: #404343;
--color-stone-hearth-900: #2c2e2f;
--color-stone-hearth-950: #191b1b;
}SCSS
$stone-hearth: #636869;
$stone-hearth-rgb: 99, 104, 105;
$stone-hearth-light: mix(#fff, $stone-hearth, 20%);
$stone-hearth-dark: mix(#000, $stone-hearth, 20%);
.element {
color: $stone-hearth;
box-shadow: 0 0 0 2px rgba($stone-hearth, 0.35);
}