← Back to Editor

#CFE8E4 · #ECD3D0 · #17B877 · #6880FF · #1263A2

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

#CFE8E4

Jade · LightGray · Glacier Blue

HEX
#CFE8E4
RGB
rgb(207, 232, 228)
HSL
hsl(170, 35%, 86%)
HSB
hsb(170, 11%, 91%)
CMYK
cmyk(11%, 0%, 2%, 9%)
Oklch
oklch(91.2% 0.027 185.1)

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

#ECD3D0

Peach Pink · LightGray · Cherry Blossom

HEX
#ECD3D0
RGB
rgb(236, 211, 208)
HSL
hsl(6, 42%, 87%)
HSB
hsb(6, 12%, 93%)
CMYK
cmyk(0%, 11%, 12%, 7%)
Oklch
oklch(88.7% 0.028 25.9)

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

#17B877

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#17B877
RGB
rgb(23, 184, 119)
HSL
hsl(156, 78%, 41%)
HSB
hsb(156, 88%, 72%)
CMYK
cmyk(88%, 0%, 35%, 28%)
Oklch
oklch(69.2% 0.155 158.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#6880FF

Azure · CornflowerBlue · Cobalt Blue

HEX
#6880FF
RGB
rgb(104, 128, 255)
HSL
hsl(230, 100%, 70%)
HSB
hsb(230, 59%, 100%)
CMYK
cmyk(59%, 50%, 0%, 0%)
Oklch
oklch(64.6% 0.189 272.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#1263A2

Lake Blue · Teal · Prussian Blue

HEX
#1263A2
RGB
rgb(18, 99, 162)
HSL
hsl(206, 80%, 35%)
HSB
hsb(206, 89%, 64%)
CMYK
cmyk(89%, 39%, 0%, 36%)
Oklch
oklch(48.8% 0.124 248.4)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFE8E4
E8CFD3

Analogous

CFE8D7
CFE8E4
CFDFE8

Triadic

CFE8E4
E4CFE8
E8E4CF

Split-Comp.

CFE8E4
E8CFDF
E8D7CF

Tetradic

CFE8E4
D7CFE8
E8CFD3
DFE8CF

Contrast Matrix WCAG 2.1 Contrast

CFE8E4
ECD3D0
17B877
6880FF
1263A2
—
1.1
Fail
2.0
Fail
2.7
Fail
4.9
AA
1.1
Fail
—
1.8
Fail
2.4
Fail
4.4
AA Large
2.0
Fail
1.8
Fail
—
1.3
Fail
2.4
Fail
2.7
Fail
2.4
Fail
1.3
Fail
—
1.8
Fail
4.9
AA
4.4
AA Large
2.4
Fail
1.8
Fail
—
White BG
1.3Fail
1.4Fail
2.6Fail
3.4AA Large
6.3AA
Black BG
16.3AAA
14.8AAA
8.2AAA
6.1AA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAE5
E1E1D1
5D5E87
7273E0
353693

Deuteranopia

D8D6E5
E3E5D1
53478B
716FD9
302A8F

Tritanopia

D0E6E6
EBD1D1
1F9396
69C8C3
168784

Achromatopsia

E0E0E0
DADADA
808080
878787
525252

Shades & Tints Shades & Tints

#CFE8E4

Dark
Light

#ECD3D0

Dark
Light

#17B877

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfe8e4;
  --color-2: #ecd3d0;
  --color-3: #17b877;
  --color-4: #6880ff;
  --color-5: #1263a2;
}

SCSS

$color-1: #cfe8e4;
$color-2: #ecd3d0;
$color-3: #17b877;
$color-4: #6880ff;
$color-5: #1263a2;

TAILWIND

colors: {
  'brand-1': '#cfe8e4',
  'brand-2': '#ecd3d0',
  'brand-3': '#17b877',
  'brand-4': '#6880ff',
  'brand-5': '#1263a2',
}

RGB Array

[207, 232, 228], [236, 211, 208], [23, 184, 119], [104, 128, 255], [18, 99, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFE8E4, #ECD3D0, #17B877, #6880FF, #1263A2 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #cfe8e4; --color-2: #ecd3d0; --color-3: #17b877; --color-4: #6880ff; --color-5: #1263a2. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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