← Back to Editor

#DFEBC5 · #ABC480 · #BEAC30 · #B03537 · #3B2B1E

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

#DFEBC5

Willow Green · LightGray · Mint Green

HEX
#DFEBC5
RGB
rgb(223, 235, 197)
HSL
hsl(79, 49%, 85%)
HSB
hsb(79, 16%, 92%)
CMYK
cmyk(5%, 0%, 16%, 8%)
Oklch
oklch(92.1% 0.052 121.7)

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

#ABC480

Willow Green · DarkSeaGreen · Apple Green

HEX
#ABC480
RGB
rgb(171, 196, 128)
HSL
hsl(82, 37%, 64%)
HSB
hsb(82, 35%, 77%)
CMYK
cmyk(13%, 0%, 35%, 23%)
Oklch
oklch(78.5% 0.095 124.9)

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

#BEAC30

Autumn Sage · GoldenRod · Honey Gold

HEX
#BEAC30
RGB
rgb(190, 172, 48)
HSL
hsl(52, 60%, 47%)
HSB
hsb(52, 75%, 75%)
CMYK
cmyk(0%, 9%, 75%, 25%)
Oklch
oklch(73.9% 0.139 100.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B03537

Crimson · Brown · Passion Red

HEX
#B03537
RGB
rgb(176, 53, 55)
HSL
hsl(359, 54%, 45%)
HSB
hsb(359, 70%, 69%)
CMYK
cmyk(0%, 70%, 69%, 31%)
Oklch
oklch(51.3% 0.159 23.9)

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

#3B2B1E

Tangerine · DarkSlateGray · Cinnamon

HEX
#3B2B1E
RGB
rgb(59, 43, 30)
HSL
hsl(27, 33%, 17%)
HSB
hsb(27, 49%, 23%)
CMYK
cmyk(0%, 27%, 49%, 77%)
Oklch
oklch(30.4% 0.032 60.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFEBC5
D2C6EB

Analogous

EBE5C6
DFEBC5
CDEBC6

Triadic

DFEBC5
C6E0EB
EBC6E0

Split-Comp.

DFEBC5
C6CDEB
E5C6EB

Tetradic

DFEBC5
C6EBE5
D2C6EB
EBC6CD

Contrast Matrix WCAG 2.1 Contrast

DFEBC5
ABC480
BEAC30
B03537
3B2B1E
—
1.5
Fail
1.8
Fail
4.9
AA
10.9
AAA
1.5
Fail
—
1.2
Fail
3.2
AA Large
7.1
AAA
1.8
Fail
1.2
Fail
—
2.7
Fail
5.9
AA
4.9
AA
3.2
AA Large
2.7
Fail
—
2.2
Fail
10.9
AAA
7.1
AAA
5.9
AA
2.2
Fail
—
White BG
1.2Fail
1.9Fail
2.3Fail
6.2AA
13.5AAA
Black BG
16.8AAA
10.9AAA
9.1AAA
3.4AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4CE
B6B690
B6B64E
7B7A37
343421

Deuteranopia

E4E3D0
B4B394
B7B955
828B36
353622

Tritanopia

E0D5D7
AC9DA0
BD666B
AA3636
3A2424

Achromatopsia

E3E3E3
B5B5B5
A3A3A3
5A5A5A
2E2E2E

Shades & Tints Shades & Tints

#DFEBC5

Dark
Light

#ABC480

Dark
Light

#BEAC30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfebc5;
  --color-2: #abc480;
  --color-3: #beac30;
  --color-4: #b03537;
  --color-5: #3b2b1e;
}

SCSS

$color-1: #dfebc5;
$color-2: #abc480;
$color-3: #beac30;
$color-4: #b03537;
$color-5: #3b2b1e;

TAILWIND

colors: {
  'brand-1': '#dfebc5',
  'brand-2': '#abc480',
  'brand-3': '#beac30',
  'brand-4': '#b03537',
  'brand-5': '#3b2b1e',
}

RGB Array

[223, 235, 197], [171, 196, 128], [190, 172, 48], [176, 53, 55], [59, 43, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DFEBC5, #ABC480, #BEAC30, #B03537, #3B2B1E 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: #dfebc5; --color-2: #abc480; --color-3: #beac30; --color-4: #b03537; --color-5: #3b2b1e. 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