← Back to Editor

#D3D7BC · #CCC1AB · #C2AF9E · #BC9598 · #9E5D73

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

#D3D7BC

Fresh Green · LightGray · Lemon Cream

HEX
#D3D7BC
RGB
rgb(211, 215, 188)
HSL
hsl(69, 25%, 79%)
HSB
hsb(69, 13%, 84%)
CMYK
cmyk(2%, 0%, 13%, 16%)
Oklch
oklch(86.9% 0.037 114.0)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#CCC1AB

Goose Yellow · Silver · Sunflower

HEX
#CCC1AB
RGB
rgb(204, 193, 171)
HSL
hsl(40, 24%, 74%)
HSB
hsb(40, 16%, 80%)
CMYK
cmyk(0%, 5%, 16%, 20%)
Oklch
oklch(81.4% 0.032 84.6)

TraditionalGoose Yellow」· PaintSunflower」· Creative Lemon Fizz

#C2AF9E

Apricot · Tan · Warm Sun

HEX
#C2AF9E
RGB
rgb(194, 175, 158)
HSL
hsl(28, 23%, 69%)
HSB
hsb(28, 19%, 76%)
CMYK
cmyk(0%, 10%, 19%, 24%)
Oklch
oklch(76.6% 0.032 64.2)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#BC9598

Peach Pink · DarkGray · Coral Red

HEX
#BC9598
RGB
rgb(188, 149, 152)
HSL
hsl(355, 23%, 66%)
HSB
hsb(355, 21%, 74%)
CMYK
cmyk(0%, 21%, 19%, 26%)
Oklch
oklch(70.7% 0.047 13.2)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#9E5D73

Dark Violet · Gray · Camellia

HEX
#9E5D73
RGB
rgb(158, 93, 115)
HSL
hsl(340, 26%, 49%)
HSB
hsb(340, 41%, 62%)
CMYK
cmyk(0%, 41%, 27%, 38%)
Oklch
oklch(55.8% 0.089 358.6)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3D7BC
C0BCD7

Analogous

D7CDBC
D3D7BC
C5D7BC

Triadic

D3D7BC
BCD3D7
D7BCD3

Split-Comp.

D3D7BC
BCC5D7
CDBCD7

Tetradic

D3D7BC
BCD7CD
C0BCD7
D7BCC5

Contrast Matrix WCAG 2.1 Contrast

D3D7BC
CCC1AB
C2AF9E
BC9598
9E5D73
1.2
Fail
1.4
Fail
1.8
Fail
3.3
AA Large
1.2
Fail
1.2
Fail
1.5
Fail
2.8
Fail
1.4
Fail
1.2
Fail
1.3
Fail
2.3
Fail
1.8
Fail
1.5
Fail
1.3
Fail
1.8
Fail
3.3
AA Large
2.8
Fail
2.3
Fail
1.8
Fail
White BG
1.5Fail
1.8Fail
2.1Fail
2.7Fail
4.9AA
Black BG
14.2AAA
11.8AAA
9.9AAA
7.9AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5C3
C7C7B0
BABAA2
ABAB97
82816E

Deuteranopia

D5D4C4
C8C9B2
BBBCA3
ADB097
868B6C

Tritanopia

D3C8C9
CBB5B5
C1A5A6
BA9797
9B6969

Achromatopsia

D3D3D3
C2C2C2
B3B3B3
A1A1A1
737373

Shades & Tints Shades & Tints

#D3D7BC

Dark
Light

#CCC1AB

Dark
Light

#C2AF9E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3d7bc;
  --color-2: #ccc1ab;
  --color-3: #c2af9e;
  --color-4: #bc9598;
  --color-5: #9e5d73;
}

SCSS

$color-1: #d3d7bc;
$color-2: #ccc1ab;
$color-3: #c2af9e;
$color-4: #bc9598;
$color-5: #9e5d73;

TAILWIND

colors: {
  'brand-1': '#d3d7bc',
  'brand-2': '#ccc1ab',
  'brand-3': '#c2af9e',
  'brand-4': '#bc9598',
  'brand-5': '#9e5d73',
}

RGB Array

[211, 215, 188], [204, 193, 171], [194, 175, 158], [188, 149, 152], [158, 93, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3D7BC, #CCC1AB, #C2AF9E, #BC9598, #9E5D73 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d3d7bc; --color-2: #ccc1ab; --color-3: #c2af9e; --color-4: #bc9598; --color-5: #9e5d73. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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