#FF8888 + #FCB29A + #CCD4BC + #A3C7C7 + #8AB1B4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF8888

Peach Pink · LightCoral · Coral Red

HEX

#FF8888

RGB

rgb(255, 136, 136)

HSL

hsl(0, 100%, 77%)

HSB

hsb(0, 47%, 100%)

CMYK

cmyk(0%, 47%, 47%, 0%)

Oklch

oklch(75.8% 0.145 21.0)

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

#FCB29A

Apricot · BurlyWood · Peach Orange

HEX

#FCB29A

RGB

rgb(252, 178, 154)

HSL

hsl(15, 94%, 80%)

HSB

hsb(15, 39%, 99%)

CMYK

cmyk(0%, 29%, 39%, 1%)

Oklch

oklch(82.8% 0.093 38.7)

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

#CCD4BC

Willow Green · Silver · Apple Green

HEX

#CCD4BC

RGB

rgb(204, 212, 188)

HSL

hsl(80, 22%, 78%)

HSB

hsb(80, 11%, 83%)

CMYK

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

Oklch

oklch(85.7% 0.034 122.1)

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

#A3C7C7

Sky Blue · LightSteelBlue · Lake Green

HEX

#A3C7C7

RGB

rgb(163, 199, 199)

HSL

hsl(180, 24%, 71%)

HSB

hsb(180, 18%, 78%)

CMYK

cmyk(18%, 0%, 0%, 22%)

Oklch

oklch(80.4% 0.038 196.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8AB1B4

Sky Blue · DarkGray · Lake Green

HEX

#8AB1B4

RGB

rgb(138, 177, 180)

HSL

hsl(184, 22%, 62%)

HSB

hsb(184, 23%, 71%)

CMYK

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

Oklch

oklch(73.3% 0.042 202.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8888

8AFFFF

Analogous

FF8AC4

FF8888

FFC48A

Triadic

FF8888

8AFF8A

8A8AFF

Split-Comp.

FF8888

8AFFC4

8AC4FF

Tetradic

FF8888

C4FF8A

8AFFFF

C48AFF

Contrast Matrix WCAG 2.1 Contrast

FF8888	FCB29A	CCD4BC	A3C7C7	8AB1B4
—	1.3 Fail	1.5 Fail	1.3 Fail	1.0 Fail
1.3 Fail	—	1.1 Fail	1.0 Fail	1.3 Fail
1.5 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.3 Fail	1.0 Fail	1.2 Fail	—	1.3 Fail
1.0 Fail	1.3 Fail	1.5 Fail	1.3 Fail	—

White BG

2.3Fail

1.8Fail

1.5Fail

1.8Fail

2.3Fail

Black BG

9.1AAA

12.0AAA

13.7AAA

11.6AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA88

DCDBA0

CFD0C2

B3B3C7

9B9BB3

Deuteranopia

D2DB88

E0E6A1

CFCEC3

B1AEC7

9996B3

Tritanopia

F98888

F8A4A5

CCC6C7

A5C7C7

8CB3B3

Achromatopsia

ACACAC

C5C5C5

CFCFCF

BCBCBC

A6A6A6

Shades & Tints Shades & Tints

#FF8888

Dark

Light

#FCB29A

Dark

Light

#CCD4BC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8888;
  --color-2: #fcb29a;
  --color-3: #ccd4bc;
  --color-4: #a3c7c7;
  --color-5: #8ab1b4;
}

SCSS

$color-1: #ff8888;
$color-2: #fcb29a;
$color-3: #ccd4bc;
$color-4: #a3c7c7;
$color-5: #8ab1b4;

TAILWIND

colors: {
  'brand-1': '#ff8888',
  'brand-2': '#fcb29a',
  'brand-3': '#ccd4bc',
  'brand-4': '#a3c7c7',
  'brand-5': '#8ab1b4',
}

RGB Array

[255, 136, 136], [252, 178, 154], [204, 212, 188], [163, 199, 199], [138, 177, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8888, #FCB29A, #CCD4BC, #A3C7C7, #8AB1B4 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: #ff8888; --color-2: #fcb29a; --color-3: #ccd4bc; --color-4: #a3c7c7; --color-5: #8ab1b4. 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