Named color · #87C95F
Vivid Spring
Vivid Spring is #87C95F: rgb(135 201 95), hsl(97 50% 58%), oklch(0.768 0.155 135). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Vivid Spring color name →
#87C95F
oklch(0.768 0.155 135)
Color conversions
- HEX
- #87c95f
- RGB
- rgb(135 201 95)
- HSL
- hsl(97 50% 58%)
- HWB
- hwb(97 37% 21%)
- OKLCH
- oklch(0.768 0.155 135)
- OKLab
- oklab(0.768 -0.109 0.109)
- CIE Lab
- lab(74.8 -35.73 45.35)
- LCH
- lch(74.8 57.74 128.2)
- CMYK
- cmyk(33% 0% 53% 21%)
Tints · Shades · Tones
Tints
- 93CF71
- 9FD482
- ABDA92
- B7DFA2
- C3E5B2
- CFEAC1
- DBF0D1
- E7F5E0
- F3FAF0
Shades
- 75AE52
- 639544
- 517C38
- 41642C
- 314C20
- 213615
- 13220A
- 060F03
- 010200
Tones
- 87C264
- 87BA69
- 86B36D
- 86AC71
- 85A574
- 849D77
- 83967A
- 828F7C
- 81877E
Color harmonies
Complementary +180°
- 87C95F
Vivid Spring
- D893F7
≈ Bright Lilac
Analogous -30° +30°
- 87C95F
Vivid Spring
- C3B823
≈ Olive Yellow
- 25D29B
≈ Wild Caribbean Green
Triadic +120° +240°
- 87C95F
Vivid Spring
- 7EB7FF
≈ Parakeet Blue
- FF8C97
≈ Conch Shell
Split-complementary +150° +210°
- 87C95F
Vivid Spring
- ACA8FF
≈ Shy Moment
- F888CA
≈ Bubblegum Beam
Tetradic +90° +180° +270°
- 87C95F
Vivid Spring
- 00C6F9
≈ Shovel Knight
- D893F7
≈ Bright Lilac
- FF9360
≈ Mock Orange
Contrast & accessibility
Ag
FailOn white
WCAG 1.99:1 · APCA Lc 38
Ag
AAAOn black
WCAG 10.55:1 · APCA Lc 64
Best text color: #000000
WCAG 10.55:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--vivid-spring: #87c95f;
--vivid-spring-rgb: 135 201 95;
--vivid-spring-oklch: oklch(0.768 0.155 135);
}
.element {
color: var(--vivid-spring);
background-color: hsl(97 50% 58%);
border-color: oklch(0.768 0.155 135);
}Tailwind CSS v4
@theme {
--color-vivid-spring: #87c95f;
--color-vivid-spring-50: #e1ffd5;
--color-vivid-spring-100: #d0f5c2;
--color-vivid-spring-200: #b5e4a3;
--color-vivid-spring-300: #91ca7a;
--color-vivid-spring-400: #75b24f;
--color-vivid-spring-500: #559b1b;
--color-vivid-spring-600: #48831b;
--color-vivid-spring-700: #3a6916;
--color-vivid-spring-800: #2c4d08;
--color-vivid-spring-900: #1d3606;
--color-vivid-spring-950: #0d2000;
}SCSS
$vivid-spring: #87c95f;
$vivid-spring-rgb: 135, 201, 95;
$vivid-spring-light: mix(#fff, $vivid-spring, 20%);
$vivid-spring-dark: mix(#000, $vivid-spring, 20%);
.element {
color: $vivid-spring;
box-shadow: 0 0 0 2px rgba($vivid-spring, 0.35);
}