#DE7C2C + #B58D55 + #9E8A6F + #6B6B5B + #32453D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DE7C2C

Tangerine · Chocolate · Warm Sun

HEX

#DE7C2C

RGB

rgb(222, 124, 44)

HSL

hsl(27, 73%, 52%)

HSB

hsb(27, 80%, 87%)

CMYK

cmyk(0%, 44%, 80%, 13%)

Oklch

oklch(68.2% 0.150 55.0)

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

#B58D55

Ginger · DarkSalmon · Warm Sun

HEX

#B58D55

RGB

rgb(181, 141, 85)

HSL

hsl(35, 39%, 52%)

HSB

hsb(35, 53%, 71%)

CMYK

cmyk(0%, 22%, 53%, 29%)

Oklch

oklch(66.9% 0.088 74.6)

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

#9E8A6F

Ginger · Gray · Warm Sun

HEX

#9E8A6F

RGB

rgb(158, 138, 111)

HSL

hsl(34, 20%, 53%)

HSB

hsb(34, 30%, 62%)

CMYK

cmyk(0%, 13%, 30%, 38%)

Oklch

oklch(64.4% 0.045 75.1)

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

#6B6B5B

Autumn Sage · DimGray · Charcoal

HEX

#6B6B5B

RGB

rgb(107, 107, 91)

HSL

hsl(60, 8%, 39%)

HSB

hsb(60, 15%, 42%)

CMYK

cmyk(0%, 0%, 15%, 58%)

Oklch

oklch(52.3% 0.024 107.2)

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

#32453D

Mineral Blue · DarkSlateGray · Forest Green

HEX

#32453D

RGB

rgb(50, 69, 61)

HSL

hsl(155, 16%, 23%)

HSB

hsb(155, 28%, 27%)

CMYK

cmyk(28%, 0%, 12%, 73%)

Oklch

oklch(37.1% 0.028 167.1)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE7C2C

2B8EDE

Analogous

DE2B34

DE7C2C

DED52B

Triadic

DE7C2C

2BDE7C

7C2BDE

Split-Comp.

DE7C2C

2BDED5

2B34DE

Tetradic

DE7C2C

34DE2B

2B8EDE

D52BDE

Contrast Matrix WCAG 2.1 Contrast

DE7C2C	B58D55	9E8A6F	6B6B5B	32453D
—	1.0 Fail	1.1 Fail	1.8 Fail	3.4 AA Large
1.0 Fail	—	1.1 Fail	1.8 Fail	3.4 AA Large
1.1 Fail	1.1 Fail	—	1.6 Fail	3.1 AA Large
1.8 Fail	1.8 Fail	1.6 Fail	—	1.9 Fail
3.4 AA Large	3.4 AA Large	3.1 AA Large	1.9 Fail	—

White BG

3.0Fail

3.0AA Large

3.3AA Large

5.4AA

10.2AAA

Black BG

7.0AAA

6.9AA

6.3AA

3.9AA Large

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B33F

A4A363

959576

6B6B5F

3A3A3F

Deuteranopia

B9C144

A6A966

979877

6B6B60

39383F

Tritanopia

D94F52

B36D70

9D7B7C

6B6263

334041

Achromatopsia

909090

939393

8D8D8D

696969

3E3E3E

Shades & Tints Shades & Tints

#DE7C2C

Dark

Light

#B58D55

Dark

Light

#9E8A6F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de7c2c;
  --color-2: #b58d55;
  --color-3: #9e8a6f;
  --color-4: #6b6b5b;
  --color-5: #32453d;
}

SCSS

$color-1: #de7c2c;
$color-2: #b58d55;
$color-3: #9e8a6f;
$color-4: #6b6b5b;
$color-5: #32453d;

TAILWIND

colors: {
  'brand-1': '#de7c2c',
  'brand-2': '#b58d55',
  'brand-3': '#9e8a6f',
  'brand-4': '#6b6b5b',
  'brand-5': '#32453d',
}

RGB Array

[222, 124, 44], [181, 141, 85], [158, 138, 111], [107, 107, 91], [50, 69, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE7C2C, #B58D55, #9E8A6F, #6B6B5B, #32453D 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: #de7c2c; --color-2: #b58d55; --color-3: #9e8a6f; --color-4: #6b6b5b; --color-5: #32453d. 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 general-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