#817A5D + #B43313 + #CC681A + #6C6F18 + #584D3B · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#817A5D

Ochre · DimGray · Honey Gold

HEX

#817A5D

RGB

rgb(129, 122, 93)

HSL

hsl(48, 16%, 44%)

HSB

hsb(48, 28%, 51%)

CMYK

cmyk(0%, 5%, 28%, 49%)

Oklch

oklch(57.8% 0.043 96.1)

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

#B43313

Vermilion · FireBrick · Wine Red

HEX

#B43313

RGB

rgb(180, 51, 19)

HSL

hsl(12, 81%, 39%)

HSB

hsb(12, 89%, 71%)

CMYK

cmyk(0%, 72%, 89%, 29%)

Oklch

oklch(51.4% 0.171 34.3)

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

#CC681A

Tangerine · Chocolate · Amber Brown

HEX

#CC681A

RGB

rgb(204, 104, 26)

HSL

hsl(26, 77%, 45%)

HSB

hsb(26, 87%, 80%)

CMYK

cmyk(0%, 49%, 87%, 20%)

Oklch

oklch(62.4% 0.151 51.9)

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

#6C6F18

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#6C6F18

RGB

rgb(108, 111, 24)

HSL

hsl(62, 64%, 26%)

HSB

hsb(62, 78%, 44%)

CMYK

cmyk(3%, 0%, 78%, 56%)

Oklch

oklch(52.3% 0.105 111.6)

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

#584D3B

Ochre · DarkOliveGreen · Amber Brown

HEX

#584D3B

RGB

rgb(88, 77, 59)

HSL

hsl(37, 20%, 29%)

HSB

hsb(37, 33%, 35%)

CMYK

cmyk(0%, 12%, 33%, 65%)

Oklch

oklch(42.6% 0.032 79.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

817A5D

5E6582

Analogous

82695E

817A5D

77825E

Triadic

817A5D

5E827B

7B5E82

Split-Comp.

817A5D

5E7782

695E82

Tetradic

817A5D

5E8269

5E6582

825E77

Contrast Matrix WCAG 2.1 Contrast

817A5D	B43313	CC681A	6C6F18	584D3B
—	1.4 Fail	1.1 Fail	1.2 Fail	1.9 Fail
1.4 Fail	—	1.6 Fail	1.1 Fail	1.3 Fail
1.1 Fail	1.6 Fail	—	1.4 Fail	2.2 Fail
1.2 Fail	1.1 Fail	1.4 Fail	—	1.5 Fail
1.9 Fail	1.3 Fail	2.2 Fail	1.5 Fail	—

White BG

4.3AA Large

6.1AA

3.8AA Large

5.4AA

8.3AAA

Black BG

4.9AA

3.4AA Large

5.6AA

3.9AA Large

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E64

7C7B1B

A1A02D

6D6D2D

53533F

Deuteranopia

7E7F66

848D1D

A7AE31

6D6D32

545540

Tritanopia

816A6B

AE2122

C73C3F

6C3E41

574344

Achromatopsia

797979

565656

7D7D7D

646464

4E4E4E

Shades & Tints Shades & Tints

#817A5D

Dark

Light

#B43313

Dark

Light

#CC681A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #817a5d;
  --color-2: #b43313;
  --color-3: #cc681a;
  --color-4: #6c6f18;
  --color-5: #584d3b;
}

SCSS

$color-1: #817a5d;
$color-2: #b43313;
$color-3: #cc681a;
$color-4: #6c6f18;
$color-5: #584d3b;

TAILWIND

colors: {
  'brand-1': '#817a5d',
  'brand-2': '#b43313',
  'brand-3': '#cc681a',
  'brand-4': '#6c6f18',
  'brand-5': '#584d3b',
}

RGB Array

[129, 122, 93], [180, 51, 19], [204, 104, 26], [108, 111, 24], [88, 77, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #817A5D, #B43313, #CC681A, #6C6F18, #584D3B 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: #817a5d; --color-2: #b43313; --color-3: #cc681a; --color-4: #6c6f18; --color-5: #584d3b. 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