← Back to Editor

#D8CE9A · #F1B47B · #C99771 · #9C6D66 · #7C3B4A

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

#D8CE9A

Fresh Green · BurlyWood · Sunflower

HEX
#D8CE9A
RGB
rgb(216, 206, 154)
HSL
hsl(50, 44%, 73%)
HSB
hsb(50, 29%, 85%)
CMYK
cmyk(0%, 5%, 29%, 15%)
Oklch
oklch(84.7% 0.069 98.5)

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

#F1B47B

Apricot · BurlyWood · Warm Sun

HEX
#F1B47B
RGB
rgb(241, 180, 123)
HSL
hsl(29, 81%, 71%)
HSB
hsb(29, 49%, 95%)
CMYK
cmyk(0%, 25%, 49%, 5%)
Oklch
oklch(81.4% 0.102 63.7)

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

#C99771

Apricot · DarkSalmon · Warm Sun

HEX
#C99771
RGB
rgb(201, 151, 113)
HSL
hsl(26, 45%, 62%)
HSB
hsb(26, 44%, 79%)
CMYK
cmyk(0%, 25%, 44%, 21%)
Oklch
oklch(71.5% 0.079 58.3)

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

#9C6D66

Crimson · Gray · Passion Red

HEX
#9C6D66
RGB
rgb(156, 109, 102)
HSL
hsl(8, 21%, 51%)
HSB
hsb(8, 35%, 61%)
CMYK
cmyk(0%, 30%, 35%, 39%)
Oklch
oklch(58.1% 0.062 28.5)

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

#7C3B4A

Crimson · Sienna · Wine Red

HEX
#7C3B4A
RGB
rgb(124, 59, 74)
HSL
hsl(346, 36%, 36%)
HSB
hsb(346, 52%, 49%)
CMYK
cmyk(0%, 52%, 40%, 51%)
Oklch
oklch(44.1% 0.091 7.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8CE9A
9CA6D8

Analogous

D8B09C
D8CE9A
C4D89C

Triadic

D8CE9A
9CD8CE
CE9CD8

Split-Comp.

D8CE9A
9CC4D8
B09CD8

Tetradic

D8CE9A
9CD8B0
9CA6D8
D89CC4

Contrast Matrix WCAG 2.1 Contrast

D8CE9A
F1B47B
C99771
9C6D66
7C3B4A
—
1.1
Fail
1.6
Fail
2.8
Fail
5.1
AA
1.1
Fail
—
1.4
Fail
2.4
Fail
4.5
AA Large
1.6
Fail
1.4
Fail
—
1.7
Fail
3.2
AA Large
2.8
Fail
2.4
Fail
1.7
Fail
—
1.9
Fail
5.1
AA
4.5
AA Large
3.2
AA Large
1.9
Fail
—
White BG
1.6Fail
1.8Fail
2.6Fail
4.4AA Large
8.1AAA
Black BG
13.2AAA
11.6AAA
8.1AAA
4.8AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4A7
D7D689
B3B37A
888768
605F46

Deuteranopia

D4D5AA
DADF8C
B6BA7C
8A8E68
646946

Tritanopia

D8B1B3
EE9496
C78183
9A6969
794443

Achromatopsia

CBCBCB
C0C0C0
A2A2A2
7A7A7A
505050

Shades & Tints Shades & Tints

#D8CE9A

Dark
Light

#F1B47B

Dark
Light

#C99771

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8ce9a;
  --color-2: #f1b47b;
  --color-3: #c99771;
  --color-4: #9c6d66;
  --color-5: #7c3b4a;
}

SCSS

$color-1: #d8ce9a;
$color-2: #f1b47b;
$color-3: #c99771;
$color-4: #9c6d66;
$color-5: #7c3b4a;

TAILWIND

colors: {
  'brand-1': '#d8ce9a',
  'brand-2': '#f1b47b',
  'brand-3': '#c99771',
  'brand-4': '#9c6d66',
  'brand-5': '#7c3b4a',
}

RGB Array

[216, 206, 154], [241, 180, 123], [201, 151, 113], [156, 109, 102], [124, 59, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8CE9A, #F1B47B, #C99771, #9C6D66, #7C3B4A 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: #d8ce9a; --color-2: #f1b47b; --color-3: #c99771; --color-4: #9c6d66; --color-5: #7c3b4a. 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