#E7E0E2 + #DBF4F3 + #D7DADC + #FF93BD + #F8FF77 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E7E0E2

Rouge · Lavender · Cherry Blossom

HEX

#E7E0E2

RGB

rgb(231, 224, 226)

HSL

hsl(343, 13%, 89%)

HSB

hsb(343, 3%, 91%)

CMYK

cmyk(0%, 3%, 2%, 9%)

Oklch

oklch(91.3% 0.008 357.8)

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

#DBF4F3

Jade · Lavender · Glacier Blue

HEX

#DBF4F3

RGB

rgb(219, 244, 243)

HSL

hsl(178, 53%, 91%)

HSB

hsb(178, 10%, 96%)

CMYK

cmyk(10%, 0%, 0%, 4%)

Oklch

oklch(94.9% 0.026 193.8)

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

#D7DADC

Silver Gray · LightGray · Pearl Gray

HEX

#D7DADC

RGB

rgb(215, 218, 220)

HSL

hsl(204, 7%, 85%)

HSB

hsb(204, 2%, 86%)

CMYK

cmyk(2%, 1%, 0%, 14%)

Oklch

oklch(88.7% 0.004 236.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#FF93BD

Rouge · LightPink · Cherry Blossom

HEX

#FF93BD

RGB

rgb(255, 147, 189)

HSL

hsl(337, 100%, 79%)

HSB

hsb(337, 42%, 100%)

CMYK

cmyk(0%, 42%, 26%, 0%)

Oklch

oklch(78.9% 0.138 356.0)

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

#F8FF77

Fresh Green · Khaki · Sunflower

HEX

#F8FF77

RGB

rgb(248, 255, 119)

HSL

hsl(63, 100%, 73%)

HSB

hsb(63, 53%, 100%)

CMYK

cmyk(3%, 0%, 53%, 0%)

Oklch

oklch(96.9% 0.159 111.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7E0E2

DFE7E5

Analogous

E7DFE5

E7E0E2

E7E1DF

Triadic

E7E0E2

E1E7DF

DFE1E7

Split-Comp.

E7E0E2

DFE7E1

DFE5E7

Tetradic

E7E0E2

E5E7DF

DFE7E5

E1DFE7

Contrast Matrix WCAG 2.1 Contrast

E7E0E2	DBF4F3	D7DADC	FF93BD	F8FF77
—	1.1 Fail	1.1 Fail	1.6 Fail	1.2 Fail
1.1 Fail	—	1.2 Fail	1.8 Fail	1.1 Fail
1.1 Fail	1.2 Fail	—	1.5 Fail	1.3 Fail
1.6 Fail	1.8 Fail	1.5 Fail	—	1.9 Fail
1.2 Fail	1.1 Fail	1.3 Fail	1.9 Fail	—

White BG

1.3Fail

1.2Fail

1.4Fail

2.1Fail

1.1Fail

Black BG

16.2AAA

18.2AAA

15.0AAA

10.2AAA

19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4E2

E6E6F3

D8D8DC

D0CFB3

FBFB98

Deuteranopia

E4E5E1

E4E3F3

D8D8DB

D7DFB0

FBFAA0

Tritanopia

E7E1E1

DCF3F3

D7DBDB

FAABA9

F8B2B8

Achromatopsia

E2E2E2

ECECEC

D9D9D9

B8B8B8

EDEDED

Shades & Tints Shades & Tints

#E7E0E2

Dark

Light

#DBF4F3

Dark

Light

#D7DADC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7e0e2;
  --color-2: #dbf4f3;
  --color-3: #d7dadc;
  --color-4: #ff93bd;
  --color-5: #f8ff77;
}

SCSS

$color-1: #e7e0e2;
$color-2: #dbf4f3;
$color-3: #d7dadc;
$color-4: #ff93bd;
$color-5: #f8ff77;

TAILWIND

colors: {
  'brand-1': '#e7e0e2',
  'brand-2': '#dbf4f3',
  'brand-3': '#d7dadc',
  'brand-4': '#ff93bd',
  'brand-5': '#f8ff77',
}

RGB Array

[231, 224, 226], [219, 244, 243], [215, 218, 220], [255, 147, 189], [248, 255, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7E0E2, #DBF4F3, #D7DADC, #FF93BD, #F8FF77 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: #e7e0e2; --color-2: #dbf4f3; --color-3: #d7dadc; --color-4: #ff93bd; --color-5: #f8ff77. 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