← Back to Editor

#EF8680 · #D6B69F · #BEBD9F · #88A7A1 · #498699

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

#EF8680

Peach Pink · LightCoral · Coral Red

HEX
#EF8680
RGB
rgb(239, 134, 128)
HSL
hsl(3, 78%, 72%)
HSB
hsb(3, 46%, 94%)
CMYK
cmyk(0%, 44%, 46%, 6%)
Oklch
oklch(73.3% 0.129 24.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D6B69F

Apricot · Tan · Warm Sun

HEX
#D6B69F
RGB
rgb(214, 182, 159)
HSL
hsl(25, 40%, 73%)
HSB
hsb(25, 26%, 84%)
CMYK
cmyk(0%, 15%, 26%, 16%)
Oklch
oklch(79.8% 0.049 57.7)

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

#BEBD9F

Fresh Green · Tan · Sunflower

HEX
#BEBD9F
RGB
rgb(190, 189, 159)
HSL
hsl(58, 19%, 68%)
HSB
hsb(58, 16%, 75%)
CMYK
cmyk(0%, 1%, 16%, 25%)
Oklch
oklch(79.1% 0.041 105.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#88A7A1

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#88A7A1
RGB
rgb(136, 167, 161)
HSL
hsl(168, 15%, 59%)
HSB
hsb(168, 19%, 65%)
CMYK
cmyk(19%, 0%, 4%, 35%)
Oklch
oklch(70.3% 0.035 182.2)

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

#498699

Slate Blue · SteelBlue · Mint Ice

HEX
#498699
RGB
rgb(73, 134, 153)
HSL
hsl(194, 35%, 44%)
HSB
hsb(194, 52%, 60%)
CMYK
cmyk(52%, 12%, 0%, 40%)
Oklch
oklch(58.7% 0.069 220.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF8680
80EAEF

Analogous

EF80B2
EF8680
EFBD80

Triadic

EF8680
80EF85
8580EF

Split-Comp.

EF8680
80EFBD
80B2EF

Tetradic

EF8680
B2EF80
80EAEF
BD80EF

Contrast Matrix WCAG 2.1 Contrast

EF8680
D6B69F
BEBD9F
88A7A1
498699
—
1.3
Fail
1.3
Fail
1.0
Fail
1.6
Fail
1.3
Fail
—
1.0
Fail
1.4
Fail
2.1
Fail
1.3
Fail
1.0
Fail
—
1.4
Fail
2.1
Fail
1.0
Fail
1.4
Fail
1.4
Fail
—
1.6
Fail
1.6
Fail
2.1
Fail
2.1
Fail
1.6
Fail
—
White BG
2.5Fail
1.9Fail
1.9Fail
2.6Fail
4.1AA Large
Black BG
8.4AAA
11.1AAA
11.0AAA
8.1AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C181
C8C8A5
BEBEA6
9596A2
636494

Deuteranopia

C8CF82
CACCA6
BEBEA8
9491A3
605B93

Tritanopia

EA8383
D4A9AA
BEACAD
8AA4A4
4C9190

Achromatopsia

A5A5A5
BDBDBD
BABABA
9D9D9D
767676

Shades & Tints Shades & Tints

#EF8680

Dark
Light

#D6B69F

Dark
Light

#BEBD9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef8680;
  --color-2: #d6b69f;
  --color-3: #bebd9f;
  --color-4: #88a7a1;
  --color-5: #498699;
}

SCSS

$color-1: #ef8680;
$color-2: #d6b69f;
$color-3: #bebd9f;
$color-4: #88a7a1;
$color-5: #498699;

TAILWIND

colors: {
  'brand-1': '#ef8680',
  'brand-2': '#d6b69f',
  'brand-3': '#bebd9f',
  'brand-4': '#88a7a1',
  'brand-5': '#498699',
}

RGB Array

[239, 134, 128], [214, 182, 159], [190, 189, 159], [136, 167, 161], [73, 134, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EF8680, #D6B69F, #BEBD9F, #88A7A1, #498699 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: #ef8680; --color-2: #d6b69f; --color-3: #bebd9f; --color-4: #88a7a1; --color-5: #498699. 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