← Back to Editor

#D1A4A1 · #CCC1AF · #CDD6BA · #E6E4B8 · #F7ECCB

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

#D1A4A1

Peach Pink · Tan · Coral Red

HEX
#D1A4A1
RGB
rgb(209, 164, 161)
HSL
hsl(4, 34%, 73%)
HSB
hsb(4, 23%, 82%)
CMYK
cmyk(0%, 22%, 23%, 18%)
Oklch
oklch(75.9% 0.054 22.8)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#CCC1AF

Goose Yellow · Silver · Warm Sun

HEX
#CCC1AF
RGB
rgb(204, 193, 175)
HSL
hsl(37, 22%, 74%)
HSB
hsb(37, 14%, 80%)
CMYK
cmyk(0%, 5%, 14%, 20%)
Oklch
oklch(81.5% 0.028 80.2)

TraditionalGoose Yellow」· PaintWarm Sun」· Creative Honey Glow

#CDD6BA

Willow Green · LightGray · Apple Green

HEX
#CDD6BA
RGB
rgb(205, 214, 186)
HSL
hsl(79, 25%, 78%)
HSB
hsb(79, 13%, 84%)
CMYK
cmyk(4%, 0%, 13%, 16%)
Oklch
oklch(86.2% 0.039 121.7)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#E6E4B8

Fresh Green · Wheat · Lemon Cream

HEX
#E6E4B8
RGB
rgb(230, 228, 184)
HSL
hsl(57, 48%, 81%)
HSB
hsb(57, 20%, 90%)
CMYK
cmyk(0%, 1%, 20%, 10%)
Oklch
oklch(90.9% 0.058 105.3)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#F7ECCB

Goose Yellow · Bisque · Lemon Cream

HEX
#F7ECCB
RGB
rgb(247, 236, 203)
HSL
hsl(45, 73%, 88%)
HSB
hsb(45, 18%, 97%)
CMYK
cmyk(0%, 4%, 18%, 3%)
Oklch
oklch(94.3% 0.045 91.7)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1A4A1
A3CED2

Analogous

D2A3B7
D1A4A1
D2BDA3

Triadic

D1A4A1
A3D2A6
A6A3D2

Split-Comp.

D1A4A1
A3D2BD
A3B7D2

Tetradic

D1A4A1
B7D2A3
A3CED2
BDA3D2

Contrast Matrix WCAG 2.1 Contrast

D1A4A1
CCC1AF
CDD6BA
E6E4B8
F7ECCB
1.2
Fail
1.5
Fail
1.7
Fail
1.9
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.5
Fail
1.2
Fail
1.2
Fail
1.3
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.9
Fail
1.5
Fail
1.3
Fail
1.1
Fail
White BG
2.2Fail
1.8Fail
1.5Fail
1.3Fail
1.2Fail
Black BG
9.5AAA
11.8AAA
13.9AAA
16.2AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBDA2
C7C7B3
D1D1C1
E5E5C3
F2F2D3

Deuteranopia

C0C3A2
C8C9B4
D0D0C2
E5E5C5
F3F4D5

Tritanopia

CFA2A2
CBB7B8
CDC6C7
E6CBCD
F6D9DB

Achromatopsia

B1B1B1
C2C2C2
D0D0D0
E0E0E0
ECECEC

Shades & Tints Shades & Tints

#D1A4A1

Dark
Light

#CCC1AF

Dark
Light

#CDD6BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1a4a1;
  --color-2: #ccc1af;
  --color-3: #cdd6ba;
  --color-4: #e6e4b8;
  --color-5: #f7eccb;
}

SCSS

$color-1: #d1a4a1;
$color-2: #ccc1af;
$color-3: #cdd6ba;
$color-4: #e6e4b8;
$color-5: #f7eccb;

TAILWIND

colors: {
  'brand-1': '#d1a4a1',
  'brand-2': '#ccc1af',
  'brand-3': '#cdd6ba',
  'brand-4': '#e6e4b8',
  'brand-5': '#f7eccb',
}

RGB Array

[209, 164, 161], [204, 193, 175], [205, 214, 186], [230, 228, 184], [247, 236, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1A4A1, #CCC1AF, #CDD6BA, #E6E4B8, #F7ECCB 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: #d1a4a1; --color-2: #ccc1af; --color-3: #cdd6ba; --color-4: #e6e4b8; --color-5: #f7eccb. 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