Nearest named color · #A7BC57
#A7BC57
Nearest named color: Sapling
#A7BC57 (rgb(167 188 87), hsl(72 43% 54%), oklch(0.758 0.129 119.4)) is closest to the named color Sapling. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#A7BC57
oklch(0.758 0.129 119.4)
Color conversions
- HEX
- #a7bc57
- RGB
- rgb(167 188 87)
- HSL
- hsl(72 43% 54%)
- HWB
- hwb(72 34% 26%)
- OKLCH
- oklch(0.758 0.129 119.4)
- OKLab
- oklab(0.758 -0.063 0.113)
- CIE Lab
- lab(73.04 -18.57 47.69)
- LCH
- lch(73.04 51.17 111.3)
- CMYK
- cmyk(11% 0% 54% 26%)
Tints · Shades · Tones
Tints
- AFC36A
- B8CA7C
- C0D08D
- C9D79E
- D2DEAE
- DBE5BE
- E4EBCF
- EDF2DF
- F6F8EF
Shades
- 91A34B
- 7B8B3E
- 667333
- 525D27
- 3E471C
- 2C3212
- 1A1F08
- 0A0D03
- 010200
Tones
- A3B65D
- 9FB063
- 9BAA68
- 97A46D
- 939E71
- 8F9874
- 8B9278
- 878C7B
- 84867D
Color harmonies
Complementary +180°
- A7BC57
Sapling
- BC9DF7
≈ Baby Purple
Analogous -30° +30°
- A7BC57
Sapling
- D1AC41
≈ Haystack
- 70C783
≈ Garden Stroll
Triadic +120° +240°
- A7BC57
Sapling
- 57BBFA
≈ Hello Summer
- F28CAE
≈ Brown Knapweed
Split-complementary +150° +210°
- A7BC57
Sapling
- 91ACFF
≈ Widowmaker
- DE91D8
≈ Love Dust
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.10:1 · APCA Lc 41
Ag
AAAOn black
WCAG 9.97:1 · APCA Lc 61
Best text color: #000000
WCAG 9.97:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--sapling: #a7bc57;
--sapling-rgb: 167 188 87;
--sapling-oklch: oklch(0.758 0.129 119.4);
}
.element {
color: var(--sapling);
background-color: hsl(72 43% 54%);
border-color: oklch(0.758 0.129 119.4);
}Tailwind CSS v4
@theme {
--color-sapling: #a7bc57;
--color-sapling-50: #effcd3;
--color-sapling-100: #e1efbf;
--color-sapling-200: #cbdd9f;
--color-sapling-300: #adc275;
--color-sapling-400: #96a94a;
--color-sapling-500: #7d910e;
--color-sapling-600: #6a7b13;
--color-sapling-700: #546210;
--color-sapling-800: #3f4806;
--color-sapling-900: #2b3204;
--color-sapling-950: #191e00;
}SCSS
$sapling: #a7bc57;
$sapling-rgb: 167, 188, 87;
$sapling-light: mix(#fff, $sapling, 20%);
$sapling-dark: mix(#000, $sapling, 20%);
.element {
color: $sapling;
box-shadow: 0 0 0 2px rgba($sapling, 0.35);
}