← Back to Editor

#A9A285 · #CFAD7D · #CC8D66 · #3A3151 · #40373C

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

#A9A285

Ginger · DarkGray · Sunflower

HEX
#A9A285
RGB
rgb(169, 162, 133)
HSL
hsl(48, 17%, 59%)
HSB
hsb(48, 21%, 66%)
CMYK
cmyk(0%, 4%, 21%, 34%)
Oklch
oklch(71.0% 0.041 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CFAD7D

Ginger · Tan · Warm Sun

HEX
#CFAD7D
RGB
rgb(207, 173, 125)
HSL
hsl(35, 46%, 65%)
HSB
hsb(35, 40%, 81%)
CMYK
cmyk(0%, 16%, 40%, 19%)
Oklch
oklch(76.6% 0.075 75.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#CC8D66

Tangerine · DarkSalmon · Warm Sun

HEX
#CC8D66
RGB
rgb(204, 141, 102)
HSL
hsl(23, 50%, 60%)
HSB
hsb(23, 50%, 80%)
CMYK
cmyk(0%, 31%, 50%, 20%)
Oklch
oklch(69.7% 0.094 52.4)

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

#3A3151

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3A3151
RGB
rgb(58, 49, 81)
HSL
hsl(257, 25%, 25%)
HSB
hsb(257, 40%, 32%)
CMYK
cmyk(28%, 40%, 0%, 68%)
Oklch
oklch(33.8% 0.056 296.2)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#40373C

Rose Purple · DarkSlateGray · Dark Stone

HEX
#40373C
RGB
rgb(64, 55, 60)
HSL
hsl(327, 8%, 23%)
HSB
hsb(327, 14%, 25%)
CMYK
cmyk(0%, 14%, 6%, 75%)
Oklch
oklch(34.8% 0.015 343.4)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9A285
858CA8

Analogous

A88F85
A9A285
9EA885

Triadic

A9A285
85A8A1
A185A8

Split-Comp.

A9A285
859EA8
8F85A8

Tetradic

A9A285
85A88F
858CA8
A8859E

Contrast Matrix WCAG 2.1 Contrast

A9A285
CFAD7D
CC8D66
3A3151
40373C
—
1.2
Fail
1.1
Fail
4.7
AA
4.5
AA Large
1.2
Fail
—
1.3
Fail
5.7
AA
5.4
AA
1.1
Fail
1.3
Fail
—
4.4
AA Large
4.1
AA Large
4.7
AA
5.7
AA
4.4
AA Large
—
1.1
Fail
4.5
AA Large
5.4
AA
4.1
AA Large
1.1
Fail
—
White BG
2.6Fail
2.1Fail
2.8Fail
12.1AAA
11.5AAA
Black BG
8.2AAA
9.9AAA
7.6AAA
1.7Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A68C
C0C089
B1B06F
363649
3C3C3B

Deuteranopia

A6A78E
C2C58B
B4B972
373747
3D3D3B

Tritanopia

A99293
CD9294
C97779
3A4342
403A3A

Achromatopsia

A1A1A1
B2B2B2
9B9B9B
373737
3A3A3A

Shades & Tints Shades & Tints

#A9A285

Dark
Light

#CFAD7D

Dark
Light

#CC8D66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9a285;
  --color-2: #cfad7d;
  --color-3: #cc8d66;
  --color-4: #3a3151;
  --color-5: #40373c;
}

SCSS

$color-1: #a9a285;
$color-2: #cfad7d;
$color-3: #cc8d66;
$color-4: #3a3151;
$color-5: #40373c;

TAILWIND

colors: {
  'brand-1': '#a9a285',
  'brand-2': '#cfad7d',
  'brand-3': '#cc8d66',
  'brand-4': '#3a3151',
  'brand-5': '#40373c',
}

RGB Array

[169, 162, 133], [207, 173, 125], [204, 141, 102], [58, 49, 81], [64, 55, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A9A285, #CFAD7D, #CC8D66, #3A3151, #40373C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a9a285; --color-2: #cfad7d; --color-3: #cc8d66; --color-4: #3a3151; --color-5: #40373c. 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. Restrained colors convey professionalism and trust. 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