Named color · #87B364
Broccoli
Broccoli is #87B364: rgb(135 179 100), hsl(93 34% 55%), oklch(0.716 0.117 132.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Broccoli color name →
#87B364
oklch(0.716 0.117 132.5)
Color conversions
- HEX
- #87b364
- RGB
- rgb(135 179 100)
- HSL
- hsl(93 34% 55%)
- HWB
- hwb(93 39% 30%)
- OKLCH
- oklch(0.716 0.117 132.5)
- OKLab
- oklab(0.716 -0.079 0.087)
- CIE Lab
- lab(68.37 -25.82 35.24)
- LCH
- lch(68.37 43.69 126.2)
- CMYK
- cmyk(25% 0% 44% 30%)
Tints · Shades · Tones
Tints
- 93BB74
- 9EC284
- AACA93
- B6D2A2
- C2D9B2
- CEE1C1
- DAE8D0
- E6F0E0
- F3F7EF
Shades
- 759B56
- 638448
- 516E3B
- 41582E
- 314322
- 212F16
- 131D0B
- 060C03
- 010100
Tones
- 87AE68
- 86A96B
- 85A46F
- 859F72
- 849A75
- 839577
- 838F7A
- 828A7C
- 81857E
Color harmonies
Complementary +180°
- 87B364
Broccoli
- BD8DD8
≈ Pale Purple
Analogous -30° +30°
- 87B364
Broccoli
- B2A646
≈ Pickled
- 53BA8D
≈ Bleached Olive
Triadic +120° +240°
- 87B364
Broccoli
- 6BA7EB
≈ Greek Sea
- E3838F
≈ Pulp
Split-complementary +150° +210°
- 87B364
Broccoli
- 999AEB
≈ Cold Lips
- D685B7
≈ Cyclamen
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.42:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.66:1 · APCA Lc 54
Best text color: #000000
WCAG 8.66:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--broccoli: #87b364;
--broccoli-rgb: 135 179 100;
--broccoli-oklch: oklch(0.716 0.117 132.5);
}
.element {
color: var(--broccoli);
background-color: hsl(93 34% 55%);
border-color: oklch(0.716 0.117 132.5);
}Tailwind CSS v4
@theme {
--color-broccoli: #87b364;
--color-broccoli-50: #e7fddc;
--color-broccoli-100: #d8f1ca;
--color-broccoli-200: #bfe0ad;
--color-broccoli-300: #9ec588;
--color-broccoli-400: #84ad63;
--color-broccoli-500: #67963e;
--color-broccoli-600: #587f36;
--color-broccoli-700: #46662b;
--color-broccoli-800: #344a1c;
--color-broccoli-900: #243412;
--color-broccoli-950: #121f04;
}SCSS
$broccoli: #87b364;
$broccoli-rgb: 135, 179, 100;
$broccoli-light: mix(#fff, $broccoli, 20%);
$broccoli-dark: mix(#000, $broccoli, 20%);
.element {
color: $broccoli;
box-shadow: 0 0 0 2px rgba($broccoli, 0.35);
}