#EE62D6 + #ED97D1 + #C1D0EF + #DCE4DD + #F5EDC9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EE62D6

Mauve · Orchid · Lilac Purple

HEX

#EE62D6

RGB

rgb(238, 98, 214)

HSL

hsl(310, 80%, 66%)

HSB

hsb(310, 59%, 93%)

CMYK

cmyk(0%, 59%, 10%, 7%)

Oklch

oklch(71.0% 0.215 334.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#ED97D1

Mauve · Violet · Cherry Blossom

HEX

#ED97D1

RGB

rgb(237, 151, 209)

HSL

hsl(320, 70%, 76%)

HSB

hsb(320, 36%, 93%)

CMYK

cmyk(0%, 36%, 12%, 7%)

Oklch

oklch(78.1% 0.126 339.9)

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

#C1D0EF

Azure · LightBlue · Sky Blue

HEX

#C1D0EF

RGB

rgb(193, 208, 239)

HSL

hsl(220, 59%, 85%)

HSB

hsb(220, 19%, 94%)

CMYK

cmyk(19%, 13%, 0%, 6%)

Oklch

oklch(85.6% 0.046 264.9)

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

#DCE4DD

Celadon · LightGray · Mint Green

HEX

#DCE4DD

RGB

rgb(220, 228, 221)

HSL

hsl(127, 13%, 88%)

HSB

hsb(127, 4%, 89%)

CMYK

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

Oklch

oklch(91.1% 0.013 149.2)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F5EDC9

Goose Yellow · Bisque · Lemon Cream

HEX

#F5EDC9

RGB

rgb(245, 237, 201)

HSL

hsl(49, 69%, 87%)

HSB

hsb(49, 18%, 96%)

CMYK

cmyk(0%, 3%, 18%, 4%)

Oklch

oklch(94.3% 0.048 96.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EE62D6

63EE7A

Analogous

BF63EE

EE62D6

EE6391

Triadic

EE62D6

D7EE63

63D7EE

Split-Comp.

EE62D6

91EE63

63EEBF

Tetradic

EE62D6

EEBF63

63EE7A

6391EE

Contrast Matrix WCAG 2.1 Contrast

EE62D6	ED97D1	C1D0EF	DCE4DD	F5EDC9
—	1.4 Fail	1.8 Fail	2.2 Fail	2.4 Fail
1.4 Fail	—	1.4 Fail	1.6 Fail	1.8 Fail
1.8 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
2.2 Fail	1.6 Fail	1.2 Fail	—	1.1 Fail
2.4 Fail	1.8 Fail	1.3 Fail	1.1 Fail	—

White BG

2.9Fail

2.1Fail

1.6Fail

1.3Fail

1.2Fail

Black BG

7.4AAA

9.9AAA

13.5AAA

16.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B0BA

C8C7C3

C7C8E7

DFE0DF

F2F1D2

Deuteranopia

BAC4B3

CDD3C0

C7C6E6

DFDEDF

F2F3D4

Tritanopia

E7A49F

E9B8B5

C2E2E0

DCE0E0

F5D9DA

Achromatopsia

999999

B7B7B7

CFCFCF

E1E1E1

EBEBEB

Shades & Tints Shades & Tints

#EE62D6

Dark

Light

#ED97D1

Dark

Light

#C1D0EF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ee62d6;
  --color-2: #ed97d1;
  --color-3: #c1d0ef;
  --color-4: #dce4dd;
  --color-5: #f5edc9;
}

SCSS

$color-1: #ee62d6;
$color-2: #ed97d1;
$color-3: #c1d0ef;
$color-4: #dce4dd;
$color-5: #f5edc9;

TAILWIND

colors: {
  'brand-1': '#ee62d6',
  'brand-2': '#ed97d1',
  'brand-3': '#c1d0ef',
  'brand-4': '#dce4dd',
  'brand-5': '#f5edc9',
}

RGB Array

[238, 98, 214], [237, 151, 209], [193, 208, 239], [220, 228, 221], [245, 237, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EE62D6, #ED97D1, #C1D0EF, #DCE4DD, #F5EDC9 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: #ee62d6; --color-2: #ed97d1; --color-3: #c1d0ef; --color-4: #dce4dd; --color-5: #f5edc9. 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