#E6553A + #542C3E + #5A4064 + #9DB67D + #CAE62E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E6553A

Vermilion · Tomato · Passion Red

HEX

#E6553A

RGB

rgb(230, 85, 58)

HSL

hsl(9, 77%, 56%)

HSB

hsb(9, 75%, 90%)

CMYK

cmyk(0%, 63%, 75%, 10%)

Oklch

oklch(63.9% 0.185 32.7)

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

#542C3E

Dark Violet · DarkSlateGray · Raspberry

HEX

#542C3E

RGB

rgb(84, 44, 62)

HSL

hsl(333, 31%, 25%)

HSB

hsb(333, 48%, 33%)

CMYK

cmyk(0%, 48%, 26%, 67%)

Oklch

oklch(35.1% 0.064 352.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#5A4064

Dark Plum · DarkSlateBlue · Eggplant

HEX

#5A4064

RGB

rgb(90, 64, 100)

HSL

hsl(283, 22%, 32%)

HSB

hsb(283, 36%, 39%)

CMYK

cmyk(10%, 36%, 0%, 61%)

Oklch

oklch(41.5% 0.067 316.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#9DB67D

Grass Green · DarkSeaGreen · Olive Green

HEX

#9DB67D

RGB

rgb(157, 182, 125)

HSL

hsl(86, 28%, 60%)

HSB

hsb(86, 31%, 71%)

CMYK

cmyk(14%, 0%, 31%, 29%)

Oklch

oklch(74.3% 0.083 127.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#CAE62E

Autumn Sage · GreenYellow · Sunflower

HEX

#CAE62E

RGB

rgb(202, 230, 46)

HSL

hsl(69, 79%, 54%)

HSB

hsb(69, 80%, 90%)

CMYK

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

Oklch

oklch(87.5% 0.193 118.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6553A

38CBE5

Analogous

E53875

E6553A

E5A938

Triadic

E6553A

38E552

5238E5

Split-Comp.

E6553A

38E5A9

3875E5

Tetradic

E6553A

75E538

38CBE5

A938E5

Contrast Matrix WCAG 2.1 Contrast

E6553A	542C3E	5A4064	9DB67D	CAE62E
—	3.2 AA Large	2.4 Fail	1.6 Fail	2.6 Fail
3.2 AA Large	—	1.3 Fail	5.2 AA	8.2 AAA
2.4 Fail	1.3 Fail	—	4.0 AA Large	6.3 AA
1.6 Fail	5.2 AA	4.0 AA Large	—	1.6 Fail
2.6 Fail	8.2 AAA	6.3 AA	1.6 Fail	—

White BG

3.7AA Large

11.6AAA

8.9AAA

2.2Fail

1.4Fail

Black BG

5.7AA

1.8Fail

2.4Fail

9.4AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A641

43423A

4F4F5B

A8A88B

D6D65B

Deuteranopia

B0BB42

454839

505259

A6A58E

D5D265

Tritanopia

DF4647

523635

595453

9E9698

CB7E85

Achromatopsia

7D7D7D

3A3A3A

4C4C4C

A8A8A8

C9C9C9

Shades & Tints Shades & Tints

#E6553A

Dark

Light

#542C3E

Dark

Light

#5A4064

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6553a;
  --color-2: #542c3e;
  --color-3: #5a4064;
  --color-4: #9db67d;
  --color-5: #cae62e;
}

SCSS

$color-1: #e6553a;
$color-2: #542c3e;
$color-3: #5a4064;
$color-4: #9db67d;
$color-5: #cae62e;

TAILWIND

colors: {
  'brand-1': '#e6553a',
  'brand-2': '#542c3e',
  'brand-3': '#5a4064',
  'brand-4': '#9db67d',
  'brand-5': '#cae62e',
}

RGB Array

[230, 85, 58], [84, 44, 62], [90, 64, 100], [157, 182, 125], [202, 230, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E6553A, #542C3E, #5A4064, #9DB67D, #CAE62E 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: #e6553a; --color-2: #542c3e; --color-3: #5a4064; --color-4: #9db67d; --color-5: #cae62e. 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