← Back to Editor

#EFE4B6 · #BEC8AD · #5398B5 · #563C57 · #ECA182

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 LibraryData Visualization

Color Details Color Details

#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

#BEC8AD

Willow Green · Silver · Apple Green

HEX
#BEC8AD
RGB
rgb(190, 200, 173)
HSL
hsl(82, 20%, 73%)
HSB
hsb(82, 13%, 78%)
CMYK
cmyk(5%, 0%, 13%, 22%)
Oklch
oklch(81.8% 0.038 123.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#5398B5

Slate Blue · CadetBlue · Lake Green

HEX
#5398B5
RGB
rgb(83, 152, 181)
HSL
hsl(198, 40%, 52%)
HSB
hsb(198, 54%, 71%)
CMYK
cmyk(54%, 16%, 0%, 29%)
Oklch
oklch(64.6% 0.082 227.5)

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

#563C57

Dark Plum · DarkSlateGray · Eggplant

HEX
#563C57
RGB
rgb(86, 60, 87)
HSL
hsl(298, 18%, 29%)
HSB
hsb(298, 31%, 34%)
CMYK
cmyk(1%, 31%, 0%, 66%)
Oklch
oklch(39.6% 0.056 325.3)

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

#ECA182

Apricot · DarkSalmon · Warm Sun

HEX
#ECA182
RGB
rgb(236, 161, 130)
HSL
hsl(18, 74%, 72%)
HSB
hsb(18, 45%, 93%)
CMYK
cmyk(0%, 32%, 45%, 7%)
Oklch
oklch(77.5% 0.100 43.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFE4B6
B8C3EF

Analogous

EFC9B8
EFE4B6
DFEFB8

Triadic

EFE4B6
B8EFE4
E4B8EF

Split-Comp.

EFE4B6
B8DFEF
C9B8EF

Tetradic

EFE4B6
B8EFC9
B8C3EF
EFB8DF

Contrast Matrix WCAG 2.1 Contrast

EFE4B6
BEC8AD
5398B5
563C57
ECA182
—
1.4
Fail
2.5
Fail
7.5
AAA
1.6
Fail
1.4
Fail
—
1.8
Fail
5.5
AA
1.2
Fail
2.5
Fail
1.8
Fail
—
3.0
Fail
1.5
Fail
7.5
AAA
5.5
AA
3.0
Fail
—
4.6
AA
1.6
Fail
1.2
Fail
1.5
Fail
4.6
AA
—
White BG
1.3Fail
1.7Fail
3.2AA Large
9.6AAA
2.1Fail
Black BG
16.4AAA
12.1AAA
6.5AA
2.2Fail
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAC1
C2C2B4
7171AE
4B4B50
CCCB8A

Deuteranopia

EBECC4
C2C1B5
6D68AC
4C4E4F
D0D68B

Tritanopia

EECACC
BFB9BA
56A8A7
554B4A
E88F91

Achromatopsia

E2E2E2
C2C2C2
878787
474747
B4B4B4

Shades & Tints Shades & Tints

#EFE4B6

Dark
Light

#BEC8AD

Dark
Light

#5398B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efe4b6;
  --color-2: #bec8ad;
  --color-3: #5398b5;
  --color-4: #563c57;
  --color-5: #eca182;
}

SCSS

$color-1: #efe4b6;
$color-2: #bec8ad;
$color-3: #5398b5;
$color-4: #563c57;
$color-5: #eca182;

TAILWIND

colors: {
  'brand-1': '#efe4b6',
  'brand-2': '#bec8ad',
  'brand-3': '#5398b5',
  'brand-4': '#563c57',
  'brand-5': '#eca182',
}

RGB Array

[239, 228, 182], [190, 200, 173], [83, 152, 181], [86, 60, 87], [236, 161, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EFE4B6, #BEC8AD, #5398B5, #563C57, #ECA182 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #efe4b6; --color-2: #bec8ad; --color-3: #5398b5; --color-4: #563c57; --color-5: #eca182. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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