Named color · #66AA22
Green Symphony
Green Symphony is #66AA22: rgb(102 170 34), hsl(90 67% 40%), oklch(0.667 0.176 133.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Green Symphony color name →
#66AA22
oklch(0.667 0.176 133.3)
Color conversions
- HEX
- #66aa22
- RGB
- rgb(102 170 34)
- HSL
- hsl(90 67% 40%)
- HWB
- hwb(90 13% 33%)
- OKLCH
- oklch(0.667 0.176 133.3)
- OKLab
- oklab(0.667 -0.121 0.128)
- CIE Lab
- lab(63.24 -38.32 56.87)
- LCH
- lch(63.24 68.58 124)
- CMYK
- cmyk(40% 0% 80% 33%)
Tints · Shades · Tones
Tints
- 75B342
- 85BC5B
- 94C471
- A3CD86
- B2D59B
- C1DEAF
- D1E6C3
- E0EFD7
- EFF7EB
Shades
- 58931C
- 4A7D16
- 3C6811
- 2F530B
- 233F07
- 172D03
- 0C1B01
- 040B00
- 000100
Tones
- 69A634
- 6DA242
- 709E4C
- 729A56
- 75965E
- 779266
- 7A8D6D
- 7C8974
- 7E857A
Color harmonies
Complementary +180°
- 66AA22
Green Symphony
- BA6FE0
≈ Lavender
Analogous -30° +30°
- 66AA22
Green Symphony
- A49700
≈ Nuclear Fallout
- 00AF7B
≈ Bright Camouflage
Triadic +120° +240°
- 66AA22
Green Symphony
- 3696FC
≈ Brilliant Azure
- EB5D75
≈ Cherry Static
Split-complementary +150° +210°
- 66AA22
Green Symphony
- 8981FB
≈ Periwinkle
- DB61B0
≈ Mega Magenta
Tetradic +90° +180° +270°
- 66AA22
Green Symphony
- 00A4CC
≈ Charybdis
- BA6FE0
≈ Lavender
- E96829
≈ Glazed Carrot
Contrast & accessibility
Ag
FailOn white
WCAG 2.86:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.33:1 · APCA Lc 47
Best text color: #000000
WCAG 7.33:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--green-symphony: #66aa22;
--green-symphony-rgb: 102 170 34;
--green-symphony-oklch: oklch(0.667 0.176 133.3);
}
.element {
color: var(--green-symphony);
background-color: hsl(90 67% 40%);
border-color: oklch(0.667 0.176 133.3);
}Tailwind CSS v4
@theme {
--color-green-symphony: #66aa22;
--color-green-symphony-50: #e0ffcf;
--color-green-symphony-100: #cff6bb;
--color-green-symphony-200: #b3e699;
--color-green-symphony-300: #8fcb6d;
--color-green-symphony-400: #73b43a;
--color-green-symphony-500: #529d00;
--color-green-symphony-600: #468400;
--color-green-symphony-700: #386a00;
--color-green-symphony-800: #2b4e00;
--color-green-symphony-900: #1d3600;
--color-green-symphony-950: #0d2100;
}SCSS
$green-symphony: #66aa22;
$green-symphony-rgb: 102, 170, 34;
$green-symphony-light: mix(#fff, $green-symphony, 20%);
$green-symphony-dark: mix(#000, $green-symphony, 20%);
.element {
color: $green-symphony;
box-shadow: 0 0 0 2px rgba($green-symphony, 0.35);
}