#3D3327 + #4F4D40 + #82763A + #A0823C + #EA9D35 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D3327

Ochre · DarkSlateGray · Cinnamon

HEX

#3D3327

RGB

rgb(61, 51, 39)

HSL

hsl(33, 22%, 20%)

HSB

hsb(33, 36%, 24%)

CMYK

cmyk(0%, 16%, 36%, 76%)

Oklch

oklch(32.8% 0.025 71.9)

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

#4F4D40

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#4F4D40

RGB

rgb(79, 77, 64)

HSL

hsl(52, 10%, 28%)

HSB

hsb(52, 19%, 31%)

CMYK

cmyk(0%, 3%, 19%, 69%)

Oklch

oklch(41.8% 0.021 100.0)

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

#82763A

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#82763A

RGB

rgb(130, 118, 58)

HSL

hsl(50, 38%, 37%)

HSB

hsb(50, 55%, 51%)

CMYK

cmyk(0%, 9%, 55%, 49%)

Oklch

oklch(56.3% 0.082 98.2)

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

#A0823C

Ochre · Sienna · Honey Gold

HEX

#A0823C

RGB

rgb(160, 130, 60)

HSL

hsl(42, 45%, 43%)

HSB

hsb(42, 63%, 63%)

CMYK

cmyk(0%, 19%, 62%, 37%)

Oklch

oklch(62.1% 0.096 86.1)

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

#EA9D35

Ginger · GoldenRod · Warm Sun

HEX

#EA9D35

RGB

rgb(234, 157, 53)

HSL

hsl(34, 81%, 56%)

HSB

hsb(34, 77%, 92%)

CMYK

cmyk(0%, 33%, 77%, 8%)

Oklch

oklch(75.6% 0.145 69.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3327

28323E

Analogous

3E2928

3D3327

3D3E28

Triadic

3D3327

283E34

34283E

Split-Comp.

3D3327

283D3E

29283E

Tetradic

3D3327

283E29

28323E

3E283D

Contrast Matrix WCAG 2.1 Contrast

3D3327	4F4D40	82763A	A0823C	EA9D35
—	1.5 Fail	2.7 Fail	3.4 AA Large	5.5 AA
1.5 Fail	—	1.9 Fail	2.3 Fail	3.8 AA Large
2.7 Fail	1.9 Fail	—	1.3 Fail	2.0 Fail
3.4 AA Large	2.3 Fail	1.3 Fail	—	1.6 Fail
5.5 AA	3.8 AA Large	2.0 Fail	1.6 Fail	—

White BG

12.3AAA

8.5AAA

4.6AA

3.7AA Large

2.2Fail

Black BG

1.7Fail

2.5Fail

4.6AA

5.8AA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

39392A

4E4E43

7D7D49

93934D

C9C84E

Deuteranopia

393A2B

4E4E44

7E7E4C

959751

CDD354

Tritanopia

3C2C2D

4F4646

815457

9F5A5D

E66266

Achromatopsia

353535

4C4C4C

737373

838383

A8A8A8

Shades & Tints Shades & Tints

#3D3327

Dark

Light

#4F4D40

Dark

Light

#82763A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3327;
  --color-2: #4f4d40;
  --color-3: #82763a;
  --color-4: #a0823c;
  --color-5: #ea9d35;
}

SCSS

$color-1: #3d3327;
$color-2: #4f4d40;
$color-3: #82763a;
$color-4: #a0823c;
$color-5: #ea9d35;

TAILWIND

colors: {
  'brand-1': '#3d3327',
  'brand-2': '#4f4d40',
  'brand-3': '#82763a',
  'brand-4': '#a0823c',
  'brand-5': '#ea9d35',
}

RGB Array

[61, 51, 39], [79, 77, 64], [130, 118, 58], [160, 130, 60], [234, 157, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #3D3327, #4F4D40, #82763A, #A0823C, #EA9D35 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: #3d3327; --color-2: #4f4d40; --color-3: #82763a; --color-4: #a0823c; --color-5: #ea9d35. 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 warm-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