Pastel green is a soft, desaturated shade of green. Its softness mixed with vibrant green gives this color a gentle tone, creating a sense of peace and relaxation. Pastel green sits in the cooler range of greens—somewhere between spring green and aqua.
Pastel green is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #80EF80
- RGB value: 50.2% red, 93.7% green, and 50.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use pastel green in your designs:
- Evoke calmness. Pastel green creates a relaxing and inviting atmosphere, making it an ideal color for wellness, meditation, or productivity apps and tools.
- Create playful designs. Brighter pastel greens can add a hint of fun, vibrancy, and youthfulness to your UI design.
- Tie in natural elements. The springtime hue makes pastel green a great option for designs that include nature, health, or organic products that represent freshness.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same soft and light spectrum as pastel green, consider:
- Mint green (#ADEBB3) is a close cousin of pastel green but with a touch of icy blue designed to add coolness and lightness.
- Seafoam (#8DDCDC) dips its toes in the blue spectrum with a light green, oceanic, aquatic feeling.
- Celadon (#A8DCAB) takes a pale, muted approach with hints of blue and gray. Its roots date back to Chinese ceramics.
- Green sage (#98A869) is a grayer version of pastel green with earthy, muted hues.
Pastel green is a versatile color that pairs well with a variety of hues depending on the mood you want to create. To complement pastel green’s softness, consider pairing it with:
- Lilac (#A47DAB) complements pastel green’s lightness when paired together.
- Dusty rose (#DCA1A1)under matches pastel green’s softness to create a gentle, harmonious environment.
- Olive green (#636B2F) evokes a natural, organic feel when paired with pastel green.
- Teal (#069494) enhances the playfulness of pastel green—ideal for evoking an energetic feeling.
Other colors worth considering include terracotta to capitalize on pastel green’s earthy tones, light blue for an oceanic look, and beige or cream to create a clean, calm atmosphere.
While pastel green is soft and pale, it may clash with:
- Scarlet (#ED2100) can create awkward tension due to its warmth compared to pastel green’s coolness.
- Pastel yellow (#FFEE8C) can appear washed out next to the similar lightness of pastel green.
- Maroon (#550000) can clash with pastel green’s light, calming nature.
- Neon green (#2CFF05) can appear visually jarring next to pastel green due to its brightness and saturation.
- Navy blue (#000080) can overpower the delicate green if used in large amounts.
Pastel green evokes the calming feeling of nature, growth, and peace. This soft color helps promote a sense of tranquility, security, and relaxation while balancing other emotions. This color strongly connects to springtime and young leaves, signifying new beginnings and life.
Many Western cultures believe this color connotes nature, growth, and peace. In East Asian cultures, pastel green symbolizes youth and innocence. In color psychology, pastel green calming and hopeful qualities evoke feelings of optimism and relaxation, similar to a serene spring day.
Pastel green is used in design as a background color, accent, and font color to create a refreshing palette. It can also convey a sense of eco-friendliness or youthfulness in branding.
In ancient civilizations, green pigments were derived from natural elements, including plants, minerals, and insects. The shade of pastel green we know today emerged from color mixing, where green pigments were lightened with white to create softer, lighter hues.
The use of pastels became popular in fashion, home decor, and architecture during the 18th and 19th centuries. During Marie Antoinette’s reign, pastel green became a popular choice for gowns and decorative elements, symbolizing beauty and innocence.
Muted colors like pastels are increasingly popular, partly due to the show “Miami Vice,” which uses these hues in architecture and fashion. Today, many designers use pastel green in product design to evoke tranquility and new beginnings.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Herbal Harmony
Secret Garden
Pistachio Dream
Contrast checker
Contrast 1.44
- Large Text
#80EF80
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 14.58
- Large Text
#80EF80
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #80EF80, known as pastel green, has RGB values of R:128 G:239, B:128 and CMYK values of C:40, M:0, Y:46, K:6.
| VALUE | CSS | |
|---|---|---|
| HEX | #80EF80 | #80EF80 |
| RGB DECIMAL | 128, 239, 128 | RGB(128,239,128) |
| RGB PERCENTAGE | 50.2, 93.7, 50.2 | RGB(50.2%,93.7%,50.2%) |
| CMYK | 46, 0, 46, 6 | |
| HSL | 120°, 77.6, 72 | HSL(120,77.6%,72%) |
| HSV (OR HSB) | 120°, 46.4, 93.7 | |
| WEB SAFE | #99FF99 | #99FF99 |
| CIE-LAB | 85.945, -53.621, 43.883 | |
| XYZ | 43.663, 67.878, 31.222 | |
| xyY | 0.306, 0.475, 67.878 | |
| CIE-LCH | 85.945, 69.288, 140.704 | |
| CIE-LUV | 85.945, -52.168, 67.434 | |
| HUNTER-LAB | 82.388, -49.58, 35.203 | |
| BINARY | 10000000, 11101111, 10000000 | |
| iOS - SwiftUI | Color(red: 0.502, green: 0.937, blue: 0.502) | |
| iOS - UIKit | UIColor(red: 0.502, green: 0.937, blue: 0.502, alpha: 1) | |
| Android - Compose | Color(0xFF80EF80) |
