#B8E7D7 + #D1E7C9 + #EBECBC + #E6DF9F + #ECDA6A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8E7D7

Jade · LightBlue · Glacier Blue

HEX

#B8E7D7

RGB

rgb(184, 231, 215)

HSL

hsl(160, 49%, 81%)

HSB

hsb(160, 20%, 91%)

CMYK

cmyk(20%, 0%, 7%, 9%)

Oklch

oklch(89.1% 0.053 172.3)

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

#D1E7C9

Celadon · LightGray · Mint Green

HEX

#D1E7C9

RGB

rgb(209, 231, 201)

HSL

hsl(104, 38%, 85%)

HSB

hsb(104, 13%, 91%)

CMYK

cmyk(10%, 0%, 13%, 9%)

Oklch

oklch(90.4% 0.047 137.3)

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

#EBECBC

Fresh Green · Wheat · Lemon Cream

HEX

#EBECBC

RGB

rgb(235, 236, 188)

HSL

hsl(61, 56%, 83%)

HSB

hsb(61, 20%, 93%)

CMYK

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

Oklch

oklch(93.0% 0.062 108.5)

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

#E6DF9F

Fresh Green · Khaki · Lemon Cream

HEX

#E6DF9F

RGB

rgb(230, 223, 159)

HSL

hsl(54, 59%, 76%)

HSB

hsb(54, 31%, 90%)

CMYK

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

Oklch

oklch(89.4% 0.083 102.6)

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

#ECDA6A

Fresh Green · Khaki · Sunflower

HEX

#ECDA6A

RGB

rgb(236, 218, 106)

HSL

hsl(52, 77%, 67%)

HSB

hsb(52, 55%, 93%)

CMYK

cmyk(0%, 8%, 55%, 7%)

Oklch

oklch(88.1% 0.134 100.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8E7D7

E6B7C7

Analogous

B7E6BF

B8E7D7

B7DEE6

Triadic

B8E7D7

D6B7E6

E6D6B7

Split-Comp.

B8E7D7

E6B7DE

E6BFB7

Tetradic

B8E7D7

BFB7E6

E6B7C7

DEE6B7

Contrast Matrix WCAG 2.1 Contrast

B8E7D7	D1E7C9	EBECBC	E6DF9F	ECDA6A
—	1.0 Fail	1.1 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.0 Fail	1.0 Fail	1.1 Fail	—	1.0 Fail
1.0 Fail	1.1 Fail	1.2 Fail	1.0 Fail	—

White BG

1.4Fail

1.3Fail

1.2Fail

1.4Fail

Black BG

15.4AAA

16.0AAA

17.3AAA

15.4AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDDB

DBDBD0

EBEBC8

E3E3AE

E4E485

Deuteranopia

CAC6DC

D9D8D2

EBEBCA

E3E4B2

E5E78C

Tritanopia

BADEDF

D2D6D7

EBD1D3

E6BBBD

EB9A9F

Achromatopsia

D7D7D7

DDDDDD

E6E6E6

DADADA

D3D3D3

Shades & Tints Shades & Tints

#B8E7D7

Dark

Light

#D1E7C9

Dark

Light

#EBECBC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8e7d7;
  --color-2: #d1e7c9;
  --color-3: #ebecbc;
  --color-4: #e6df9f;
  --color-5: #ecda6a;
}

SCSS

$color-1: #b8e7d7;
$color-2: #d1e7c9;
$color-3: #ebecbc;
$color-4: #e6df9f;
$color-5: #ecda6a;

TAILWIND

colors: {
  'brand-1': '#b8e7d7',
  'brand-2': '#d1e7c9',
  'brand-3': '#ebecbc',
  'brand-4': '#e6df9f',
  'brand-5': '#ecda6a',
}

RGB Array

[184, 231, 215], [209, 231, 201], [235, 236, 188], [230, 223, 159], [236, 218, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8E7D7, #D1E7C9, #EBECBC, #E6DF9F, #ECDA6A 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: #b8e7d7; --color-2: #d1e7c9; --color-3: #ebecbc; --color-4: #e6df9f; --color-5: #ecda6a. 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