← Back to Editor

#D98D63 · #D14357 · #86444D · #C5B993 · #E7E6A4

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

#D98D63

Apricot · DarkSalmon · Warm Sun

HEX
#D98D63
RGB
rgb(217, 141, 99)
HSL
hsl(21, 61%, 62%)
HSB
hsb(21, 54%, 85%)
CMYK
cmyk(0%, 35%, 54%, 15%)
Oklch
oklch(71.2% 0.109 49.3)

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

#D14357

Vermilion · Crimson · Passion Red

HEX
#D14357
RGB
rgb(209, 67, 87)
HSL
hsl(352, 61%, 54%)
HSB
hsb(352, 68%, 82%)
CMYK
cmyk(0%, 68%, 58%, 18%)
Oklch
oklch(58.9% 0.178 16.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#86444D

Crimson · Sienna · Wine Red

HEX
#86444D
RGB
rgb(134, 68, 77)
HSL
hsl(352, 33%, 40%)
HSB
hsb(352, 49%, 53%)
CMYK
cmyk(0%, 49%, 43%, 47%)
Oklch
oklch(47.1% 0.090 12.5)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#C5B993

Ginger · Tan · Sunflower

HEX
#C5B993
RGB
rgb(197, 185, 147)
HSL
hsl(46, 30%, 67%)
HSB
hsb(46, 25%, 77%)
CMYK
cmyk(0%, 6%, 25%, 23%)
Oklch
oklch(78.6% 0.053 92.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E7E6A4

Fresh Green · Wheat · Lemon Cream

HEX
#E7E6A4
RGB
rgb(231, 230, 164)
HSL
hsl(59, 58%, 77%)
HSB
hsb(59, 29%, 91%)
CMYK
cmyk(0%, 0%, 29%, 9%)
Oklch
oklch(91.0% 0.085 107.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D98D63
63B0D9

Analogous

D96375
D98D63
D9C763

Triadic

D98D63
63D98C
8C63D9

Split-Comp.

D98D63
63D9C7
6375D9

Tetradic

D98D63
75D963
63B0D9
C763D9

Contrast Matrix WCAG 2.1 Contrast

D98D63
D14357
86444D
C5B993
E7E6A4
—
1.7
Fail
2.7
Fail
1.4
Fail
2.0
Fail
1.7
Fail
—
1.6
Fail
2.3
Fail
3.5
AA Large
2.7
Fail
1.6
Fail
—
3.6
AA Large
5.5
AA
1.4
Fail
2.3
Fail
3.6
AA Large
—
1.5
Fail
2.0
Fail
3.5
AA Large
5.5
AA
1.5
Fail
—
White BG
2.6Fail
4.5AA
7.1AAA
2.0Fail
1.3Fail
Black BG
7.9AAA
4.7AA
2.9Fail
10.7AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B76D
949252
69694B
C0C09C
E7E7B4

Deuteranopia

BDC270
9CA651
6D724A
C1C19E
E7E7B8

Tritanopia

D57577
CA4E4E
834949
C4A3A5
E7C1C3

Achromatopsia

9F9F9F
707070
595959
B8B8B8
DFDFDF

Shades & Tints Shades & Tints

#D98D63

Dark
Light

#D14357

Dark
Light

#86444D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d98d63;
  --color-2: #d14357;
  --color-3: #86444d;
  --color-4: #c5b993;
  --color-5: #e7e6a4;
}

SCSS

$color-1: #d98d63;
$color-2: #d14357;
$color-3: #86444d;
$color-4: #c5b993;
$color-5: #e7e6a4;

TAILWIND

colors: {
  'brand-1': '#d98d63',
  'brand-2': '#d14357',
  'brand-3': '#86444d',
  'brand-4': '#c5b993',
  'brand-5': '#e7e6a4',
}

RGB Array

[217, 141, 99], [209, 67, 87], [134, 68, 77], [197, 185, 147], [231, 230, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D98D63, #D14357, #86444D, #C5B993, #E7E6A4 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: #d98d63; --color-2: #d14357; --color-3: #86444d; --color-4: #c5b993; --color-5: #e7e6a4. 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