← Back to Editor

#E8B535 · #A09D8C · #40878D · #52A1A6 · #62C3C9

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

#E8B535

Ginger · GoldenRod · Sunflower

HEX
#E8B535
RGB
rgb(232, 181, 53)
HSL
hsl(43, 80%, 56%)
HSB
hsb(43, 77%, 91%)
CMYK
cmyk(0%, 22%, 77%, 9%)
Oklch
oklch(79.9% 0.148 85.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A09D8C

Autumn Sage · DarkGray · Sunflower

HEX
#A09D8C
RGB
rgb(160, 157, 140)
HSL
hsl(51, 10%, 59%)
HSB
hsb(51, 12%, 63%)
CMYK
cmyk(0%, 2%, 12%, 37%)
Oklch
oklch(69.4% 0.024 98.8)

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

#40878D

Slate Blue · SteelBlue · Mint Ice

HEX
#40878D
RGB
rgb(64, 135, 141)
HSL
hsl(185, 38%, 40%)
HSB
hsb(185, 55%, 55%)
CMYK
cmyk(55%, 4%, 0%, 45%)
Oklch
oklch(58.0% 0.071 202.8)

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

#52A1A6

Slate Blue · CadetBlue · Mint Ice

HEX
#52A1A6
RGB
rgb(82, 161, 166)
HSL
hsl(184, 34%, 49%)
HSB
hsb(184, 51%, 65%)
CMYK
cmyk(51%, 3%, 0%, 35%)
Oklch
oklch(66.1% 0.078 200.9)

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

#62C3C9

Slate Blue · MediumTurquoise · Lake Green

HEX
#62C3C9
RGB
rgb(98, 195, 201)
HSL
hsl(183, 49%, 59%)
HSB
hsb(183, 51%, 79%)
CMYK
cmyk(51%, 3%, 0%, 21%)
Oklch
oklch(76.1% 0.092 200.8)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8B535
3568E9

Analogous

E95C35
E8B535
C2E935

Triadic

E8B535
35E9B6
B635E9

Split-Comp.

E8B535
35C2E9
5C35E9

Tetradic

E8B535
35E95C
3568E9
E935C2

Contrast Matrix WCAG 2.1 Contrast

E8B535
A09D8C
40878D
52A1A6
62C3C9
—
1.4
Fail
2.2
Fail
1.6
Fail
1.1
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
1.6
Fail
1.1
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
2.0
Fail
1.5
Fail
—
White BG
1.9Fail
2.7Fail
4.1AA Large
3.0Fail
2.1Fail
Black BG
11.1AAA
7.7AAA
5.1AA
7.0AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D154
9F9F90
5F5F8C
7475A5
8C8DC8

Deuteranopia

D5D95B
9F9F91
5B558B
706AA5
867FC7

Tritanopia

E56C72
A09394
448A8A
56A4A4
67C6C6

Achromatopsia

B6B6B6
9C9C9C
727272
8A8A8A
A7A7A7

Shades & Tints Shades & Tints

#E8B535

Dark
Light

#A09D8C

Dark
Light

#40878D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8b535;
  --color-2: #a09d8c;
  --color-3: #40878d;
  --color-4: #52a1a6;
  --color-5: #62c3c9;
}

SCSS

$color-1: #e8b535;
$color-2: #a09d8c;
$color-3: #40878d;
$color-4: #52a1a6;
$color-5: #62c3c9;

TAILWIND

colors: {
  'brand-1': '#e8b535',
  'brand-2': '#a09d8c',
  'brand-3': '#40878d',
  'brand-4': '#52a1a6',
  'brand-5': '#62c3c9',
}

RGB Array

[232, 181, 53], [160, 157, 140], [64, 135, 141], [82, 161, 166], [98, 195, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8B535, #A09D8C, #40878D, #52A1A6, #62C3C9 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: #e8b535; --color-2: #a09d8c; --color-3: #40878d; --color-4: #52a1a6; --color-5: #62c3c9. 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