← Back to Editor

#A16B35 · #D68F42 · #CFBA55 · #D0D88B · #97C791

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

#A16B35

Ochre · Sienna · Amber Brown

HEX
#A16B35
RGB
rgb(161, 107, 53)
HSL
hsl(30, 50%, 42%)
HSB
hsb(30, 67%, 63%)
CMYK
cmyk(0%, 34%, 67%, 37%)
Oklch
oklch(57.4% 0.098 63.6)

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

#D68F42

Ginger · GoldenRod · Warm Sun

HEX
#D68F42
RGB
rgb(214, 143, 66)
HSL
hsl(31, 64%, 55%)
HSB
hsb(31, 69%, 84%)
CMYK
cmyk(0%, 33%, 69%, 16%)
Oklch
oklch(70.8% 0.126 65.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CFBA55

Autumn Sage · SandyBrown · Sunflower

HEX
#CFBA55
RGB
rgb(207, 186, 85)
HSL
hsl(50, 56%, 57%)
HSB
hsb(50, 59%, 81%)
CMYK
cmyk(0%, 10%, 59%, 19%)
Oklch
oklch(78.7% 0.123 97.7)

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

#D0D88B

Fresh Green · Khaki · Sunflower

HEX
#D0D88B
RGB
rgb(208, 216, 139)
HSL
hsl(66, 50%, 70%)
HSB
hsb(66, 36%, 85%)
CMYK
cmyk(4%, 0%, 36%, 15%)
Oklch
oklch(85.8% 0.099 113.3)

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

#97C791

Celadon · DarkSeaGreen · Apple Green

HEX
#97C791
RGB
rgb(151, 199, 145)
HSL
hsl(113, 33%, 67%)
HSB
hsb(113, 27%, 78%)
CMYK
cmyk(24%, 0%, 27%, 22%)
Oklch
oklch(78.2% 0.091 141.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A16B35
366BA1

Analogous

A13636
A16B35
A1A136

Triadic

A16B35
36A16B
6B36A1

Split-Comp.

A16B35
36A1A1
3636A1

Tetradic

A16B35
36A136
366BA1
A136A1

Contrast Matrix WCAG 2.1 Contrast

A16B35
D68F42
CFBA55
D0D88B
97C791
—
1.7
Fail
2.3
Fail
3.0
Fail
2.3
Fail
1.7
Fail
—
1.4
Fail
1.8
Fail
1.4
Fail
2.3
Fail
1.4
Fail
—
1.3
Fail
1.0
Fail
3.0
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
2.3
Fail
1.4
Fail
1.0
Fail
1.3
Fail
—
White BG
4.5AA Large
2.7Fail
1.9Fail
1.5Fail
1.9Fail
Black BG
4.7AA
7.9AAA
10.8AAA
13.9AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8942
B7B755
C6C66D
D3D49E
ACAC9E

Deuteranopia

8D9145
BBC159
C7C973
D3D2A2
A9A5A1

Tritanopia

9E4C4F
D26367
CE8185
D0ACB0
99A8AB

Achromatopsia

757575
9B9B9B
B5B5B5
CDCDCD
B2B2B2

Shades & Tints Shades & Tints

#A16B35

Dark
Light

#D68F42

Dark
Light

#CFBA55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a16b35;
  --color-2: #d68f42;
  --color-3: #cfba55;
  --color-4: #d0d88b;
  --color-5: #97c791;
}

SCSS

$color-1: #a16b35;
$color-2: #d68f42;
$color-3: #cfba55;
$color-4: #d0d88b;
$color-5: #97c791;

TAILWIND

colors: {
  'brand-1': '#a16b35',
  'brand-2': '#d68f42',
  'brand-3': '#cfba55',
  'brand-4': '#d0d88b',
  'brand-5': '#97c791',
}

RGB Array

[161, 107, 53], [214, 143, 66], [207, 186, 85], [208, 216, 139], [151, 199, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A16B35, #D68F42, #CFBA55, #D0D88B, #97C791 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: #a16b35; --color-2: #d68f42; --color-3: #cfba55; --color-4: #d0d88b; --color-5: #97c791. 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