← Back to Editor

#FCFAF2 · #CCFFFA · #9EFFF5 · #86CFC4 · #ABA2A2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FCFAF2

Goose Yellow · SeaShell · Lemon Cream

HEX
#FCFAF2
RGB
rgb(252, 250, 242)
HSL
hsl(48, 63%, 97%)
HSB
hsb(48, 4%, 99%)
CMYK
cmyk(0%, 1%, 4%, 1%)
Oklch
oklch(98.4% 0.011 95.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#CCFFFA

Jade · Lavender · Glacier Blue

HEX
#CCFFFA
RGB
rgb(204, 255, 250)
HSL
hsl(174, 100%, 90%)
HSB
hsb(174, 20%, 100%)
CMYK
cmyk(20%, 0%, 2%, 0%)
Oklch
oklch(96.4% 0.052 189.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#9EFFF5

Jade · LightBlue · Glacier Blue

HEX
#9EFFF5
RGB
rgb(158, 255, 245)
HSL
hsl(174, 100%, 81%)
HSB
hsb(174, 38%, 100%)
CMYK
cmyk(38%, 0%, 4%, 0%)
Oklch
oklch(93.7% 0.093 187.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#86CFC4

Jade · SkyBlue · Lake Green

HEX
#86CFC4
RGB
rgb(134, 207, 196)
HSL
hsl(171, 43%, 67%)
HSB
hsb(171, 35%, 81%)
CMYK
cmyk(35%, 0%, 5%, 19%)
Oklch
oklch(80.3% 0.075 183.9)

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

#ABA2A2

Ash · DarkGray · Silver Sand

HEX
#ABA2A2
RGB
rgb(171, 162, 162)
HSL
hsl(0, 5%, 65%)
HSB
hsb(0, 5%, 67%)
CMYK
cmyk(0%, 5%, 5%, 33%)
Oklch
oklch(72.0% 0.010 17.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFAF2
F3F4FC

Analogous

FCF5F3
FCFAF2
F9FCF3

Triadic

FCFAF2
F3FCFA
FAF3FC

Split-Comp.

FCFAF2
F3F9FC
F5F3FC

Tetradic

FCFAF2
F3FCF5
F3F4FC
FCF3F9

Contrast Matrix WCAG 2.1 Contrast

FCFAF2
CCFFFA
9EFFF5
86CFC4
ABA2A2
—
1.0
Fail
1.1
Fail
1.7
Fail
2.4
Fail
1.0
Fail
—
1.1
Fail
1.6
Fail
2.3
Fail
1.1
Fail
1.1
Fail
—
1.5
Fail
2.1
Fail
1.7
Fail
1.6
Fail
1.5
Fail
—
1.4
Fail
2.4
Fail
2.3
Fail
2.1
Fail
1.4
Fail
—
White BG
1.0Fail
1.1Fail
1.2Fail
1.8Fail
2.5Fail
Black BG
20.1AAA
19.3AAA
18.1AAA
11.7AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBF4
E2E3FB
C8C9F7
A6A6C7
A7A7A2

Deuteranopia

FBFBF4
DFDBFC
C2BBF8
A19CC7
A8A8A2

Tritanopia

FCF5F6
CFFCFC
A3F9FA
8AC9C9
ABA2A2

Achromatopsia

FAFAFA
EFEFEF
E1E1E1
B8B8B8
A5A5A5

Shades & Tints Shades & Tints

#FCFAF2

Dark
Light

#CCFFFA

Dark
Light

#9EFFF5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcfaf2;
  --color-2: #ccfffa;
  --color-3: #9efff5;
  --color-4: #86cfc4;
  --color-5: #aba2a2;
}

SCSS

$color-1: #fcfaf2;
$color-2: #ccfffa;
$color-3: #9efff5;
$color-4: #86cfc4;
$color-5: #aba2a2;

TAILWIND

colors: {
  'brand-1': '#fcfaf2',
  'brand-2': '#ccfffa',
  'brand-3': '#9efff5',
  'brand-4': '#86cfc4',
  'brand-5': '#aba2a2',
}

RGB Array

[252, 250, 242], [204, 255, 250], [158, 255, 245], [134, 207, 196], [171, 162, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCFAF2, #CCFFFA, #9EFFF5, #86CFC4, #ABA2A2 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fcfaf2; --color-2: #ccfffa; --color-3: #9efff5; --color-4: #86cfc4; --color-5: #aba2a2. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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