#E3C875 + #52958C + #D04711 + #385C8C + #3E388C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E3C875

Ginger · BurlyWood · Sunflower

HEX

#E3C875

RGB

rgb(227, 200, 117)

HSL

hsl(45, 66%, 67%)

HSB

hsb(45, 48%, 89%)

CMYK

cmyk(0%, 12%, 48%, 11%)

Oklch

oklch(83.8% 0.107 91.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#52958C

Mineral Blue · CadetBlue · Mint Ice

HEX

#52958C

RGB

rgb(82, 149, 140)

HSL

hsl(172, 29%, 45%)

HSB

hsb(172, 45%, 58%)

CMYK

cmyk(45%, 0%, 6%, 42%)

Oklch

oklch(62.3% 0.070 184.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D04711

Tangerine · Chocolate · Amber Brown

HEX

#D04711

RGB

rgb(208, 71, 17)

HSL

hsl(17, 85%, 44%)

HSB

hsb(17, 92%, 82%)

CMYK

cmyk(0%, 66%, 92%, 18%)

Oklch

oklch(58.4% 0.182 38.3)

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

#385C8C

Indigo · DarkSlateBlue · Prussian Blue

HEX

#385C8C

RGB

rgb(56, 92, 140)

HSL

hsl(214, 43%, 38%)

HSB

hsb(214, 60%, 55%)

CMYK

cmyk(60%, 34%, 0%, 45%)

Oklch

oklch(47.1% 0.089 256.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3E388C

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#3E388C

RGB

rgb(62, 56, 140)

HSL

hsl(244, 43%, 38%)

HSB

hsb(244, 60%, 55%)

CMYK

cmyk(56%, 60%, 0%, 45%)

Oklch

oklch(39.7% 0.135 281.5)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3C875

738FE2

Analogous

E28F73

E3C875

C7E273

Triadic

E3C875

73E2C7

C773E2

Split-Comp.

E3C875

73C7E2

8F73E2

Tetradic

E3C875

73E28F

738FE2

E273C7

Contrast Matrix WCAG 2.1 Contrast

E3C875	52958C	D04711	385C8C	3E388C
—	2.1 Fail	2.8 Fail	4.2 AA Large	5.9 AA
2.1 Fail	—	1.3 Fail	2.0 Fail	2.8 Fail
2.8 Fail	1.3 Fail	—	1.5 Fail	2.1 Fail
4.2 AA Large	2.0 Fail	1.5 Fail	—	1.4 Fail
5.9 AA	2.8 Fail	2.1 Fail	1.4 Fail	—

White BG

1.6Fail

3.5AA Large

4.6AA

6.8AA

9.8AAA

Black BG

12.8AAA

6.0AA

4.6AA

3.1AA Large

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D789

6F708E

95931E

484880

3B3B78

Deuteranopia

D9DB8E

6B668F

9DA721

46437E

3C3C73

Tritanopia

E2999C

559090

C9282B

3A7775

3E6864

Achromatopsia

C7C7C7

808080

6A6A6A

575757

434343

Shades & Tints Shades & Tints

#E3C875

Dark

Light

#52958C

Dark

Light

#D04711

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3c875;
  --color-2: #52958c;
  --color-3: #d04711;
  --color-4: #385c8c;
  --color-5: #3e388c;
}

SCSS

$color-1: #e3c875;
$color-2: #52958c;
$color-3: #d04711;
$color-4: #385c8c;
$color-5: #3e388c;

TAILWIND

colors: {
  'brand-1': '#e3c875',
  'brand-2': '#52958c',
  'brand-3': '#d04711',
  'brand-4': '#385c8c',
  'brand-5': '#3e388c',
}

RGB Array

[227, 200, 117], [82, 149, 140], [208, 71, 17], [56, 92, 140], [62, 56, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #E3C875, #52958C, #D04711, #385C8C, #3E388C 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: #e3c875; --color-2: #52958c; --color-3: #d04711; --color-4: #385c8c; --color-5: #3e388c. 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 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