Named color · #A0AC9E
Green Balsam
Green Balsam is #A0AC9E: rgb(160 172 158), hsl(111 8% 65%), oklch(0.731 0.024 141.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Green Balsam color name →
#A0AC9E
oklch(0.731 0.024 141.2)
Color conversions
- HEX
- #a0ac9e
- RGB
- rgb(160 172 158)
- HSL
- hsl(111 8% 65%)
- HWB
- hwb(111 62% 33%)
- OKLCH
- oklch(0.731 0.024 141.2)
- OKLab
- oklab(0.731 -0.019 0.015)
- CIE Lab
- lab(69.09 -6.37 5.71)
- LCH
- lch(69.09 8.55 138.1)
- CMYK
- cmyk(7% 0% 8% 33%)
Tints · Shades · Tones
Tints
- A9B4A7
- B2BCB1
- BCC4BA
- C5CDC4
- CFD5CD
- D8DDD7
- E2E6E1
- EBEEEB
- F5F6F5
Shades
- 8B9589
- 767F74
- 616960
- 4E544D
- 3B403A
- 292D29
- 191B18
- 090B09
- 010101
Tones
- 9DA89B
- 9AA398
- 969F95
- 939A92
- 90968F
- 8D918C
- 8A8D89
- 868986
- 838483
Color harmonies
Complementary +180°
- A0AC9E
Green Balsam
- AFA3B1
≈ Midsummer Twilight
Analogous -30° +30°
- A0AC9E
Green Balsam
- A8AA99
≈ Humble Hippo
- 9AADA6
≈ April Rain
Triadic +120° +240°
- A0AC9E
Green Balsam
- A0A8B8
≈ Ridge View
- B7A2A1
≈ Lilac Smoke
Split-complementary +150° +210°
- A0AC9E
Green Balsam
- A8A6B6
≈ Curated Lilac
- B5A2AA
≈ Magical Mauve
Tetradic +90° +180° +270°
- A0AC9E
Green Balsam
- 9AABB5
≈ Wave Goodbye
- AFA3B1
≈ Midsummer Twilight
- B5A49B
≈ Chocolate Oatmeal
Contrast & accessibility
Ag
FailOn white
WCAG 2.36:1 · APCA Lc 47
Ag
AAAOn black
WCAG 8.88:1 · APCA Lc 55
Best text color: #000000
WCAG 8.88:1 (AAA) · APCA Lc 55
Contrast pairs
Code snippets
CSS
:root {
--green-balsam: #a0ac9e;
--green-balsam-rgb: 160 172 158;
--green-balsam-oklch: oklch(0.731 0.024 141.2);
}
.element {
color: var(--green-balsam);
background-color: hsl(111 8% 65%);
border-color: oklch(0.731 0.024 141.2);
}Tailwind CSS v4
@theme {
--color-green-balsam: #a0ac9e;
--color-green-balsam-50: #f1f7f1;
--color-green-balsam-100: #e3eae3;
--color-green-balsam-200: #ced7ce;
--color-green-balsam-300: #b0bbb0;
--color-green-balsam-400: #97a295;
--color-green-balsam-500: #7e8a7c;
--color-green-balsam-600: #6a7569;
--color-green-balsam-700: #555e54;
--color-green-balsam-800: #3e443d;
--color-green-balsam-900: #2b2f2a;
--color-green-balsam-950: #181c17;
}SCSS
$green-balsam: #a0ac9e;
$green-balsam-rgb: 160, 172, 158;
$green-balsam-light: mix(#fff, $green-balsam, 20%);
$green-balsam-dark: mix(#000, $green-balsam, 20%);
.element {
color: $green-balsam;
box-shadow: 0 0 0 2px rgba($green-balsam, 0.35);
}