← Back to Editor

#D99D6C · #E6A36C · #E89D5F · #CF8A53 · #A88358

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D99D6C

Apricot · DarkSalmon · Warm Sun

HEX
#D99D6C
RGB
rgb(217, 157, 108)
HSL
hsl(27, 59%, 64%)
HSB
hsb(27, 50%, 85%)
CMYK
cmyk(0%, 28%, 50%, 15%)
Oklch
oklch(74.3% 0.097 59.8)

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

#E6A36C

Apricot · SandyBrown · Warm Sun

HEX
#E6A36C
RGB
rgb(230, 163, 108)
HSL
hsl(27, 71%, 66%)
HSB
hsb(27, 53%, 90%)
CMYK
cmyk(0%, 29%, 53%, 10%)
Oklch
oklch(76.8% 0.107 59.6)

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

#E89D5F

Apricot · SandyBrown · Warm Sun

HEX
#E89D5F
RGB
rgb(232, 157, 95)
HSL
hsl(27, 75%, 64%)
HSB
hsb(27, 59%, 91%)
CMYK
cmyk(0%, 32%, 59%, 9%)
Oklch
oklch(75.8% 0.119 59.2)

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

#CF8A53

Tangerine · SandyBrown · Warm Sun

HEX
#CF8A53
RGB
rgb(207, 138, 83)
HSL
hsl(27, 56%, 57%)
HSB
hsb(27, 60%, 81%)
CMYK
cmyk(0%, 33%, 60%, 19%)
Oklch
oklch(69.2% 0.110 58.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#A88358

Ochre · Gray · Amber Brown

HEX
#A88358
RGB
rgb(168, 131, 88)
HSL
hsl(32, 31%, 50%)
HSB
hsb(32, 48%, 66%)
CMYK
cmyk(0%, 22%, 48%, 34%)
Oklch
oklch(63.5% 0.074 70.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D99D6C
6DA9D9

Analogous

D96D72
D99D6C
D9D46D

Triadic

D99D6C
6DD99E
9E6DD9

Split-Comp.

D99D6C
6DD9D4
6D72D9

Tetradic

D99D6C
72D96D
6DA9D9
D46DD9

Contrast Matrix WCAG 2.1 Contrast

D99D6C
E6A36C
E89D5F
CF8A53
A88358
—
1.1
Fail
1.0
Fail
1.2
Fail
1.5
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.6
Fail
1.0
Fail
1.0
Fail
—
1.3
Fail
1.6
Fail
1.2
Fail
1.3
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.6
Fail
1.2
Fail
—
White BG
2.3Fail
2.1Fail
2.2Fail
2.8Fail
3.5AA Large
Black BG
9.0AAA
9.8AAA
9.4AAA
7.4AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBE78
C9C879
C8C76E
B1B160
989862

Deuteranopia

C3C77B
CDD27D
CCD172
B5BA64
9A9D65

Tritanopia

D68183
E38486
E47A7C
CC6B6D
A66B6C

Achromatopsia

A9A9A9
B1B1B1
ACACAC
989898
898989

Shades & Tints Shades & Tints

#D99D6C

Dark
Light

#E6A36C

Dark
Light

#E89D5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d99d6c;
  --color-2: #e6a36c;
  --color-3: #e89d5f;
  --color-4: #cf8a53;
  --color-5: #a88358;
}

SCSS

$color-1: #d99d6c;
$color-2: #e6a36c;
$color-3: #e89d5f;
$color-4: #cf8a53;
$color-5: #a88358;

TAILWIND

colors: {
  'brand-1': '#d99d6c',
  'brand-2': '#e6a36c',
  'brand-3': '#e89d5f',
  'brand-4': '#cf8a53',
  'brand-5': '#a88358',
}

RGB Array

[217, 157, 108], [230, 163, 108], [232, 157, 95], [207, 138, 83], [168, 131, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D99D6C, #E6A36C, #E89D5F, #CF8A53, #A88358 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: #d99d6c; --color-2: #e6a36c; --color-3: #e89d5f; --color-4: #cf8a53; --color-5: #a88358. 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