Named color · #7FC15C
Fierce Mantis
Fierce Mantis is #7FC15C: rgb(127 193 92), hsl(99 45% 56%), oklch(0.744 0.15 135.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Fierce Mantis color name →
#7FC15C
oklch(0.744 0.15 135.9)
Color conversions
- HEX
- #7fc15c
- RGB
- rgb(127 193 92)
- HSL
- hsl(99 45% 56%)
- HWB
- hwb(99 36% 24%)
- OKLCH
- oklch(0.744 0.15 135.9)
- OKLab
- oklab(0.744 -0.108 0.105)
- CIE Lab
- lab(71.96 -35.43 43.32)
- LCH
- lch(71.96 55.96 129.3)
- CMYK
- cmyk(34% 0% 52% 24%)
Tints · Shades · Tones
Tints
- 8CC76E
- 99CE7F
- A6D48F
- B2DBA0
- BFE1B0
- CCE7C0
- D9EDCF
- E5F3DF
- F2F9EF
Shades
- 6EA74F
- 5D8F42
- 4C7736
- 3C5F2A
- 2D491F
- 1F3414
- 11200A
- 060E03
- 010200
Tones
- 80BB61
- 80B466
- 81AE6B
- 81A76F
- 81A172
- 819A76
- 819479
- 818D7B
- 80877E
Color harmonies
Complementary +180°
- 7FC15C
Fierce Mantis
- D18CEC
≈ Bright Lilac
Analogous -30° +30°
- 7FC15C
Fierce Mantis
- B9B121
≈ Citronelle
- 1BC996
≈ Caribbean Green
Triadic +120° +240°
- 7FC15C
Fierce Mantis
- 71AEFF
≈ Fennel Flower
- FC818C
≈ Camaron Pink
Split-complementary +150° +210°
- 7FC15C
Fierce Mantis
- A59EFF
≈ Cobalite
- EE82C0
≈ Persian Pink
Tetradic +90° +180° +270°
- 7FC15C
Fierce Mantis
- 00BDF0
≈ Blue Bikini
- D18CEC
≈ Bright Lilac
- F88A54
≈ Barbarian
Contrast & accessibility
Ag
FailOn white
WCAG 2.16:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.68:1 · APCA Lc 60
Best text color: #000000
WCAG 9.68:1 (AAA) · APCA Lc 60
Contrast pairs
Code snippets
CSS
:root {
--fierce-mantis: #7fc15c;
--fierce-mantis-rgb: 127 193 92;
--fierce-mantis-oklch: oklch(0.744 0.15 135.9);
}
.element {
color: var(--fierce-mantis);
background-color: hsl(99 45% 56%);
border-color: oklch(0.744 0.15 135.9);
}Tailwind CSS v4
@theme {
--color-fierce-mantis: #7fc15c;
--color-fierce-mantis-50: #e1ffd6;
--color-fierce-mantis-100: #d0f4c4;
--color-fierce-mantis-200: #b5e4a5;
--color-fierce-mantis-300: #91ca7d;
--color-fierce-mantis-400: #74b253;
--color-fierce-mantis-500: #549b25;
--color-fierce-mantis-600: #488322;
--color-fierce-mantis-700: #39691b;
--color-fierce-mantis-800: #2b4d0e;
--color-fierce-mantis-900: #1d3509;
--color-fierce-mantis-950: #0d2000;
}SCSS
$fierce-mantis: #7fc15c;
$fierce-mantis-rgb: 127, 193, 92;
$fierce-mantis-light: mix(#fff, $fierce-mantis, 20%);
$fierce-mantis-dark: mix(#000, $fierce-mantis, 20%);
.element {
color: $fierce-mantis;
box-shadow: 0 0 0 2px rgba($fierce-mantis, 0.35);
}