← Back to Editor

#9DE2D0 · #533C36 · #C7CA87 · #EFF174 · #FBE039

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#9DE2D0

Jade · LightBlue · Lake Green

HEX
#9DE2D0
RGB
rgb(157, 226, 208)
HSL
hsl(164, 54%, 75%)
HSB
hsb(164, 31%, 89%)
CMYK
cmyk(31%, 0%, 8%, 11%)
Oklch
oklch(86.2% 0.074 176.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#533C36

Crimson · DarkOliveGreen · Wine Red

HEX
#533C36
RGB
rgb(83, 60, 54)
HSL
hsl(12, 21%, 27%)
HSB
hsb(12, 35%, 33%)
CMYK
cmyk(0%, 28%, 35%, 67%)
Oklch
oklch(38.0% 0.034 35.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#C7CA87

Fresh Green · Tan · Sunflower

HEX
#C7CA87
RGB
rgb(199, 202, 135)
HSL
hsl(63, 39%, 66%)
HSB
hsb(63, 33%, 79%)
CMYK
cmyk(1%, 0%, 33%, 21%)
Oklch
oklch(82.1% 0.088 110.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EFF174

Fresh Green · Khaki · Sunflower

HEX
#EFF174
RGB
rgb(239, 241, 116)
HSL
hsl(61, 82%, 70%)
HSB
hsb(61, 52%, 95%)
CMYK
cmyk(1%, 0%, 52%, 5%)
Oklch
oklch(93.2% 0.148 109.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FBE039

Autumn Sage · Gold · Sunflower

HEX
#FBE039
RGB
rgb(251, 224, 57)
HSL
hsl(52, 96%, 60%)
HSB
hsb(52, 77%, 98%)
CMYK
cmyk(0%, 11%, 77%, 2%)
Oklch
oklch(90.3% 0.173 99.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DE2D0
E29DAF

Analogous

9DE2AD
9DE2D0
9DD2E2

Triadic

9DE2D0
CF9DE2
E2CF9D

Split-Comp.

9DE2D0
E29DD2
E2AD9D

Tetradic

9DE2D0
AD9DE2
E29DAF
D2E29D

Contrast Matrix WCAG 2.1 Contrast

9DE2D0
533C36
C7CA87
EFF174
FBE039
—
6.9
AA
1.2
Fail
1.2
Fail
1.1
Fail
6.9
AA
—
5.9
AA
8.5
AAA
7.7
AAA
1.2
Fail
5.9
AA
—
1.4
Fail
1.3
Fail
1.2
Fail
8.5
AAA
1.4
Fail
—
1.1
Fail
1.1
Fail
7.7
AAA
1.3
Fail
1.1
Fail
—
White BG
1.5Fail
10.2AAA
1.7Fail
1.2Fail
1.3Fail
Black BG
14.2AAA
2.1Fail
12.2AAA
17.5AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBD4
494937
C8C897
F0F092
EFEF61

Deuteranopia

B7B2D5
4A4C38
C8C89B
F0F09A
F1F36B

Tritanopia

A0D8D9
523939
C7A4A7
EFAAAF
FA8188

Achromatopsia

CBCBCB
424242
C1C1C1
E2E2E2
D5D5D5

Shades & Tints Shades & Tints

#9DE2D0

Dark
Light

#533C36

Dark
Light

#C7CA87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9de2d0;
  --color-2: #533c36;
  --color-3: #c7ca87;
  --color-4: #eff174;
  --color-5: #fbe039;
}

SCSS

$color-1: #9de2d0;
$color-2: #533c36;
$color-3: #c7ca87;
$color-4: #eff174;
$color-5: #fbe039;

TAILWIND

colors: {
  'brand-1': '#9de2d0',
  'brand-2': '#533c36',
  'brand-3': '#c7ca87',
  'brand-4': '#eff174',
  'brand-5': '#fbe039',
}

RGB Array

[157, 226, 208], [83, 60, 54], [199, 202, 135], [239, 241, 116], [251, 224, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9DE2D0, #533C36, #C7CA87, #EFF174, #FBE039 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: #9de2d0; --color-2: #533c36; --color-3: #c7ca87; --color-4: #eff174; --color-5: #fbe039. 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