Named color · #A4A99B
Garden Promenade
Garden Promenade is #A4A99B: rgb(164 169 155), hsl(81 8% 64%), oklch(0.727 0.021 123). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Garden Promenade color name →
#A4A99B
oklch(0.727 0.021 123)
Color conversions
- HEX
- #a4a99b
- RGB
- rgb(164 169 155)
- HSL
- hsl(81 8% 64%)
- HWB
- hwb(81 61% 34%)
- OKLCH
- oklch(0.727 0.021 123)
- OKLab
- oklab(0.727 -0.011 0.017)
- CIE Lab
- lab(68.53 -3.78 6.61)
- LCH
- lch(68.53 7.61 119.8)
- CMYK
- cmyk(3% 0% 8% 34%)
Tints · Shades · Tones
Tints
- ADB1A5
- B6BAAE
- BEC2B8
- C7CBC2
- D1D3CC
- DADCD6
- E3E5E0
- ECEDEA
- F6F6F5
Shades
- 8E9286
- 797C72
- 64675E
- 50534B
- 3D3F39
- 2B2C28
- 1A1B18
- 0A0A09
- 010101
Tones
- A0A598
- 9DA196
- 999D93
- 959890
- 92948D
- 8E908B
- 8B8C88
- 878885
- 848483
Color harmonies
Complementary +180°
- A4A99B
Garden Promenade
- A9A4B2
≈ Luxe Lilac
Analogous -30° +30°
- A4A99B
Garden Promenade
- ABA798
≈ Abbey Stone
- 9DABA1
≈ Halcyon Green
Triadic +120° +240°
- A4A99B
Garden Promenade
- 9CA9B3
≈ Wave Goodbye
- B3A2A5
≈ Flexible Grey
Split-complementary +150° +210°
- A4A99B
Garden Promenade
- A2A6B4
≈ Great Falls
- AFA2AC
≈ Luxe Lilac
Tetradic +90° +180° +270°
- A4A99B
Garden Promenade
- 99AAAE
≈ Nor’wester
- A9A4B2
≈ Luxe Lilac
- B3A29E
≈ Desert Echo
Contrast & accessibility
Ag
FailOn white
WCAG 2.40:1 · APCA Lc 47
Ag
AAAOn black
WCAG 8.72:1 · APCA Lc 55
Best text color: #000000
WCAG 8.72:1 (AAA) · APCA Lc 55
Contrast pairs
Code snippets
CSS
:root {
--garden-promenade: #a4a99b;
--garden-promenade-rgb: 164 169 155;
--garden-promenade-oklch: oklch(0.727 0.021 123);
}
.element {
color: var(--garden-promenade);
background-color: hsl(81 8% 64%);
border-color: oklch(0.727 0.021 123);
}Tailwind CSS v4
@theme {
--color-garden-promenade: #a4a99b;
--color-garden-promenade-50: #f4f6f0;
--color-garden-promenade-100: #e6e9e2;
--color-garden-promenade-200: #d2d6cc;
--color-garden-promenade-300: #b5b9ae;
--color-garden-promenade-400: #9ca193;
--color-garden-promenade-500: #83897a;
--color-garden-promenade-600: #6f7467;
--color-garden-promenade-700: #595c52;
--color-garden-promenade-800: #41443c;
--color-garden-promenade-900: #2d2f29;
--color-garden-promenade-950: #1a1b17;
}SCSS
$garden-promenade: #a4a99b;
$garden-promenade-rgb: 164, 169, 155;
$garden-promenade-light: mix(#fff, $garden-promenade, 20%);
$garden-promenade-dark: mix(#000, $garden-promenade, 20%);
.element {
color: $garden-promenade;
box-shadow: 0 0 0 2px rgba($garden-promenade, 0.35);
}