#FFCCBD + #BFA68E + #C4C0A1 + #CFDAB7 + #CDE3CA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFCCBD

Peach Pink · Pink · Cherry Blossom

HEX

#FFCCBD

RGB

rgb(255, 204, 189)

HSL

hsl(14, 100%, 87%)

HSB

hsb(14, 26%, 100%)

CMYK

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

Oklch

oklch(88.6% 0.062 37.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#BFA68E

Apricot · Tan · Warm Sun

HEX

#BFA68E

RGB

rgb(191, 166, 142)

HSL

hsl(29, 28%, 65%)

HSB

hsb(29, 26%, 75%)

CMYK

cmyk(0%, 13%, 26%, 25%)

Oklch

oklch(74.1% 0.044 65.9)

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

#C4C0A1

Fresh Green · Tan · Sunflower

HEX

#C4C0A1

RGB

rgb(196, 192, 161)

HSL

hsl(53, 23%, 70%)

HSB

hsb(53, 18%, 77%)

CMYK

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

Oklch

oklch(80.3% 0.042 101.2)

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

#CFDAB7

Willow Green · LightGray · Apple Green

HEX

#CFDAB7

RGB

rgb(207, 218, 183)

HSL

hsl(79, 32%, 79%)

HSB

hsb(79, 16%, 85%)

CMYK

cmyk(5%, 0%, 16%, 15%)

Oklch

oklch(87.1% 0.048 121.6)

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

#CDE3CA

Celadon · LightGray · Mint Green

HEX

#CDE3CA

RGB

rgb(205, 227, 202)

HSL

hsl(113, 31%, 84%)

HSB

hsb(113, 11%, 89%)

CMYK

cmyk(10%, 0%, 11%, 11%)

Oklch

oklch(89.3% 0.041 141.9)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCCBD

BDF0FF

Analogous

FFBDCE

FFCCBD

FFEDBD

Triadic

FFCCBD

BDFFCC

CCBDFF

Split-Comp.

FFCCBD

BDFFED

BDCEFF

Tetradic

FFCCBD

CEFFBD

BDF0FF

EDBDFF

Contrast Matrix WCAG 2.1 Contrast

FFCCBD	BFA68E	C4C0A1	CFDAB7	CDE3CA
—	1.6 Fail	1.3 Fail	1.0 Fail	1.1 Fail
1.6 Fail	—	1.3 Fail	1.6 Fail	1.7 Fail
1.3 Fail	1.3 Fail	—	1.3 Fail	1.4 Fail
1.0 Fail	1.6 Fail	1.3 Fail	—	1.1 Fail
1.1 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

1.4Fail

2.3Fail

1.8Fail

1.5Fail

1.4Fail

Black BG

14.6AAA

9.1AAA

11.4AAA

14.4AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8C1

B4B494

C2C2A9

D4D4BF

D7D7D0

Deuteranopia

ECF0C1

B6B895

C3C3AA

D3D2C2

D5D4D1

Tritanopia

FCC3C4

BE9899

C4AEB0

D0C6C8

CED5D6

Achromatopsia

DADADA

ABABAB

BEBEBE

D3D3D3

DADADA

Shades & Tints Shades & Tints

#FFCCBD

Dark

Light

#BFA68E

Dark

Light

#C4C0A1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffccbd;
  --color-2: #bfa68e;
  --color-3: #c4c0a1;
  --color-4: #cfdab7;
  --color-5: #cde3ca;
}

SCSS

$color-1: #ffccbd;
$color-2: #bfa68e;
$color-3: #c4c0a1;
$color-4: #cfdab7;
$color-5: #cde3ca;

TAILWIND

colors: {
  'brand-1': '#ffccbd',
  'brand-2': '#bfa68e',
  'brand-3': '#c4c0a1',
  'brand-4': '#cfdab7',
  'brand-5': '#cde3ca',
}

RGB Array

[255, 204, 189], [191, 166, 142], [196, 192, 161], [207, 218, 183], [205, 227, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFCCBD, #BFA68E, #C4C0A1, #CFDAB7, #CDE3CA 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: #ffccbd; --color-2: #bfa68e; --color-3: #c4c0a1; --color-4: #cfdab7; --color-5: #cde3ca. 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