Named color · #58D854
Koopa Green Shell
Koopa Green Shell is #58D854: rgb(88 216 84), hsl(118 63% 59%), oklch(0.783 0.207 142.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Koopa Green Shell color name →
#58D854
oklch(0.783 0.207 142.8)
Color conversions
- HEX
- #58d854
- RGB
- rgb(88 216 84)
- HSL
- hsl(118 63% 59%)
- HWB
- hwb(118 33% 15%)
- OKLCH
- oklch(0.783 0.207 142.8)
- OKLab
- oklab(0.783 -0.165 0.125)
- CIE Lab
- lab(77.24 -55.85 52.37)
- LCH
- lch(77.24 76.56 136.8)
- CMYK
- cmyk(59% 0% 61% 15%)
Tints · Shades · Tones
Tints
- 6EDD69
- 81E17B
- 92E58D
- A3E99E
- B3EDAF
- C3F1BF
- D2F5CF
- E1F8DF
- F0FCEF
Shades
- 4BBC48
- 3FA03C
- 338531
- 286B26
- 1D531B
- 123B11
- 092508
- 031102
- 000200
Tones
- 60CF5C
- 67C762
- 6CBE68
- 71B56D
- 75AC71
- 78A475
- 7B9B78
- 7D927B
- 7F897E
Color harmonies
Complementary +180°
- 58D854
Koopa Green Shell
- F189FF
≈ Give Me Your Love
Analogous -30° +30°
- 58D854
Koopa Green Shell
- BAC300
≈ Leafy Seadragon
- 00D7AF
≈ Channel Marker Green
Triadic +120° +240°
- 58D854
Koopa Green Shell
- 93B8FF
≈ Carolina Blue
- FF9792
≈ Lolly
Split-complementary +150° +210°
- 58D854
Koopa Green Shell
- BBA9FF
≈ Winterspring Lilac
- FF8EC1
≈ Cochonnet
Tetradic +90° +180° +270°
- 58D854
Koopa Green Shell
- 4EC6FF
≈ Shovel Knight
- F189FF
≈ Give Me Your Love
- FF9C5B
≈ Honey Carrot Cake
Contrast & accessibility
Ag
FailOn white
WCAG 1.84:1 · APCA Lc 34
Ag
AAAOn black
WCAG 11.36:1 · APCA Lc 68
Best text color: #000000
WCAG 11.36:1 (AAA) · APCA Lc 68
Contrast pairs
Code snippets
CSS
:root {
--koopa-green-shell: #58d854;
--koopa-green-shell-rgb: 88 216 84;
--koopa-green-shell-oklch: oklch(0.783 0.207 142.8);
}
.element {
color: var(--koopa-green-shell);
background-color: hsl(118 63% 59%);
border-color: oklch(0.783 0.207 142.8);
}Tailwind CSS v4
@theme {
--color-koopa-green-shell: #58d854;
--color-koopa-green-shell-50: #d1ffd1;
--color-koopa-green-shell-100: #bdfbbd;
--color-koopa-green-shell-200: #9aec9c;
--color-koopa-green-shell-300: #6cd271;
--color-koopa-green-shell-400: #42bb3f;
--color-koopa-green-shell-500: #00a500;
--color-koopa-green-shell-600: #008b00;
--color-koopa-green-shell-700: #007000;
--color-koopa-green-shell-800: #035200;
--color-koopa-green-shell-900: #043900;
--color-koopa-green-shell-950: #002300;
}SCSS
$koopa-green-shell: #58d854;
$koopa-green-shell-rgb: 88, 216, 84;
$koopa-green-shell-light: mix(#fff, $koopa-green-shell, 20%);
$koopa-green-shell-dark: mix(#000, $koopa-green-shell, 20%);
.element {
color: $koopa-green-shell;
box-shadow: 0 0 0 2px rgba($koopa-green-shell, 0.35);
}