#EFD8F2 + #5F7AA3 + #C8EBDE + #EDE1D1 + #DCF09B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EFD8F2

Lilac · Lavender · Lavender

HEX

#EFD8F2

RGB

rgb(239, 216, 242)

HSL

hsl(293, 50%, 90%)

HSB

hsb(293, 11%, 95%)

CMYK

cmyk(1%, 11%, 0%, 5%)

Oklch

oklch(90.9% 0.043 322.3)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#5F7AA3

Azure · SlateGray · Navy Blue

HEX

#5F7AA3

RGB

rgb(95, 122, 163)

HSL

hsl(216, 27%, 51%)

HSB

hsb(216, 42%, 64%)

CMYK

cmyk(42%, 25%, 0%, 36%)

Oklch

oklch(57.5% 0.071 258.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#C8EBDE

Jade · LightGray · Mint Green

HEX

#C8EBDE

RGB

rgb(200, 235, 222)

HSL

hsl(158, 47%, 85%)

HSB

hsb(158, 15%, 92%)

CMYK

cmyk(15%, 0%, 6%, 8%)

Oklch

oklch(91.1% 0.041 170.9)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#EDE1D1

Goose Yellow · Bisque · Peach Orange

HEX

#EDE1D1

RGB

rgb(237, 225, 209)

HSL

hsl(34, 44%, 87%)

HSB

hsb(34, 12%, 93%)

CMYK

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

Oklch

oklch(91.5% 0.025 75.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DCF09B

Willow Green · Khaki · Apple Green

HEX

#DCF09B

RGB

rgb(220, 240, 155)

HSL

hsl(74, 74%, 77%)

HSB

hsb(74, 35%, 94%)

CMYK

cmyk(8%, 0%, 35%, 6%)

Oklch

oklch(92.1% 0.110 119.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFD8F2

DCF2D9

Analogous

E3D9F2

EFD8F2

F2D9E8

Triadic

EFD8F2

F2EFD9

D9F2EF

Split-Comp.

EFD8F2

E8F2D9

D9F2E3

Tetradic

EFD8F2

F2E3D9

DCF2D9

D9E8F2

Contrast Matrix WCAG 2.1 Contrast

EFD8F2	5F7AA3	C8EBDE	EDE1D1	DCF09B
—	3.3 AA Large	1.0 Fail	1.0 Fail	1.1 Fail
3.3 AA Large	—	3.4 AA Large	3.4 AA Large	3.5 AA Large
1.0 Fail	3.4 AA Large	—	1.0 Fail	1.0 Fail
1.0 Fail	3.4 AA Large	1.0 Fail	—	1.0 Fail
1.1 Fail	3.5 AA Large	1.0 Fail	1.0 Fail	—

White BG

1.3Fail

4.4AA Large

1.3Fail

1.2Fail

Black BG

15.8AAA

4.8AA

16.4AAA

16.3AAA

17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5EC

6B6B99

D7D7E1

E8E8D5

E5E5B0

Deuteranopia

E6E8EA

696797

D5D3E2

E9E9D6

E4E2B5

Tritanopia

EEE7E6

609190

CAE4E4

ECD8D9

DDC0C3

Achromatopsia

E2E2E2

777777

DFDFDF

E3E3E3

E0E0E0

Shades & Tints Shades & Tints

#EFD8F2

Dark

Light

#5F7AA3

Dark

Light

#C8EBDE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efd8f2;
  --color-2: #5f7aa3;
  --color-3: #c8ebde;
  --color-4: #ede1d1;
  --color-5: #dcf09b;
}

SCSS

$color-1: #efd8f2;
$color-2: #5f7aa3;
$color-3: #c8ebde;
$color-4: #ede1d1;
$color-5: #dcf09b;

TAILWIND

colors: {
  'brand-1': '#efd8f2',
  'brand-2': '#5f7aa3',
  'brand-3': '#c8ebde',
  'brand-4': '#ede1d1',
  'brand-5': '#dcf09b',
}

RGB Array

[239, 216, 242], [95, 122, 163], [200, 235, 222], [237, 225, 209], [220, 240, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EFD8F2, #5F7AA3, #C8EBDE, #EDE1D1, #DCF09B 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: #efd8f2; --color-2: #5f7aa3; --color-3: #c8ebde; --color-4: #ede1d1; --color-5: #dcf09b. 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