#DCC97A + #A48E3B + #87843F + #BC391B + #606A69 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#DCC97A

Ginger · BurlyWood · Sunflower

HEX

#DCC97A

RGB

rgb(220, 201, 122)

HSL

hsl(48, 58%, 67%)

HSB

hsb(48, 45%, 86%)

CMYK

cmyk(0%, 9%, 45%, 14%)

Oklch

oklch(83.4% 0.102 96.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#A48E3B

Ochre · DarkGoldenRod · Honey Gold

HEX

#A48E3B

RGB

rgb(164, 142, 59)

HSL

hsl(47, 47%, 44%)

HSB

hsb(47, 64%, 64%)

CMYK

cmyk(0%, 13%, 64%, 36%)

Oklch

oklch(65.0% 0.106 94.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#87843F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#87843F

RGB

rgb(135, 132, 63)

HSL

hsl(58, 36%, 39%)

HSB

hsb(58, 53%, 53%)

CMYK

cmyk(0%, 2%, 53%, 47%)

Oklch

oklch(60.1% 0.091 106.6)

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

#BC391B

Vermilion · FireBrick · Passion Red

HEX

#BC391B

RGB

rgb(188, 57, 27)

HSL

hsl(11, 75%, 42%)

HSB

hsb(11, 86%, 74%)

CMYK

cmyk(0%, 70%, 86%, 26%)

Oklch

oklch(53.5% 0.173 34.0)

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

#606A69

Ink Gray · DimGray · Charcoal

HEX

#606A69

RGB

rgb(96, 106, 105)

HSL

hsl(174, 5%, 40%)

HSB

hsb(174, 9%, 42%)

CMYK

cmyk(9%, 0%, 1%, 58%)

Oklch

oklch(51.5% 0.012 189.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCC97A

7A8EDC

Analogous

DC977A

DCC97A

BEDC7A

Triadic

DCC97A

7ADCC8

C87ADC

Split-Comp.

DCC97A

7ABEDC

977ADC

Tetradic

DCC97A

7ADC97

7A8EDC

DC7ABE

Contrast Matrix WCAG 2.1 Contrast

DCC97A	A48E3B	87843F	BC391B	606A69
—	1.9 Fail	2.3 Fail	3.4 AA Large	3.4 AA Large
1.9 Fail	—	1.2 Fail	1.7 Fail	1.7 Fail
2.3 Fail	1.2 Fail	—	1.4 Fail	1.4 Fail
3.4 AA Large	1.7 Fail	1.4 Fail	—	1.0 Fail
3.4 AA Large	1.7 Fail	1.4 Fail	1.0 Fail	—

White BG

1.7Fail

3.2AA Large

3.9AA Large

5.6AA

Black BG

12.7AAA

6.5AA

5.4AA

3.7AA Large

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D48D

9A9A4F

868650

838222

646469

Deuteranopia

D5D692

9C9D54

868654

8B9524

646369

Tritanopia

DB9CA0

A35F62

875D60

B52829

606969

Achromatopsia

C6C6C6

8B8B8B

7D7D7D

5D5D5D

676767

Shades & Tints Shades & Tints

#DCC97A

Dark

Light

#A48E3B

Dark

Light

#87843F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcc97a;
  --color-2: #a48e3b;
  --color-3: #87843f;
  --color-4: #bc391b;
  --color-5: #606a69;
}

SCSS

$color-1: #dcc97a;
$color-2: #a48e3b;
$color-3: #87843f;
$color-4: #bc391b;
$color-5: #606a69;

TAILWIND

colors: {
  'brand-1': '#dcc97a',
  'brand-2': '#a48e3b',
  'brand-3': '#87843f',
  'brand-4': '#bc391b',
  'brand-5': '#606a69',
}

RGB Array

[220, 201, 122], [164, 142, 59], [135, 132, 63], [188, 57, 27], [96, 106, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DCC97A, #A48E3B, #87843F, #BC391B, #606A69 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: #dcc97a; --color-2: #a48e3b; --color-3: #87843f; --color-4: #bc391b; --color-5: #606a69. 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