#CDCFD1 + #A59084 + #F5CCBE + #FFE6D1 + #FBC69B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDCFD1

Silver Gray · LightGray · Pearl Gray

HEX

#CDCFD1

RGB

rgb(205, 207, 209)

HSL

hsl(210, 4%, 81%)

HSB

hsb(210, 2%, 82%)

CMYK

cmyk(2%, 1%, 0%, 18%)

Oklch

oklch(85.4% 0.004 247.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#A59084

Tangerine · Gray · Warm Sun

HEX

#A59084

RGB

rgb(165, 144, 132)

HSL

hsl(22, 15%, 58%)

HSB

hsb(22, 20%, 65%)

CMYK

cmyk(0%, 13%, 20%, 35%)

Oklch

oklch(66.9% 0.031 51.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F5CCBE

Apricot · Pink · Peach Orange

HEX

#F5CCBE

RGB

rgb(245, 204, 190)

HSL

hsl(15, 73%, 85%)

HSB

hsb(15, 22%, 96%)

CMYK

cmyk(0%, 17%, 22%, 4%)

Oklch

oklch(87.7% 0.050 39.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFE6D1

Apricot · Bisque · Peach Orange

HEX

#FFE6D1

RGB

rgb(255, 230, 209)

HSL

hsl(27, 100%, 91%)

HSB

hsb(27, 18%, 100%)

CMYK

cmyk(0%, 10%, 18%, 0%)

Oklch

oklch(94.0% 0.039 62.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBC69B

Apricot · Wheat · Peach Orange

HEX

#FBC69B

RGB

rgb(251, 198, 155)

HSL

hsl(27, 92%, 80%)

HSB

hsb(27, 38%, 98%)

CMYK

cmyk(0%, 21%, 38%, 2%)

Oklch

oklch(86.3% 0.083 60.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDCFD1

D0CFCD

Analogous

CDD0D0

CDCFD1

CDCDD0

Triadic

CDCFD1

D0CDCF

CFD0CD

Split-Comp.

CDCFD1

D0CDCD

D0D0CD

Tetradic

CDCFD1

D0CDD0

D0CFCD

CDD0CD

Contrast Matrix WCAG 2.1 Contrast

CDCFD1	A59084	F5CCBE	FFE6D1	FBC69B
—	1.9 Fail	1.1 Fail	1.3 Fail	1.0 Fail
1.9 Fail	—	2.1 Fail	2.5 Fail	2.0 Fail
1.1 Fail	2.1 Fail	—	1.2 Fail	1.0 Fail
1.3 Fail	2.5 Fail	1.2 Fail	—	1.3 Fail
1.0 Fail	2.0 Fail	1.0 Fail	1.3 Fail	—

White BG

1.6Fail

3.0AA Large

1.5Fail

1.2Fail

1.5Fail

Black BG

13.4AAA

6.9AA

14.3AAA

17.5AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECED1

9C9C87

E3E3C1

F4F4D6

E4E4A5

Deuteranopia

CECED0

9D9F88

E6E9C2

F6F8D7

E7EBA8

Tritanopia

CDD0D0

A4898A

F3C4C5

FEDADB

F8AEAF

Achromatopsia

CFCFCF

959595

D7D7D7

EBEBEB

D1D1D1

Shades & Tints Shades & Tints

#CDCFD1

Dark

Light

#A59084

Dark

Light

#F5CCBE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdcfd1;
  --color-2: #a59084;
  --color-3: #f5ccbe;
  --color-4: #ffe6d1;
  --color-5: #fbc69b;
}

SCSS

$color-1: #cdcfd1;
$color-2: #a59084;
$color-3: #f5ccbe;
$color-4: #ffe6d1;
$color-5: #fbc69b;

TAILWIND

colors: {
  'brand-1': '#cdcfd1',
  'brand-2': '#a59084',
  'brand-3': '#f5ccbe',
  'brand-4': '#ffe6d1',
  'brand-5': '#fbc69b',
}

RGB Array

[205, 207, 209], [165, 144, 132], [245, 204, 190], [255, 230, 209], [251, 198, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDCFD1, #A59084, #F5CCBE, #FFE6D1, #FBC69B 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: #cdcfd1; --color-2: #a59084; --color-3: #f5ccbe; --color-4: #ffe6d1; --color-5: #fbc69b. 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