← Back to Editor

#A0D9BC · #7CA36A · #D0F0A5 · #BAD44D · #8DA851

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#A0D9BC

Celadon · Silver · Apple Green

HEX
#A0D9BC
RGB
rgb(160, 217, 188)
HSL
hsl(149, 43%, 74%)
HSB
hsb(149, 26%, 85%)
CMYK
cmyk(26%, 0%, 13%, 15%)
Oklch
oklch(83.8% 0.071 162.2)

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

#7CA36A

Celadon · Gray · Olive Green

HEX
#7CA36A
RGB
rgb(124, 163, 106)
HSL
hsl(101, 24%, 53%)
HSB
hsb(101, 35%, 64%)
CMYK
cmyk(24%, 0%, 35%, 36%)
Oklch
oklch(67.2% 0.092 136.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#D0F0A5

Willow Green · Khaki · Apple Green

HEX
#D0F0A5
RGB
rgb(208, 240, 165)
HSL
hsl(86, 71%, 79%)
HSB
hsb(86, 31%, 94%)
CMYK
cmyk(13%, 0%, 31%, 6%)
Oklch
oklch(91.4% 0.103 127.1)

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

#BAD44D

Grass Green · GreenYellow · Olive Green

HEX
#BAD44D
RGB
rgb(186, 212, 77)
HSL
hsl(72, 61%, 57%)
HSB
hsb(72, 64%, 83%)
CMYK
cmyk(12%, 0%, 64%, 17%)
Oklch
oklch(82.5% 0.161 119.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#8DA851

Grass Green · Gray · Olive Green

HEX
#8DA851
RGB
rgb(141, 168, 81)
HSL
hsl(79, 35%, 49%)
HSB
hsb(79, 52%, 66%)
CMYK
cmyk(16%, 0%, 52%, 34%)
Oklch
oklch(69.2% 0.118 123.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A0D9BC
D9A0BE

Analogous

A1D9A0
A0D9BC
A0D9D8

Triadic

A0D9BC
BCA0D9
D9BCA0

Split-Comp.

A0D9BC
D8A0D9
D9A0A1

Tetradic

A0D9BC
A0A1D9
D9A0BE
D9D8A0

Contrast Matrix WCAG 2.1 Contrast

A0D9BC
7CA36A
D0F0A5
BAD44D
8DA851
—
1.8
Fail
1.3
Fail
1.0
Fail
1.7
Fail
1.8
Fail
—
2.3
Fail
1.7
Fail
1.1
Fail
1.3
Fail
2.3
Fail
—
1.3
Fail
2.1
Fail
1.0
Fail
1.7
Fail
1.3
Fail
—
1.6
Fail
1.7
Fail
1.1
Fail
2.1
Fail
1.6
Fail
—
White BG
1.6Fail
2.9Fail
1.3Fail
1.7Fail
2.7Fail
Black BG
13.1AAA
7.3AAA
16.7AAA
12.6AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9C3
8D8D78
DEDEB7
C5C56E
999966

Deuteranopia

B5B1C5
8B887B
DCDABC
C4C276
97956B

Tritanopia

A3C9CA
7E8385
D2C5C9
BB878D
8E777A

Achromatopsia

C5C5C5
919191
DEDEDE
BDBDBD
969696

Shades & Tints Shades & Tints

#A0D9BC

Dark
Light

#7CA36A

Dark
Light

#D0F0A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a0d9bc;
  --color-2: #7ca36a;
  --color-3: #d0f0a5;
  --color-4: #bad44d;
  --color-5: #8da851;
}

SCSS

$color-1: #a0d9bc;
$color-2: #7ca36a;
$color-3: #d0f0a5;
$color-4: #bad44d;
$color-5: #8da851;

TAILWIND

colors: {
  'brand-1': '#a0d9bc',
  'brand-2': '#7ca36a',
  'brand-3': '#d0f0a5',
  'brand-4': '#bad44d',
  'brand-5': '#8da851',
}

RGB Array

[160, 217, 188], [124, 163, 106], [208, 240, 165], [186, 212, 77], [141, 168, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A0D9BC, #7CA36A, #D0F0A5, #BAD44D, #8DA851 is ideal for: corporate websites, product showcases, portfolios. 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: #a0d9bc; --color-2: #7ca36a; --color-3: #d0f0a5; --color-4: #bad44d; --color-5: #8da851. 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 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