#E0CA9D + #DB6225 + #CC4D33 + #67736C + #7C918E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E0CA9D

Goose Yellow · BurlyWood · Sunflower

HEX

#E0CA9D

RGB

rgb(224, 202, 157)

HSL

hsl(40, 52%, 75%)

HSB

hsb(40, 30%, 88%)

CMYK

cmyk(0%, 10%, 30%, 12%)

Oklch

oklch(84.6% 0.064 84.9)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#DB6225

Tangerine · Chocolate · Amber Brown

HEX

#DB6225

RGB

rgb(219, 98, 37)

HSL

hsl(20, 72%, 50%)

HSB

hsb(20, 83%, 86%)

CMYK

cmyk(0%, 55%, 83%, 14%)

Oklch

oklch(63.7% 0.167 43.8)

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

#CC4D33

Crimson · Chocolate · Passion Red

HEX

#CC4D33

RGB

rgb(204, 77, 51)

HSL

hsl(10, 60%, 50%)

HSB

hsb(10, 75%, 80%)

CMYK

cmyk(0%, 62%, 75%, 20%)

Oklch

oklch(58.7% 0.167 33.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#67736C

Ink Gray · DimGray · Warm Gray

HEX

#67736C

RGB

rgb(103, 115, 108)

HSL

hsl(145, 6%, 43%)

HSB

hsb(145, 10%, 45%)

CMYK

cmyk(10%, 0%, 6%, 55%)

Oklch

oklch(54.3% 0.018 160.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#7C918E

Mineral Blue · LightSlateGray · Warm Gray

HEX

#7C918E

RGB

rgb(124, 145, 142)

HSL

hsl(171, 9%, 53%)

HSB

hsb(171, 14%, 57%)

CMYK

cmyk(14%, 0%, 2%, 43%)

Oklch

oklch(63.9% 0.024 186.1)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0CA9D

9EB4E0

Analogous

E0A99E

E0CA9D

D5E09E

Triadic

E0CA9D

9EE0CA

CA9EE0

Split-Comp.

E0CA9D

9ED5E0

A99EE0

Tetradic

E0CA9D

9EE0A9

9EB4E0

E09ED5

Contrast Matrix WCAG 2.1 Contrast

E0CA9D	DB6225	CC4D33	67736C	7C918E
—	2.3 Fail	2.8 Fail	3.1 AA Large	2.1 Fail
2.3 Fail	—	1.2 Fail	1.4 Fail	1.1 Fail
2.8 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
3.1 AA Large	1.4 Fail	1.1 Fail	—	1.5 Fail
2.1 Fail	1.1 Fail	1.3 Fail	1.5 Fail	—

White BG

1.6Fail

3.6AA Large

4.5AA Large

4.9AA

3.3AA Large

Black BG

13.1AAA

5.8AA

4.7AA

4.2AA Large

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6A8

A7A634

959439

6C6C6E

85858F

Deuteranopia

D8D9AB

AEB737

9CA63B

6C6B6E

84828F

Tritanopia

DFB0B2

D53F42

C63E3F

686F6F

7D8F8F

Achromatopsia

CBCBCB

7F7F7F

707070

6F6F6F

8A8A8A

Shades & Tints Shades & Tints

#E0CA9D

Dark

Light

#DB6225

Dark

Light

#CC4D33

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0ca9d;
  --color-2: #db6225;
  --color-3: #cc4d33;
  --color-4: #67736c;
  --color-5: #7c918e;
}

SCSS

$color-1: #e0ca9d;
$color-2: #db6225;
$color-3: #cc4d33;
$color-4: #67736c;
$color-5: #7c918e;

TAILWIND

colors: {
  'brand-1': '#e0ca9d',
  'brand-2': '#db6225',
  'brand-3': '#cc4d33',
  'brand-4': '#67736c',
  'brand-5': '#7c918e',
}

RGB Array

[224, 202, 157], [219, 98, 37], [204, 77, 51], [103, 115, 108], [124, 145, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0CA9D, #DB6225, #CC4D33, #67736C, #7C918E 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: #e0ca9d; --color-2: #db6225; --color-3: #cc4d33; --color-4: #67736c; --color-5: #7c918e. 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