← Back to Editor

#D67861 · #E8B377 · #E0D3A5 · #93B49E · #63888D

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

#D67861

Peach Pink · Salmon · Coral Red

HEX
#D67861
RGB
rgb(214, 120, 97)
HSL
hsl(12, 59%, 61%)
HSB
hsb(12, 55%, 84%)
CMYK
cmyk(0%, 44%, 55%, 16%)
Oklch
oklch(67.2% 0.123 34.7)

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

#E8B377

Ginger · BurlyWood · Warm Sun

HEX
#E8B377
RGB
rgb(232, 179, 119)
HSL
hsl(32, 71%, 69%)
HSB
hsb(32, 49%, 91%)
CMYK
cmyk(0%, 23%, 49%, 9%)
Oklch
oklch(80.2% 0.099 69.1)

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

#E0D3A5

Goose Yellow · Wheat · Lemon Cream

HEX
#E0D3A5
RGB
rgb(224, 211, 165)
HSL
hsl(47, 49%, 76%)
HSB
hsb(47, 26%, 88%)
CMYK
cmyk(0%, 6%, 26%, 12%)
Oklch
oklch(86.6% 0.062 94.2)

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

#93B49E

Celadon · DarkSeaGreen · Apple Green

HEX
#93B49E
RGB
rgb(147, 180, 158)
HSL
hsl(140, 18%, 64%)
HSB
hsb(140, 18%, 71%)
CMYK
cmyk(18%, 0%, 12%, 29%)
Oklch
oklch(73.9% 0.048 155.9)

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

#63888D

Slate Blue · SlateGray · Mint Ice

HEX
#63888D
RGB
rgb(99, 136, 141)
HSL
hsl(187, 18%, 47%)
HSB
hsb(187, 30%, 55%)
CMYK
cmyk(30%, 4%, 0%, 45%)
Oklch
oklch(60.1% 0.042 206.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D67861
61BFD6

Analogous

D66184
D67861
D6B361

Triadic

D67861
61D678
7861D6

Split-Comp.

D67861
61D6B3
6184D6

Tetradic

D67861
84D661
61BFD6
B361D6

Contrast Matrix WCAG 2.1 Contrast

D67861
E8B377
E0D3A5
93B49E
63888D
—
1.7
Fail
2.1
Fail
1.4
Fail
1.2
Fail
1.7
Fail
—
1.3
Fail
1.2
Fail
2.1
Fail
2.1
Fail
1.3
Fail
—
1.5
Fail
2.6
Fail
1.4
Fail
1.2
Fail
1.5
Fail
—
1.7
Fail
1.2
Fail
2.1
Fail
2.6
Fail
1.7
Fail
—
White BG
3.1AA Large
1.9Fail
1.5Fail
2.3Fail
3.9AA Large
Black BG
6.7AA
11.1AAA
14.0AAA
9.3AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC67
D1D186
DADAB0
A1A2A3
73738C

Deuteranopia

B3BA68
D4D889
DBDCB3
9F9DA5
716E8C

Tritanopia

D16B6C
E59194
DFB9BB
95A8A8
658B8B

Achromatopsia

919191
BCBCBC
D2D2D2
A8A8A8
7E7E7E

Shades & Tints Shades & Tints

#D67861

Dark
Light

#E8B377

Dark
Light

#E0D3A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d67861;
  --color-2: #e8b377;
  --color-3: #e0d3a5;
  --color-4: #93b49e;
  --color-5: #63888d;
}

SCSS

$color-1: #d67861;
$color-2: #e8b377;
$color-3: #e0d3a5;
$color-4: #93b49e;
$color-5: #63888d;

TAILWIND

colors: {
  'brand-1': '#d67861',
  'brand-2': '#e8b377',
  'brand-3': '#e0d3a5',
  'brand-4': '#93b49e',
  'brand-5': '#63888d',
}

RGB Array

[214, 120, 97], [232, 179, 119], [224, 211, 165], [147, 180, 158], [99, 136, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D67861, #E8B377, #E0D3A5, #93B49E, #63888D 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: #d67861; --color-2: #e8b377; --color-3: #e0d3a5; --color-4: #93b49e; --color-5: #63888d. 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