← Back to Editor

#CAC77A · #958B05 · #625A07 · #4C2D22 · #895740

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

#CAC77A

Fresh Green · Tan · Sunflower

HEX
#CAC77A
RGB
rgb(202, 199, 122)
HSL
hsl(58, 43%, 64%)
HSB
hsb(58, 40%, 79%)
CMYK
cmyk(0%, 1%, 40%, 21%)
Oklch
oklch(81.5% 0.099 106.5)

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

#958B05

Autumn Sage · Olive · Honey Gold

HEX
#958B05
RGB
rgb(149, 139, 5)
HSL
hsl(56, 94%, 30%)
HSB
hsb(56, 97%, 58%)
CMYK
cmyk(0%, 7%, 97%, 42%)
Oklch
oklch(62.6% 0.131 104.4)

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

#625A07

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#625A07
RGB
rgb(98, 90, 7)
HSL
hsl(55, 87%, 21%)
HSB
hsb(55, 93%, 38%)
CMYK
cmyk(0%, 8%, 93%, 62%)
Oklch
oklch(46.1% 0.094 103.3)

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

#4C2D22

Tangerine · DarkSlateGray · Cinnamon

HEX
#4C2D22
RGB
rgb(76, 45, 34)
HSL
hsl(16, 38%, 22%)
HSB
hsb(16, 55%, 30%)
CMYK
cmyk(0%, 41%, 55%, 70%)
Oklch
oklch(33.3% 0.050 40.3)

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

#895740

Tangerine · Sienna · Amber Brown

HEX
#895740
RGB
rgb(137, 87, 64)
HSL
hsl(19, 36%, 39%)
HSB
hsb(19, 53%, 54%)
CMYK
cmyk(0%, 36%, 53%, 46%)
Oklch
oklch(50.7% 0.075 45.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAC77A
7C7ECB

Analogous

CBA17C
CAC77A
A6CB7C

Triadic

CAC77A
7CCBC8
C87CCB

Split-Comp.

CAC77A
7CA6CB
A17CCB

Tetradic

CAC77A
7CCBA1
7C7ECB
CB7CA6

Contrast Matrix WCAG 2.1 Contrast

CAC77A
958B05
625A07
4C2D22
895740
—
2.0
Fail
4.0
AA Large
7.0
AAA
3.4
AA Large
2.0
Fail
—
2.0
Fail
3.5
AA Large
1.7
Fail
4.0
AA Large
2.0
Fail
—
1.7
Fail
1.2
Fail
7.0
AAA
3.5
AA Large
1.7
Fail
—
2.1
Fail
3.4
AA Large
1.7
Fail
1.2
Fail
2.1
Fail
—
White BG
1.8Fail
3.5AA Large
7.0AAA
12.3AAA
6.0AA
Black BG
12.0AAA
6.0AA
3.0Fail
1.7Fail
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C98D
919125
5F5E1B
3F3E25
737346

Deuteranopia

C9C991
91922D
5F6020
404325
767A47

Tritanopia

CA9B9F
943F45
622B2E
4A2727
874A4B

Achromatopsia

BFBFBF
7F7F7F
535353
353535
636363

Shades & Tints Shades & Tints

#CAC77A

Dark
Light

#958B05

Dark
Light

#625A07

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cac77a;
  --color-2: #958b05;
  --color-3: #625a07;
  --color-4: #4c2d22;
  --color-5: #895740;
}

SCSS

$color-1: #cac77a;
$color-2: #958b05;
$color-3: #625a07;
$color-4: #4c2d22;
$color-5: #895740;

TAILWIND

colors: {
  'brand-1': '#cac77a',
  'brand-2': '#958b05',
  'brand-3': '#625a07',
  'brand-4': '#4c2d22',
  'brand-5': '#895740',
}

RGB Array

[202, 199, 122], [149, 139, 5], [98, 90, 7], [76, 45, 34], [137, 87, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CAC77A, #958B05, #625A07, #4C2D22, #895740 is ideal for: tech websites, dark mode UIs, game UIs, 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: #cac77a; --color-2: #958b05; --color-3: #625a07; --color-4: #4c2d22; --color-5: #895740. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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