#EFE8DB + #E5D9D6 + #F7F8CC + #CBCBFF + #949098 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EFE8DB

Goose Yellow · Beige · Peach Orange

HEX

#EFE8DB

RGB

rgb(239, 232, 219)

HSL

hsl(39, 38%, 90%)

HSB

hsb(39, 8%, 94%)

CMYK

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

Oklch

oklch(93.3% 0.019 83.1)

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

#E5D9D6

Peach Pink · LightGray · Cherry Blossom

HEX

#E5D9D6

RGB

rgb(229, 217, 214)

HSL

hsl(12, 22%, 87%)

HSB

hsb(12, 7%, 90%)

CMYK

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

Oklch

oklch(89.4% 0.014 34.3)

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

#F7F8CC

Fresh Green · Beige · Lemon Cream

HEX

#F7F8CC

RGB

rgb(247, 248, 204)

HSL

hsl(61, 76%, 89%)

HSB

hsb(61, 18%, 97%)

CMYK

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

Oklch

oklch(96.7% 0.057 108.5)

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

#CBCBFF

Wisteria · Lavender · Sky Blue

HEX

#CBCBFF

RGB

rgb(203, 203, 255)

HSL

hsl(240, 100%, 90%)

HSB

hsb(240, 20%, 100%)

CMYK

cmyk(20%, 20%, 0%, 0%)

Oklch

oklch(85.9% 0.072 284.8)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#949098

Ash · LightSlateGray · Silver Sand

HEX

#949098

RGB

rgb(148, 144, 152)

HSL

hsl(270, 4%, 58%)

HSB

hsb(270, 5%, 60%)

CMYK

cmyk(3%, 5%, 0%, 40%)

Oklch

oklch(65.9% 0.013 308.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFE8DB

DCE3EF

Analogous

EFDFDC

EFE8DB

ECEFDC

Triadic

EFE8DB

DCEFE8

E8DCEF

Split-Comp.

EFE8DB

DCECEF

DFDCEF

Tetradic

EFE8DB

DCEFDF

DCE3EF

EFDCEC

Contrast Matrix WCAG 2.1 Contrast

EFE8DB	E5D9D6	F7F8CC	CBCBFF	949098
—	1.1 Fail	1.1 Fail	1.3 Fail	2.6 Fail
1.1 Fail	—	1.3 Fail	1.1 Fail	2.3 Fail
1.1 Fail	1.3 Fail	—	1.4 Fail	2.9 Fail
1.3 Fail	1.1 Fail	1.4 Fail	—	2.0 Fail
2.6 Fail	2.3 Fail	2.9 Fail	2.0 Fail	—

White BG

1.2Fail

1.4Fail

1.1Fail

1.6Fail

3.1AA Large

Black BG

17.2AAA

15.2AAA

19.3AAA

13.5AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECDE

E0E0D7

F7F7D7

CBCBF2

929296

Deuteranopia

ECEDDF

E1E1D7

F7F7D9

CBCBEF

939396

Tritanopia

EFE1E1

E4D7D7

F7DFE1

CBE8E6

949594

Achromatopsia

E9E9E9

DCDCDC

F3F3F3

D1D1D1

929292

Shades & Tints Shades & Tints

#EFE8DB

Dark

Light

#E5D9D6

Dark

Light

#F7F8CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efe8db;
  --color-2: #e5d9d6;
  --color-3: #f7f8cc;
  --color-4: #cbcbff;
  --color-5: #949098;
}

SCSS

$color-1: #efe8db;
$color-2: #e5d9d6;
$color-3: #f7f8cc;
$color-4: #cbcbff;
$color-5: #949098;

TAILWIND

colors: {
  'brand-1': '#efe8db',
  'brand-2': '#e5d9d6',
  'brand-3': '#f7f8cc',
  'brand-4': '#cbcbff',
  'brand-5': '#949098',
}

RGB Array

[239, 232, 219], [229, 217, 214], [247, 248, 204], [203, 203, 255], [148, 144, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #EFE8DB, #E5D9D6, #F7F8CC, #CBCBFF, #949098 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: #efe8db; --color-2: #e5d9d6; --color-3: #f7f8cc; --color-4: #cbcbff; --color-5: #949098. 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 summer-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