← Back to Editor

#C8E332 · #83E471 · #5CB3AA · #7430BB · #C71DA9

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#C8E332

Autumn Sage · GreenYellow · Sunflower

HEX
#C8E332
RGB
rgb(200, 227, 50)
HSL
hsl(69, 76%, 54%)
HSB
hsb(69, 78%, 89%)
CMYK
cmyk(12%, 0%, 78%, 11%)
Oklch
oklch(86.7% 0.189 118.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#83E471

Emerald · LightGreen · Apple Green

HEX
#83E471
RGB
rgb(131, 228, 113)
HSL
hsl(111, 68%, 67%)
HSB
hsb(111, 50%, 89%)
CMYK
cmyk(43%, 0%, 50%, 11%)
Oklch
oklch(83.3% 0.178 140.6)

Traditional「Emerald」· Paint「Apple Green」· Creative Mint Breeze

#5CB3AA

Mineral Blue · CadetBlue · Lake Green

HEX
#5CB3AA
RGB
rgb(92, 179, 170)
HSL
hsl(174, 36%, 53%)
HSB
hsb(174, 49%, 70%)
CMYK
cmyk(49%, 0%, 5%, 30%)
Oklch
oklch(71.0% 0.085 186.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7430BB

Deep Indigo · DarkOrchid · Violet

HEX
#7430BB
RGB
rgb(116, 48, 187)
HSL
hsl(269, 59%, 46%)
HSB
hsb(269, 74%, 73%)
CMYK
cmyk(38%, 74%, 0%, 27%)
Oklch
oklch(48.0% 0.204 301.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#C71DA9

Rose Purple · MediumVioletRed · Violet

HEX
#C71DA9
RGB
rgb(199, 29, 169)
HSL
hsl(311, 75%, 45%)
HSB
hsb(311, 85%, 78%)
CMYK
cmyk(0%, 85%, 15%, 22%)
Oklch
oklch(57.3% 0.237 337.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8E332
4B31E3

Analogous

E3A431
C8E332
6FE331

Triadic

C8E332
31C8E3
E331C8

Split-Comp.

C8E332
316FE3
A431E3

Tetradic

C8E332
31E3A4
4B31E3
E3316F

Contrast Matrix WCAG 2.1 Contrast

C8E332
83E471
5CB3AA
7430BB
C71DA9
—
1.1
Fail
1.7
Fail
5.0
AA
3.5
AA Large
1.1
Fail
—
1.6
Fail
4.6
AA
3.2
AA Large
1.7
Fail
1.6
Fail
—
2.9
Fail
2.0
Fail
5.0
AA
4.6
AA
2.9
Fail
—
1.4
Fail
3.5
AA Large
3.2
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.4Fail
1.6Fail
2.5Fail
7.3AAA
5.0AA
Black BG
14.5AAA
13.3AAA
8.5AAA
2.9Fail
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D45D
ADAE8D
8282AC
575699
7D7C87

Deuteranopia

D2D067
A7A094
7D76AD
5B6091
87947F

Tritanopia

C97F86
88A3A8
60AEAE
717F79
BE6C67

Achromatopsia

C7C7C7
BABABA
989898
545454
606060

Shades & Tints Shades & Tints

#C8E332

Dark
Light

#83E471

Dark
Light

#5CB3AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8e332;
  --color-2: #83e471;
  --color-3: #5cb3aa;
  --color-4: #7430bb;
  --color-5: #c71da9;
}

SCSS

$color-1: #c8e332;
$color-2: #83e471;
$color-3: #5cb3aa;
$color-4: #7430bb;
$color-5: #c71da9;

TAILWIND

colors: {
  'brand-1': '#c8e332',
  'brand-2': '#83e471',
  'brand-3': '#5cb3aa',
  'brand-4': '#7430bb',
  'brand-5': '#c71da9',
}

RGB Array

[200, 227, 50], [131, 228, 113], [92, 179, 170], [116, 48, 187], [199, 29, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C8E332, #83E471, #5CB3AA, #7430BB, #C71DA9 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c8e332; --color-2: #83e471; --color-3: #5cb3aa; --color-4: #7430bb; --color-5: #c71da9. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This nature-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color