← Back to Editor

#9EC27C · #C2DCAF · #FFFCF2 · #5C2047 · #3B1331

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#9EC27C

Celadon · DarkSeaGreen · Apple Green

HEX
#9EC27C
RGB
rgb(158, 194, 124)
HSL
hsl(91, 36%, 62%)
HSB
hsb(91, 36%, 76%)
CMYK
cmyk(19%, 0%, 36%, 24%)
Oklch
oklch(77.1% 0.102 130.6)

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

#C2DCAF

Celadon · Silver · Apple Green

HEX
#C2DCAF
RGB
rgb(194, 220, 175)
HSL
hsl(95, 39%, 77%)
HSB
hsb(95, 20%, 86%)
CMYK
cmyk(12%, 0%, 20%, 14%)
Oklch
oklch(86.4% 0.067 132.2)

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

#FFFCF2

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFCF2
RGB
rgb(255, 252, 242)
HSL
hsl(46, 100%, 97%)
HSB
hsb(46, 5%, 100%)
CMYK
cmyk(0%, 1%, 5%, 0%)
Oklch
oklch(99.1% 0.014 93.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#5C2047

Rose Purple · DarkSlateGray · Raspberry

HEX
#5C2047
RGB
rgb(92, 32, 71)
HSL
hsl(321, 48%, 24%)
HSB
hsb(321, 65%, 36%)
CMYK
cmyk(0%, 65%, 23%, 64%)
Oklch
oklch(34.8% 0.101 343.7)

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

#3B1331

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3B1331
RGB
rgb(59, 19, 49)
HSL
hsl(315, 51%, 15%)
HSB
hsb(315, 68%, 23%)
CMYK
cmyk(0%, 68%, 17%, 77%)
Oklch
oklch(26.3% 0.076 338.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EC27C
9F7BC1

Analogous

C0C17B
9EC27C
7BC17C

Triadic

9EC27C
7B9DC1
C17B9D

Split-Comp.

9EC27C
7C7BC1
C17BC0

Tetradic

9EC27C
7BC0C1
9F7BC1
C17C7B

Contrast Matrix WCAG 2.1 Contrast

9EC27C
C2DCAF
FFFCF2
5C2047
3B1331
—
1.4
Fail
2.0
Fail
6.0
AA
7.9
AAA
1.4
Fail
—
1.4
Fail
8.1
AAA
10.7
AAA
2.0
Fail
1.4
Fail
—
11.7
AAA
15.5
AAA
6.0
AA
8.1
AAA
11.7
AAA
—
1.3
Fail
7.9
AAA
10.7
AAA
15.5
AAA
1.3
Fail
—
White BG
2.0Fail
1.5Fail
1.0Fail
12.0AAA
15.9AAA
Black BG
10.5AAA
14.2AAA
20.5AAA
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE8D
CDCDBA
FEFEF4
42413E
2A292A

Deuteranopia

ACA991
CCCABD
FEFEF5
464A3B
2C2F28

Tritanopia

A09A9D
C3C2C4
FFF6F7
593634
392423

Achromatopsia

AFAFAF
CFCFCF
FCFCFC
363636
222222

Shades & Tints Shades & Tints

#9EC27C

Dark
Light

#C2DCAF

Dark
Light

#FFFCF2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ec27c;
  --color-2: #c2dcaf;
  --color-3: #fffcf2;
  --color-4: #5c2047;
  --color-5: #3b1331;
}

SCSS

$color-1: #9ec27c;
$color-2: #c2dcaf;
$color-3: #fffcf2;
$color-4: #5c2047;
$color-5: #3b1331;

TAILWIND

colors: {
  'brand-1': '#9ec27c',
  'brand-2': '#c2dcaf',
  'brand-3': '#fffcf2',
  'brand-4': '#5c2047',
  'brand-5': '#3b1331',
}

RGB Array

[158, 194, 124], [194, 220, 175], [255, 252, 242], [92, 32, 71], [59, 19, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9EC27C, #C2DCAF, #FFFCF2, #5C2047, #3B1331 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9ec27c; --color-2: #c2dcaf; --color-3: #fffcf2; --color-4: #5c2047; --color-5: #3b1331. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 tech, SaaS, healthcare, eco industries. 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