Lime Green
HEX: #32CD32 | Modern Palette
Color Specifications
#32CD32
50, 205, 50
120°, 75% ,80%
75.61, 0, 75.61, 19.61
About Lime Green
Lime Green (#32CD32) is a color with RGB(50, 205, 50) and HSL(120°, 75.61%, 80.39%). It is commonly associated with Playful moods. In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is #CD32CD, which creates strong contrast. Its triadic palette includes #3232CD and #CD3232.
- HEX: #32CD32
- RGB: 50, 205, 50
- HSL: 120°, 75.61%, 80.39%
- Mood: Playful
- Style: Cool
- Use case: Text, Button, Background
- Complementary color: #CD32CD
- Triadic colors: #3232CD, #CD3232
Live Components
Color Palettes
Color Harmonies
Complementary
The color directly opposite on the color wheel — creates maximum contrast and vibrance.
Analogous
Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.
Triadic
Three colors equally spaced 120° apart — bold, balanced, and visually rich.
Split-Complementary
Two colors flanking the complement — high contrast with less tension than full complementary.
Tetradic (Square)
Four colors at 90° intervals — rich variety, best when one color dominates.
Monochromatic
Shades and tints of the same hue — cohesive, elegant, and easy to work with.
Shades & Tints
A seamless scale of #32CD32 from deepest shade to lightest tint.
Color Characteristics
Accessibility Simulation
#B2B23C
#C3C330
#5DC2C2
#B2B2B2
Frequently Asked Questions
Code Snippets
/* Background */
.element {
background-color: #32CD32;
}
/* Text */
.element {
color: #32CD32;
}
/* Border */
.element {
border: 1px solid #32CD32;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#32CD32,
#F3A7F3
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#32CD32,
#F3A7F3
);
}
// SCSS variable
$lime-green: #32CD32;
// With RGB channels (useful for rgba() usage)
$lime-green-r: 50;
$lime-green-g: 205;
$lime-green-b: 50;
// Usage
.element {
background-color: $lime-green;
color: rgba($lime-green-r, $lime-green-g, $lime-green-b, 0.8);
}