#FCCBBD + #F0AE99 + #CCA589 + #8E9E8A + #84B89A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCCBBD

Peach Pink · Pink · Cherry Blossom

HEX

#FCCBBD

RGB

rgb(252, 203, 189)

HSL

hsl(13, 91%, 86%)

HSB

hsb(13, 25%, 99%)

CMYK

cmyk(0%, 19%, 25%, 1%)

Oklch

oklch(88.1% 0.059 36.5)

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

#F0AE99

Peach Pink · BurlyWood · Coral Red

HEX

#F0AE99

RGB

rgb(240, 174, 153)

HSL

hsl(14, 74%, 77%)

HSB

hsb(14, 36%, 94%)

CMYK

cmyk(0%, 27%, 36%, 6%)

Oklch

oklch(80.8% 0.083 38.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CCA589

Apricot · Tan · Warm Sun

HEX

#CCA589

RGB

rgb(204, 165, 137)

HSL

hsl(25, 40%, 67%)

HSB

hsb(25, 33%, 80%)

CMYK

cmyk(0%, 19%, 33%, 20%)

Oklch

oklch(75.0% 0.060 57.3)

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

#8E9E8A

Celadon · DarkSeaGreen · Silver Sand

HEX

#8E9E8A

RGB

rgb(142, 158, 138)

HSL

hsl(108, 9%, 58%)

HSB

hsb(108, 13%, 62%)

CMYK

cmyk(10%, 0%, 13%, 38%)

Oklch

oklch(68.1% 0.034 139.4)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#84B89A

Celadon · DarkSeaGreen · Apple Green

HEX

#84B89A

RGB

rgb(132, 184, 154)

HSL

hsl(145, 27%, 62%)

HSB

hsb(145, 28%, 72%)

CMYK

cmyk(28%, 0%, 16%, 28%)

Oklch

oklch(73.8% 0.070 158.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCCBBD

BBEEFC

Analogous

FCBBCD

FCCBBD

FCE9BB

Triadic

FCCBBD

BBFCC9

C9BBFC

Split-Comp.

FCCBBD

BBFCE9

BBCDFC

Tetradic

FCCBBD

CDFCBB

BBEEFC

E9BBFC

Contrast Matrix WCAG 2.1 Contrast

FCCBBD	F0AE99	CCA589	8E9E8A	84B89A
—	1.3 Fail	1.5 Fail	1.9 Fail	1.5 Fail
1.3 Fail	—	1.2 Fail	1.5 Fail	1.2 Fail
1.5 Fail	1.2 Fail	—	1.3 Fail	1.0 Fail
1.9 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
1.5 Fail	1.2 Fail	1.0 Fail	1.3 Fail	—

White BG

1.5Fail

1.9Fail

2.3Fail

2.8Fail

2.3Fail

Black BG

14.4AAA

11.2AAA

9.3AAA

7.4AAA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E6C0

D3D39E

BBBB90

95958F

9B9BA1

Deuteranopia

EAEDC1

D7DC9F

BDC091

949390

9894A3

Tritanopia

FAC3C4

EDA2A3

CA9596

8F9394

87A7A8

Achromatopsia

D8D8D8

BFBFBF

ADADAD

979797

A5A5A5

Shades & Tints Shades & Tints

#FCCBBD

Dark

Light

#F0AE99

Dark

Light

#CCA589

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fccbbd;
  --color-2: #f0ae99;
  --color-3: #cca589;
  --color-4: #8e9e8a;
  --color-5: #84b89a;
}

SCSS

$color-1: #fccbbd;
$color-2: #f0ae99;
$color-3: #cca589;
$color-4: #8e9e8a;
$color-5: #84b89a;

TAILWIND

colors: {
  'brand-1': '#fccbbd',
  'brand-2': '#f0ae99',
  'brand-3': '#cca589',
  'brand-4': '#8e9e8a',
  'brand-5': '#84b89a',
}

RGB Array

[252, 203, 189], [240, 174, 153], [204, 165, 137], [142, 158, 138], [132, 184, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCCBBD, #F0AE99, #CCA589, #8E9E8A, #84B89A 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: #fccbbd; --color-2: #f0ae99; --color-3: #cca589; --color-4: #8e9e8a; --color-5: #84b89a. 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