#FFD0B0 + #DECCC1 + #CFC7C2 + #BDBDBD + #ABD6CD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFD0B0

Apricot · Wheat · Peach Orange

HEX

#FFD0B0

RGB

rgb(255, 208, 176)

HSL

hsl(24, 100%, 85%)

HSB

hsb(24, 31%, 100%)

CMYK

cmyk(0%, 18%, 31%, 0%)

Oklch

oklch(89.0% 0.068 55.9)

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

#DECCC1

Apricot · LightGray · Peach Orange

HEX

#DECCC1

RGB

rgb(222, 204, 193)

HSL

hsl(23, 31%, 81%)

HSB

hsb(23, 13%, 87%)

CMYK

cmyk(0%, 8%, 13%, 13%)

Oklch

oklch(85.7% 0.025 53.6)

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

#CFC7C2

Apricot · Silver · Peach Orange

HEX

#CFC7C2

RGB

rgb(207, 199, 194)

HSL

hsl(23, 12%, 79%)

HSB

hsb(23, 6%, 81%)

CMYK

cmyk(0%, 4%, 6%, 19%)

Oklch

oklch(83.5% 0.011 54.5)

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

#BDBDBD

Silver Gray · Silver · Pearl Gray

HEX

#BDBDBD

RGB

rgb(189, 189, 189)

HSL

hsl(0, 0%, 74%)

HSB

hsb(0, 0%, 74%)

CMYK

cmyk(0%, 0%, 0%, 26%)

Oklch

oklch(79.8% 0.000 89.9)

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

#ABD6CD

Jade · LightBlue · Lake Green

HEX

#ABD6CD

RGB

rgb(171, 214, 205)

HSL

hsl(167, 34%, 75%)

HSB

hsb(167, 20%, 84%)

CMYK

cmyk(20%, 0%, 4%, 16%)

Oklch

oklch(84.3% 0.047 180.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD0B0

B3E0FF

Analogous

FFB3BA

FFD0B0

FFF7B3

Triadic

FFD0B0

B3FFD1

D1B3FF

Split-Comp.

FFD0B0

B3FFF7

B3BAFF

Tetradic

FFD0B0

BAFFB3

B3E0FF

F7B3FF

Contrast Matrix WCAG 2.1 Contrast

FFD0B0	DECCC1	CFC7C2	BDBDBD	ABD6CD
—	1.1 Fail	1.2 Fail	1.3 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.0 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.1 Fail	1.0 Fail	1.1 Fail	1.2 Fail	—

White BG

1.4Fail

1.6Fail

1.7Fail

1.9Fail

1.6Fail

Black BG

14.9AAA

13.5AAA

12.6AAA

11.2AAA

13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEAB8

D6D6C4

CCCBC3

BDBDBD

BEBECF

Deuteranopia

EDF1BA

D7D9C4

CCCDC3

BDBDBD

BBB8D0

Tritanopia

FDBEBF

DDC6C6

CFC4C4

BDBDBD

ADD1D1

Achromatopsia

DADADA

D0D0D0

C9C9C9

BDBDBD

C8C8C8

Shades & Tints Shades & Tints

#FFD0B0

Dark

Light

#DECCC1

Dark

Light

#CFC7C2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd0b0;
  --color-2: #deccc1;
  --color-3: #cfc7c2;
  --color-4: #bdbdbd;
  --color-5: #abd6cd;
}

SCSS

$color-1: #ffd0b0;
$color-2: #deccc1;
$color-3: #cfc7c2;
$color-4: #bdbdbd;
$color-5: #abd6cd;

TAILWIND

colors: {
  'brand-1': '#ffd0b0',
  'brand-2': '#deccc1',
  'brand-3': '#cfc7c2',
  'brand-4': '#bdbdbd',
  'brand-5': '#abd6cd',
}

RGB Array

[255, 208, 176], [222, 204, 193], [207, 199, 194], [189, 189, 189], [171, 214, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD0B0, #DECCC1, #CFC7C2, #BDBDBD, #ABD6CD 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: #ffd0b0; --color-2: #deccc1; --color-3: #cfc7c2; --color-4: #bdbdbd; --color-5: #abd6cd. 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