#EBDEAB + #F7FDCC + #DFEEF7 + #FFFFFF + #B0CEE6 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EBDEAB

Goose Yellow · Wheat · Lemon Cream

HEX

#EBDEAB

RGB

rgb(235, 222, 171)

HSL

hsl(48, 62%, 80%)

HSB

hsb(48, 27%, 92%)

CMYK

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

Oklch

oklch(89.9% 0.068 95.5)

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

#F7FDCC

Fresh Green · Beige · Lemon Cream

HEX

#F7FDCC

RGB

rgb(247, 253, 204)

HSL

hsl(67, 92%, 90%)

HSB

hsb(67, 19%, 99%)

CMYK

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

Oklch

oklch(97.7% 0.064 113.3)

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

#DFEEF7

Sky Blue · Lavender · Sky Blue

HEX

#DFEEF7

RGB

rgb(223, 238, 247)

HSL

hsl(203, 60%, 92%)

HSB

hsb(203, 10%, 97%)

CMYK

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

Oklch

oklch(94.1% 0.020 233.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX

#FFFFFF

RGB

rgb(255, 255, 255)

HSL

hsl(0, 0%, 100%)

HSB

hsb(0, 0%, 100%)

CMYK

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

Oklch

oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#B0CEE6

Sky Blue · LightBlue · Cobalt Blue

HEX

#B0CEE6

RGB

rgb(176, 206, 230)

HSL

hsl(207, 52%, 80%)

HSB

hsb(207, 23%, 90%)

CMYK

cmyk(23%, 10%, 0%, 10%)

Oklch

oklch(83.7% 0.047 242.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EBDEAB

ACB9EC

Analogous

ECBFAC

EBDEAB

D9ECAC

Triadic

EBDEAB

ACECDF

DFACEC

Split-Comp.

EBDEAB

ACD9EC

BFACEC

Tetradic

EBDEAB

ACECBF

ACB9EC

ECACD9

Contrast Matrix WCAG 2.1 Contrast

EBDEAB	F7FDCC	DFEEF7	FFFFFF	B0CEE6
—	1.3 Fail	1.1 Fail	1.3 Fail	1.2 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.6 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.3 Fail	1.1 Fail	1.2 Fail	—	1.6 Fail
1.2 Fail	1.6 Fail	1.4 Fail	1.6 Fail	—

White BG

1.3Fail

1.1Fail

1.2Fail

1.0Fail

1.6Fail

Black BG

15.6AAA

19.9AAA

17.7AAA

21.0AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5B7

FAFAD8

E5E6F5

FFFFFF

BDBDE0

Deuteranopia

E6E7BA

F9F9DB

E5E4F4

FFFFFF

BBB9DF

Tritanopia

EAC1C3

F7E1E3

E0F3F3

FFFFFF

B2DCDB

Achromatopsia

DCDCDC

F6F6F6

EBEBEB

FFFFFF

C8C8C8

Shades & Tints Shades & Tints

#EBDEAB

Dark

Light

#F7FDCC

Dark

Light

#DFEEF7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ebdeab;
  --color-2: #f7fdcc;
  --color-3: #dfeef7;
  --color-4: #ffffff;
  --color-5: #b0cee6;
}

SCSS

$color-1: #ebdeab;
$color-2: #f7fdcc;
$color-3: #dfeef7;
$color-4: #ffffff;
$color-5: #b0cee6;

TAILWIND

colors: {
  'brand-1': '#ebdeab',
  'brand-2': '#f7fdcc',
  'brand-3': '#dfeef7',
  'brand-4': '#ffffff',
  'brand-5': '#b0cee6',
}

RGB Array

[235, 222, 171], [247, 253, 204], [223, 238, 247], [255, 255, 255], [176, 206, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #EBDEAB, #F7FDCC, #DFEEF7, #FFFFFF, #B0CEE6 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: #ebdeab; --color-2: #f7fdcc; --color-3: #dfeef7; --color-4: #ffffff; --color-5: #b0cee6. 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