#444132 + #6A6B5A + #ABB560 + #C59233 + #580E1E · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#444132

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#444132

RGB

rgb(68, 65, 50)

HSL

hsl(50, 15%, 23%)

HSB

hsb(50, 26%, 27%)

CMYK

cmyk(0%, 4%, 26%, 73%)

Oklch

oklch(37.4% 0.025 98.0)

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

#6A6B5A

Autumn Sage · DimGray · Charcoal

HEX

#6A6B5A

RGB

rgb(106, 107, 90)

HSL

hsl(64, 9%, 39%)

HSB

hsb(64, 16%, 42%)

CMYK

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

Oklch

oklch(52.2% 0.026 110.0)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#ABB560

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#ABB560

RGB

rgb(171, 181, 96)

HSL

hsl(67, 36%, 54%)

HSB

hsb(67, 47%, 71%)

CMYK

cmyk(6%, 0%, 47%, 29%)

Oklch

oklch(74.6% 0.110 114.6)

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

#C59233

Ochre · GoldenRod · Amber Brown

HEX

#C59233

RGB

rgb(197, 146, 51)

HSL

hsl(39, 59%, 49%)

HSB

hsb(39, 74%, 77%)

CMYK

cmyk(0%, 26%, 74%, 23%)

Oklch

oklch(69.2% 0.124 79.2)

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

#580E1E

Vermilion · Maroon · Deep Berry

HEX

#580E1E

RGB

rgb(88, 14, 30)

HSL

hsl(347, 73%, 20%)

HSB

hsb(347, 84%, 35%)

CMYK

cmyk(0%, 84%, 66%, 65%)

Oklch

oklch(30.5% 0.105 14.4)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

444132

323543

Analogous

433832

444132

3E4332

Triadic

444132

324341

413243

Split-Comp.

444132

323E43

383243

Tetradic

444132

324338

323543

43323E

Contrast Matrix WCAG 2.1 Contrast

444132	6A6B5A	ABB560	C59233	580E1E
—	1.9 Fail	4.6 AA	3.7 AA Large	1.4 Fail
1.9 Fail	—	2.5 Fail	1.9 Fail	2.6 Fail
4.6 AA	2.5 Fail	—	1.3 Fail	6.4 AA
3.7 AA Large	1.9 Fail	1.3 Fail	—	5.0 AA
1.4 Fail	2.6 Fail	6.4 AA	5.0 AA	—

White BG

10.3AAA

5.4AA

2.2Fail

2.8Fail

14.0AAA

Black BG

2.0Fail

3.9AA Large

9.5AAA

7.5AAA

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

434336

6A6A5E

AFAF75

AFAE4A

38371A

Deuteranopia

434337

6A6A5F

AFAE79

B2B650

3C4219

Tritanopia

443839

6A6162

AC8588

C25C60

541716

Achromatopsia

404040

696969

A8A8A8

969696

262626

Shades & Tints Shades & Tints

#444132

Dark

Light

#6A6B5A

Dark

Light

#ABB560

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #444132;
  --color-2: #6a6b5a;
  --color-3: #abb560;
  --color-4: #c59233;
  --color-5: #580e1e;
}

SCSS

$color-1: #444132;
$color-2: #6a6b5a;
$color-3: #abb560;
$color-4: #c59233;
$color-5: #580e1e;

TAILWIND

colors: {
  'brand-1': '#444132',
  'brand-2': '#6a6b5a',
  'brand-3': '#abb560',
  'brand-4': '#c59233',
  'brand-5': '#580e1e',
}

RGB Array

[68, 65, 50], [106, 107, 90], [171, 181, 96], [197, 146, 51], [88, 14, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #444132, #6A6B5A, #ABB560, #C59233, #580E1E is ideal for: tech websites, dark mode UIs, game UIs. 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: #444132; --color-2: #6a6b5a; --color-3: #abb560; --color-4: #c59233; --color-5: #580e1e. 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. 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