← Back to Editor

#FFEBF4 · #8A8978 · #A1F1FF · #FFFAA1 · #FF8CC3

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFEBF4

Rouge · SeaShell · Cherry Blossom

HEX
#FFEBF4
RGB
rgb(255, 235, 244)
HSL
hsl(333, 100%, 96%)
HSB
hsb(333, 8%, 100%)
CMYK
cmyk(0%, 8%, 4%, 0%)
Oklch
oklch(95.9% 0.025 348.5)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#8A8978

Ash · Gray · Warm Gray

HEX
#8A8978
RGB
rgb(138, 137, 120)
HSL
hsl(57, 7%, 51%)
HSB
hsb(57, 13%, 54%)
CMYK
cmyk(0%, 1%, 13%, 46%)
Oklch
oklch(62.6% 0.025 104.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#A1F1FF

Sky Blue · LightBlue · Glacier Blue

HEX
#A1F1FF
RGB
rgb(161, 241, 255)
HSL
hsl(189, 100%, 82%)
HSB
hsb(189, 37%, 100%)
CMYK
cmyk(37%, 5%, 0%, 0%)
Oklch
oklch(91.1% 0.080 209.7)

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

#FFFAA1

Fresh Green · Khaki · Lemon Cream

HEX
#FFFAA1
RGB
rgb(255, 250, 161)
HSL
hsl(57, 100%, 82%)
HSB
hsb(57, 37%, 100%)
CMYK
cmyk(0%, 2%, 37%, 0%)
Oklch
oklch(96.9% 0.110 105.5)

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

#FF8CC3

Rouge · LightPink · Cherry Blossom

HEX
#FF8CC3
RGB
rgb(255, 140, 195)
HSL
hsl(331, 100%, 77%)
HSB
hsb(331, 45%, 100%)
CMYK
cmyk(0%, 45%, 24%, 0%)
Oklch
oklch(78.0% 0.152 351.1)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEBF4
EBFFF6

Analogous

FFEBFE
FFEBF4
FFECEB

Triadic

FFEBF4
F4FFEB
EBF4FF

Split-Comp.

FFEBF4
EBFFEC
EBFEFF

Tetradic

FFEBF4
FEFFEB
EBFFF6
ECEBFF

Contrast Matrix WCAG 2.1 Contrast

FFEBF4
8A8978
A1F1FF
FFFAA1
FF8CC3
—
3.1
AA Large
1.1
Fail
1.1
Fail
1.9
Fail
3.1
AA Large
—
2.8
Fail
3.3
AA Large
1.7
Fail
1.1
Fail
2.8
Fail
—
1.2
Fail
1.7
Fail
1.1
Fail
3.3
AA Large
1.2
Fail
—
2.0
Fail
1.9
Fail
1.7
Fail
1.7
Fail
2.0
Fail
—
White BG
1.1Fail
3.5AA Large
1.3Fail
1.1Fail
2.1Fail
Black BG
18.4AAA
5.9AA
16.5AAA
19.4AAA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6F2
8A8A7C
C4C4FC
FDFDB7
CDCCB6

Deuteranopia

F8F9F1
8A8A7D
BFB9FB
FDFEBC
D4DDB3

Tritanopia

FEF0F0
8A7F80
A5F9F8
FFC8CB
F9ABA9

Achromatopsia

F2F2F2
878787
DBDBDB
F1F1F1
B5B5B5

Shades & Tints Shades & Tints

#FFEBF4

Dark
Light

#8A8978

Dark
Light

#A1F1FF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffebf4;
  --color-2: #8a8978;
  --color-3: #a1f1ff;
  --color-4: #fffaa1;
  --color-5: #ff8cc3;
}

SCSS

$color-1: #ffebf4;
$color-2: #8a8978;
$color-3: #a1f1ff;
$color-4: #fffaa1;
$color-5: #ff8cc3;

TAILWIND

colors: {
  'brand-1': '#ffebf4',
  'brand-2': '#8a8978',
  'brand-3': '#a1f1ff',
  'brand-4': '#fffaa1',
  'brand-5': '#ff8cc3',
}

RGB Array

[255, 235, 244], [138, 137, 120], [161, 241, 255], [255, 250, 161], [255, 140, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FFEBF4, #8A8978, #A1F1FF, #FFFAA1, #FF8CC3 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #ffebf4; --color-2: #8a8978; --color-3: #a1f1ff; --color-4: #fffaa1; --color-5: #ff8cc3. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 cool-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