Named color · #11AA66
Secret Garden
Secret Garden is #11AA66: rgb(17 170 102), hsl(153 82% 37%), oklch(0.65 0.154 156.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Secret Garden color name →
#11AA66
oklch(0.65 0.154 156.1)
Color conversions
- HEX
- #11aa66
- RGB
- rgb(17 170 102)
- HSL
- hsl(153 82% 37%)
- HWB
- hwb(153 7% 33%)
- OKLCH
- oklch(0.65 0.154 156.1)
- OKLab
- oklab(0.65 -0.141 0.062)
- CIE Lab
- lab(61.44 -50.01 24.4)
- LCH
- lch(61.44 55.64 154)
- CMYK
- cmyk(90% 0% 40% 33%)
Tints · Shades · Tones
Tints
- 3FB375
- 5BBC84
- 73C493
- 88CDA2
- 9DD5B1
- B1DEC0
- C5E6D0
- D8EEDF
- ECF7EF
Shades
- 0D9358
- 097D4A
- 06683C
- 04532F
- 023F23
- 012D17
- 001B0C
- 000B04
- 000100
Tones
- 2FA669
- 40A26C
- 4D9E6F
- 579A72
- 609674
- 689277
- 6F8D79
- 75897C
- 7B857E
Color harmonies
Complementary +180°
- 11AA66
Secret Garden
- C867B2
≈ Pú Táo Zǐ Purple
Analogous -30° +30°
- 11AA66
Secret Garden
- 789F20
≈ Luminescent Green
- 00A59A
≈ Tyrolite Blue-Green
Triadic +120° +240°
- 11AA66
Secret Garden
- 7784EC
≈ Soft Blue
- DC6748
≈ Jelly Slug
Split-complementary +150° +210°
- 11AA66
Secret Garden
- A773D9
≈ Rich Lavender
- DA6181
≈ Hint of Cherry
Tetradic +90° +180° +270°
- 11AA66
Secret Garden
- 2595E7
≈ Out of the Blue
- C867B2
≈ Pú Táo Zǐ Purple
- C97A00
≈ German Mustard
Contrast & accessibility
Ag
FailOn white
WCAG 3.01:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.96:1 · APCA Lc 45
Best text color: #000000
WCAG 6.96:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--secret-garden: #11aa66;
--secret-garden-rgb: 17 170 102;
--secret-garden-oklch: oklch(0.65 0.154 156.1);
}
.element {
color: var(--secret-garden);
background-color: hsl(153 82% 37%);
border-color: oklch(0.65 0.154 156.1);
}Tailwind CSS v4
@theme {
--color-secret-garden: #11aa66;
--color-secret-garden-50: #d1ffe5;
--color-secret-garden-100: #bdf8d5;
--color-secret-garden-200: #9ae9bb;
--color-secret-garden-300: #6bcf99;
--color-secret-garden-400: #3cb977;
--color-secret-garden-500: #00a358;
--color-secret-garden-600: #00894b;
--color-secret-garden-700: #006e3c;
--color-secret-garden-800: #005128;
--color-secret-garden-900: #00381b;
--color-secret-garden-950: #00230b;
}SCSS
$secret-garden: #11aa66;
$secret-garden-rgb: 17, 170, 102;
$secret-garden-light: mix(#fff, $secret-garden, 20%);
$secret-garden-dark: mix(#000, $secret-garden, 20%);
.element {
color: $secret-garden;
box-shadow: 0 0 0 2px rgba($secret-garden, 0.35);
}