Named color · #9FE4AA
Weekend Gardener
Weekend Gardener is #9FE4AA: rgb(159 228 170), hsl(130 56% 76%), oklch(0.858 0.106 148.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Weekend Gardener color name →
#9FE4AA
oklch(0.858 0.106 148.8)
Color conversions
- HEX
- #9fe4aa
- RGB
- rgb(159 228 170)
- HSL
- hsl(130 56% 76%)
- HWB
- hwb(130 62% 11%)
- OKLCH
- oklch(0.858 0.106 148.8)
- OKLab
- oklab(0.858 -0.091 0.055)
- CIE Lab
- lab(84.88 -31.13 21.23)
- LCH
- lch(84.88 37.68 145.7)
- CMYK
- cmyk(30% 0% 25% 11%)
Tints · Shades · Tones
Tints
- A9E7B3
- B3EABB
- BDEDC4
- C7EFCC
- D0F2D4
- DAF5DD
- E3F7E5
- ECFAEE
- F6FCF6
Shades
- 8AC693
- 75A97D
- 618D68
- 4D7253
- 3B583F
- 293F2D
- 18281B
- 09120B
- 010301
Tones
- 9CDAA6
- 9ACFA2
- 97C59E
- 94BB9A
- 91B195
- 8EA791
- 8B9D8D
- 879389
- 848A84
Color harmonies
Complementary +180°
- 9FE4AA
Weekend Gardener
- F7B8F3
≈ Sweet Slumber Pink
Analogous -30° +30°
- 9FE4AA
Weekend Gardener
- C9DA8A
≈ Medium Spring Bud
- 7BE7D1
≈ Turquoise Chalk
Triadic +120° +240°
- 9FE4AA
Weekend Gardener
- BDCFFF
≈ Ice Cold Stare
- FFBEB4
≈ Melon Water
Split-complementary +150° +210°
- 9FE4AA
Weekend Gardener
- D7C5FF
≈ Innocent Snowdrop
- FFBACF
≈ Tentacle Pink
Tetradic +90° +180° +270°
- 9FE4AA
Weekend Gardener
- A0D8FF
≈ Malmö FF
- F7B8F3
≈ Sweet Slumber Pink
- FFC292
≈ Wispy White
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 23
Ag
AAAOn black
WCAG 14.15:1 · APCA Lc 81
Best text color: #000000
WCAG 14.15:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--weekend-gardener: #9fe4aa;
--weekend-gardener-rgb: 159 228 170;
--weekend-gardener-oklch: oklch(0.858 0.106 148.8);
}
.element {
color: var(--weekend-gardener);
background-color: hsl(130 56% 76%);
border-color: oklch(0.858 0.106 148.8);
}Tailwind CSS v4
@theme {
--color-weekend-gardener: #9fe4aa;
--color-weekend-gardener-50: #e0fee6;
--color-weekend-gardener-100: #cff3d6;
--color-weekend-gardener-200: #b4e2bd;
--color-weekend-gardener-300: #90c79c;
--color-weekend-gardener-400: #71b07b;
--color-weekend-gardener-500: #4e995e;
--color-weekend-gardener-600: #438250;
--color-weekend-gardener-700: #366840;
--color-weekend-gardener-800: #284c2c;
--color-weekend-gardener-900: #1a351e;
--color-weekend-gardener-950: #0b200e;
}SCSS
$weekend-gardener: #9fe4aa;
$weekend-gardener-rgb: 159, 228, 170;
$weekend-gardener-light: mix(#fff, $weekend-gardener, 20%);
$weekend-gardener-dark: mix(#000, $weekend-gardener, 20%);
.element {
color: $weekend-gardener;
box-shadow: 0 0 0 2px rgba($weekend-gardener, 0.35);
}