← Back to Editor

#D67203 · #6E5A4F · #8B9698 · #B4BDA0 · #E1DAA3

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D67203

Ochre · Chocolate · Amber Brown

HEX
#D67203
RGB
rgb(214, 114, 3)
HSL
hsl(32, 97%, 43%)
HSB
hsb(32, 99%, 84%)
CMYK
cmyk(0%, 47%, 99%, 16%)
Oklch
oklch(65.3% 0.158 56.7)

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

#6E5A4F

Tangerine · DimGray · Amber Brown

HEX
#6E5A4F
RGB
rgb(110, 90, 79)
HSL
hsl(21, 16%, 37%)
HSB
hsb(21, 28%, 43%)
CMYK
cmyk(0%, 18%, 28%, 57%)
Oklch
oklch(48.4% 0.031 50.4)

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

#8B9698

Ash · LightSlateGray · Silver Sand

HEX
#8B9698
RGB
rgb(139, 150, 152)
HSL
hsl(189, 6%, 57%)
HSB
hsb(189, 9%, 60%)
CMYK
cmyk(9%, 1%, 0%, 40%)
Oklch
oklch(66.5% 0.013 209.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#B4BDA0

Willow Green · DarkGray · Apple Green

HEX
#B4BDA0
RGB
rgb(180, 189, 160)
HSL
hsl(79, 18%, 68%)
HSB
hsb(79, 15%, 74%)
CMYK
cmyk(5%, 0%, 15%, 26%)
Oklch
oklch(78.3% 0.041 121.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E1DAA3

Fresh Green · Wheat · Lemon Cream

HEX
#E1DAA3
RGB
rgb(225, 218, 163)
HSL
hsl(53, 51%, 76%)
HSB
hsb(53, 28%, 88%)
CMYK
cmyk(0%, 3%, 28%, 12%)
Oklch
oklch(88.1% 0.072 101.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D67203
0367D8

Analogous

D80A03
D67203
D1D803

Triadic

D67203
03D875
7503D8

Split-Comp.

D67203
03D1D8
0A03D8

Tetradic

D67203
03D80A
0367D8
D803D1

Contrast Matrix WCAG 2.1 Contrast

D67203
6E5A4F
8B9698
B4BDA0
E1DAA3
—
1.9
Fail
1.1
Fail
1.7
Fail
2.4
Fail
1.9
Fail
—
2.1
Fail
3.3
AA Large
4.6
AA
1.1
Fail
2.1
Fail
—
1.6
Fail
2.1
Fail
1.7
Fail
3.3
AA Large
1.6
Fail
—
1.4
Fail
2.4
Fail
4.6
AA
2.1
Fail
1.4
Fail
—
White BG
3.4AA Large
6.5AA
3.0AA Large
2.0Fail
1.4Fail
Black BG
6.3AA
3.2AA Large
6.9AA
10.7AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA1E
656552
909098
B8B8A7
DEDEB0

Deuteranopia

B1B824
676852
8F8E97
B7B7A9
DEDFB4

Tritanopia

D13338
6D5454
8C9797
B4ADAE
E1BBBD

Achromatopsia

838383
5F5F5F
939393
B7B7B7
D6D6D6

Shades & Tints Shades & Tints

#D67203

Dark
Light

#6E5A4F

Dark
Light

#8B9698

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d67203;
  --color-2: #6e5a4f;
  --color-3: #8b9698;
  --color-4: #b4bda0;
  --color-5: #e1daa3;
}

SCSS

$color-1: #d67203;
$color-2: #6e5a4f;
$color-3: #8b9698;
$color-4: #b4bda0;
$color-5: #e1daa3;

TAILWIND

colors: {
  'brand-1': '#d67203',
  'brand-2': '#6e5a4f',
  'brand-3': '#8b9698',
  'brand-4': '#b4bda0',
  'brand-5': '#e1daa3',
}

RGB Array

[214, 114, 3], [110, 90, 79], [139, 150, 152], [180, 189, 160], [225, 218, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D67203, #6E5A4F, #8B9698, #B4BDA0, #E1DAA3 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: #d67203; --color-2: #6e5a4f; --color-3: #8b9698; --color-4: #b4bda0; --color-5: #e1daa3. 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