← Back to Editor

#04A8D1 · #8FFFEC · #FFFDC7 · #FFD6CC · #DE5B8F

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 AppData Visualization

Color Details Color Details

#04A8D1

Lake Blue · DarkTurquoise · Mint Ice

HEX
#04A8D1
RGB
rgb(4, 168, 209)
HSL
hsl(192, 96%, 42%)
HSB
hsb(192, 98%, 82%)
CMYK
cmyk(98%, 20%, 0%, 18%)
Oklch
oklch(67.9% 0.126 223.5)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8FFFEC

Jade · LightBlue · Glacier Blue

HEX
#8FFFEC
RGB
rgb(143, 255, 236)
HSL
hsl(170, 100%, 78%)
HSB
hsb(170, 44%, 100%)
CMYK
cmyk(44%, 0%, 7%, 0%)
Oklch
oklch(92.8% 0.107 181.6)

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

#FFFDC7

Fresh Green · Beige · Lemon Cream

HEX
#FFFDC7
RGB
rgb(255, 253, 199)
HSL
hsl(58, 100%, 89%)
HSB
hsb(58, 22%, 100%)
CMYK
cmyk(0%, 1%, 22%, 0%)
Oklch
oklch(98.2% 0.069 105.8)

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

#FFD6CC

Peach Pink · Bisque · Cherry Blossom

HEX
#FFD6CC
RGB
rgb(255, 214, 204)
HSL
hsl(12, 100%, 90%)
HSB
hsb(12, 20%, 100%)
CMYK
cmyk(0%, 16%, 20%, 0%)
Oklch
oklch(90.8% 0.048 34.0)

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

#DE5B8F

Rouge · LightCoral · Rose Pink

HEX
#DE5B8F
RGB
rgb(222, 91, 143)
HSL
hsl(336, 66%, 61%)
HSB
hsb(336, 59%, 87%)
CMYK
cmyk(0%, 59%, 36%, 13%)
Oklch
oklch(65.2% 0.171 358.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04A8D1
D22D04

Analogous

04D294
04A8D1
0442D2

Triadic

04A8D1
D204A9
A9D204

Split-Comp.

04A8D1
D20442
D29404

Tetradic

04A8D1
9404D2
D22D04
42D204

Contrast Matrix WCAG 2.1 Contrast

04A8D1
8FFFEC
FFFDC7
FFD6CC
DE5B8F
—
2.3
Fail
2.7
Fail
2.1
Fail
1.3
Fail
2.3
Fail
—
1.1
Fail
1.1
Fail
2.9
Fail
2.7
Fail
1.1
Fail
—
1.3
Fail
3.4
AA Large
2.1
Fail
1.1
Fail
1.3
Fail
—
2.6
Fail
1.3
Fail
2.9
Fail
3.4
AA Large
2.6
Fail
—
White BG
2.8Fail
1.2Fail
1.0Fail
1.3Fail
3.5AA Large
Black BG
7.5AAA
17.7AAA
20.1AAA
15.7AAA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4CC7
BFC1F1
FEFED4
EDEDCE
A5A482

Deuteranopia

4235C5
B9B1F2
FEFED7
F0F3CF
ADB77F

Tritanopia

0CBFBE
95F4F5
FFDEE1
FDD0D1
D77876

Achromatopsia

7C7C7C
DBDBDB
F7F7F7
E1E1E1
888888

Shades & Tints Shades & Tints

#04A8D1

Dark
Light

#8FFFEC

Dark
Light

#FFFDC7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04a8d1;
  --color-2: #8fffec;
  --color-3: #fffdc7;
  --color-4: #ffd6cc;
  --color-5: #de5b8f;
}

SCSS

$color-1: #04a8d1;
$color-2: #8fffec;
$color-3: #fffdc7;
$color-4: #ffd6cc;
$color-5: #de5b8f;

TAILWIND

colors: {
  'brand-1': '#04a8d1',
  'brand-2': '#8fffec',
  'brand-3': '#fffdc7',
  'brand-4': '#ffd6cc',
  'brand-5': '#de5b8f',
}

RGB Array

[4, 168, 209], [143, 255, 236], [255, 253, 199], [255, 214, 204], [222, 91, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #04A8D1, #8FFFEC, #FFFDC7, #FFD6CC, #DE5B8F 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: #04a8d1; --color-2: #8fffec; --color-3: #fffdc7; --color-4: #ffd6cc; --color-5: #de5b8f. 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 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