← Back to Editor

#D4B57C · #D3A67C · #B4A88E · #ACB691 · #CCC9A0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4B57C

Ginger · BurlyWood · Warm Sun

HEX
#D4B57C
RGB
rgb(212, 181, 124)
HSL
hsl(39, 51%, 66%)
HSB
hsb(39, 42%, 83%)
CMYK
cmyk(0%, 15%, 42%, 17%)
Oklch
oklch(78.7% 0.082 82.2)

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

#D3A67C

Apricot · Tan · Warm Sun

HEX
#D3A67C
RGB
rgb(211, 166, 124)
HSL
hsl(29, 50%, 66%)
HSB
hsb(29, 41%, 83%)
CMYK
cmyk(0%, 21%, 41%, 17%)
Oklch
oklch(75.6% 0.077 64.3)

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

#B4A88E

Ginger · DarkGray · Sunflower

HEX
#B4A88E
RGB
rgb(180, 168, 142)
HSL
hsl(41, 20%, 63%)
HSB
hsb(41, 21%, 71%)
CMYK
cmyk(0%, 7%, 21%, 29%)
Oklch
oklch(73.5% 0.039 86.2)

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

#ACB691

Willow Green · DarkGray · Apple Green

HEX
#ACB691
RGB
rgb(172, 182, 145)
HSL
hsl(76, 20%, 64%)
HSB
hsb(76, 20%, 71%)
CMYK
cmyk(5%, 0%, 20%, 29%)
Oklch
oklch(75.9% 0.052 119.9)

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

#CCC9A0

Fresh Green · Tan · Sunflower

HEX
#CCC9A0
RGB
rgb(204, 201, 160)
HSL
hsl(56, 30%, 71%)
HSB
hsb(56, 22%, 80%)
CMYK
cmyk(0%, 1%, 22%, 20%)
Oklch
oklch(82.8% 0.055 104.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4B57C
7C9BD5

Analogous

D5897C
D4B57C
C7D57C

Triadic

D4B57C
7CD5B6
B67CD5

Split-Comp.

D4B57C
7CC7D5
897CD5

Tetradic

D4B57C
7CD589
7C9BD5
D57CC7

Contrast Matrix WCAG 2.1 Contrast

D4B57C
D3A67C
B4A88E
ACB691
CCC9A0
—
1.1
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.1
Fail
—
1.3
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.3
Fail
—
White BG
2.0Fail
2.2Fail
2.4Fail
2.1Fail
1.7Fail
Black BG
10.7AAA
9.5AAA
8.9AAA
9.9AAA
12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C68A
C0BF86
AFAF94
B0B09A
CBCBAA

Deuteranopia

C8CB8D
C2C689
B0B096
B0AF9C
CBCBAC

Tritanopia

D29597
D18E90
B3999A
ADA1A3
CCB2B3

Achromatopsia

B8B8B8
AFAFAF
A9A9A9
AFAFAF
C5C5C5

Shades & Tints Shades & Tints

#D4B57C

Dark
Light

#D3A67C

Dark
Light

#B4A88E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4b57c;
  --color-2: #d3a67c;
  --color-3: #b4a88e;
  --color-4: #acb691;
  --color-5: #ccc9a0;
}

SCSS

$color-1: #d4b57c;
$color-2: #d3a67c;
$color-3: #b4a88e;
$color-4: #acb691;
$color-5: #ccc9a0;

TAILWIND

colors: {
  'brand-1': '#d4b57c',
  'brand-2': '#d3a67c',
  'brand-3': '#b4a88e',
  'brand-4': '#acb691',
  'brand-5': '#ccc9a0',
}

RGB Array

[212, 181, 124], [211, 166, 124], [180, 168, 142], [172, 182, 145], [204, 201, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4B57C, #D3A67C, #B4A88E, #ACB691, #CCC9A0 is ideal for: health products, baby brands, fresh-style blogs. 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: #d4b57c; --color-2: #d3a67c; --color-3: #b4a88e; --color-4: #acb691; --color-5: #ccc9a0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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