← Back to Editor

#8EA5CE · #8575A6 · #E7696C · #E8A018 · #EFE4B6

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

#8EA5CE

Azure · DarkGray · Cobalt Blue

HEX
#8EA5CE
RGB
rgb(142, 165, 206)
HSL
hsl(218, 40%, 68%)
HSB
hsb(218, 31%, 81%)
CMYK
cmyk(31%, 20%, 0%, 19%)
Oklch
oklch(71.9% 0.065 261.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8575A6

Deep Indigo · LightSlateGray · Violet

HEX
#8575A6
RGB
rgb(133, 117, 166)
HSL
hsl(260, 22%, 55%)
HSB
hsb(260, 30%, 65%)
CMYK
cmyk(20%, 30%, 0%, 35%)
Oklch
oklch(59.6% 0.075 299.1)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#E7696C

Peach Pink · Salmon · Coral Red

HEX
#E7696C
RGB
rgb(231, 105, 108)
HSL
hsl(359, 72%, 66%)
HSB
hsb(359, 55%, 91%)
CMYK
cmyk(0%, 55%, 53%, 9%)
Oklch
oklch(67.4% 0.157 20.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E8A018

Ochre · GoldenRod · Amber Brown

HEX
#E8A018
RGB
rgb(232, 160, 24)
HSL
hsl(39, 82%, 50%)
HSB
hsb(39, 90%, 91%)
CMYK
cmyk(0%, 31%, 90%, 9%)
Oklch
oklch(75.7% 0.155 75.5)

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

#EFE4B6

Goose Yellow · Wheat · Lemon Cream

HEX
#EFE4B6
RGB
rgb(239, 228, 182)
HSL
hsl(48, 64%, 83%)
HSB
hsb(48, 24%, 94%)
CMYK
cmyk(0%, 5%, 24%, 6%)
Oklch
oklch(91.6% 0.061 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EA5CE
CEB68D

Analogous

8DC5CE
8EA5CE
958DCE

Triadic

8EA5CE
CE8DA5
A5CE8D

Split-Comp.

8EA5CE
CE958D
C5CE8D

Tetradic

8EA5CE
CE8DC5
CEB68D
8DCE95

Contrast Matrix WCAG 2.1 Contrast

8EA5CE
8575A6
E7696C
E8A018
EFE4B6
—
1.7
Fail
1.3
Fail
1.1
Fail
2.0
Fail
1.7
Fail
—
1.3
Fail
1.9
Fail
3.2
AA Large
1.3
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
1.1
Fail
1.9
Fail
1.4
Fail
—
1.7
Fail
2.0
Fail
3.2
AA Large
2.5
Fail
1.7
Fail
—
White BG
2.5Fail
4.1AA Large
3.2AA Large
2.2Fail
1.3Fail
Black BG
8.4AAA
5.1AA
6.6AA
9.5AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898C4
7E7E9A
B0AF6B
C9C839
EAEAC1

Deuteranopia

9795C2
7F8097
B8C16B
CDD241
EBECC4

Tritanopia

8FBCBB
84918F
E16B6B
E45359
EECACC

Achromatopsia

A3A3A3
7F7F7F
8F8F8F
A6A6A6
E2E2E2

Shades & Tints Shades & Tints

#8EA5CE

Dark
Light

#8575A6

Dark
Light

#E7696C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ea5ce;
  --color-2: #8575a6;
  --color-3: #e7696c;
  --color-4: #e8a018;
  --color-5: #efe4b6;
}

SCSS

$color-1: #8ea5ce;
$color-2: #8575a6;
$color-3: #e7696c;
$color-4: #e8a018;
$color-5: #efe4b6;

TAILWIND

colors: {
  'brand-1': '#8ea5ce',
  'brand-2': '#8575a6',
  'brand-3': '#e7696c',
  'brand-4': '#e8a018',
  'brand-5': '#efe4b6',
}

RGB Array

[142, 165, 206], [133, 117, 166], [231, 105, 108], [232, 160, 24], [239, 228, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EA5CE, #8575A6, #E7696C, #E8A018, #EFE4B6 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: #8ea5ce; --color-2: #8575a6; --color-3: #e7696c; --color-4: #e8a018; --color-5: #efe4b6. 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