← Back to Editor

#DB6D4C · #765F4D · #B5BC76 · #7C9E6C · #C8ECA4

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 WebsiteBlog

Color Details Color Details

#DB6D4C

Vermilion · Tomato · Passion Red

HEX
#DB6D4C
RGB
rgb(219, 109, 76)
HSL
hsl(14, 67%, 58%)
HSB
hsb(14, 65%, 86%)
CMYK
cmyk(0%, 50%, 65%, 14%)
Oklch
oklch(65.8% 0.146 37.5)

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

#765F4D

Tangerine · DimGray · Amber Brown

HEX
#765F4D
RGB
rgb(118, 95, 77)
HSL
hsl(26, 21%, 38%)
HSB
hsb(26, 35%, 46%)
CMYK
cmyk(0%, 19%, 35%, 54%)
Oklch
oklch(50.3% 0.041 59.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B5BC76

Autumn Sage · Tan · Sunflower

HEX
#B5BC76
RGB
rgb(181, 188, 118)
HSL
hsl(66, 34%, 60%)
HSB
hsb(66, 37%, 74%)
CMYK
cmyk(4%, 0%, 37%, 26%)
Oklch
oklch(77.3% 0.092 113.2)

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

#7C9E6C

Celadon · Gray · Olive Green

HEX
#7C9E6C
RGB
rgb(124, 158, 108)
HSL
hsl(101, 20%, 52%)
HSB
hsb(101, 32%, 62%)
CMYK
cmyk(22%, 0%, 32%, 38%)
Oklch
oklch(66.1% 0.081 135.9)

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

#C8ECA4

Emerald · Khaki · Apple Green

HEX
#C8ECA4
RGB
rgb(200, 236, 164)
HSL
hsl(90, 65%, 78%)
HSB
hsb(90, 31%, 93%)
CMYK
cmyk(15%, 0%, 31%, 7%)
Oklch
oklch(90.0% 0.102 129.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB6D4C
4CBADC

Analogous

DC4C72
DB6D4C
DCB54C

Triadic

DB6D4C
4CDC6E
6E4CDC

Split-Comp.

DB6D4C
4CDCB5
4C72DC

Tetradic

DB6D4C
72DC4C
4CBADC
B54CDC

Contrast Matrix WCAG 2.1 Contrast

DB6D4C
765F4D
B5BC76
7C9E6C
C8ECA4
—
1.8
Fail
1.7
Fail
1.1
Fail
2.5
Fail
1.8
Fail
—
3.0
Fail
2.0
Fail
4.5
AA
1.7
Fail
3.0
Fail
—
1.5
Fail
1.5
Fail
1.1
Fail
2.0
Fail
1.5
Fail
—
2.3
Fail
2.5
Fail
4.5
AA
1.5
Fail
2.3
Fail
—
White BG
3.3AA Large
6.0AA
2.0Fail
3.0AA Large
1.3Fail
Black BG
6.3AA
3.5AA Large
10.4AAA
7.0AA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA54
6C6C51
B8B887
8B8B78
D8D8B5

Deuteranopia

B2BA56
6D6F52
B8B78B
89867B
D6D3BA

Tritanopia

D55A5C
755556
B59497
7E8284
CAC3C6

Achromatopsia

8A8A8A
646464
B2B2B2
8E8E8E
D9D9D9

Shades & Tints Shades & Tints

#DB6D4C

Dark
Light

#765F4D

Dark
Light

#B5BC76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db6d4c;
  --color-2: #765f4d;
  --color-3: #b5bc76;
  --color-4: #7c9e6c;
  --color-5: #c8eca4;
}

SCSS

$color-1: #db6d4c;
$color-2: #765f4d;
$color-3: #b5bc76;
$color-4: #7c9e6c;
$color-5: #c8eca4;

TAILWIND

colors: {
  'brand-1': '#db6d4c',
  'brand-2': '#765f4d',
  'brand-3': '#b5bc76',
  'brand-4': '#7c9e6c',
  'brand-5': '#c8eca4',
}

RGB Array

[219, 109, 76], [118, 95, 77], [181, 188, 118], [124, 158, 108], [200, 236, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DB6D4C, #765F4D, #B5BC76, #7C9E6C, #C8ECA4 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: #db6d4c; --color-2: #765f4d; --color-3: #b5bc76; --color-4: #7c9e6c; --color-5: #c8eca4. 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