#D3F5CE + #E4F7F0 + #F5DE8C + #C8D197 + #C5C8A9 · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3F5CE

Emerald · LightGray · Mint Green

HEX

#D3F5CE

RGB

rgb(211, 245, 206)

HSL

hsl(112, 66%, 88%)

HSB

hsb(112, 16%, 96%)

CMYK

cmyk(14%, 0%, 16%, 4%)

Oklch

oklch(93.6% 0.063 141.6)

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

#E4F7F0

Jade · Lavender · Mint Green

HEX

#E4F7F0

RGB

rgb(228, 247, 240)

HSL

hsl(158, 54%, 93%)

HSB

hsb(158, 8%, 97%)

CMYK

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

Oklch

oklch(96.0% 0.022 171.8)

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

#F5DE8C

Goose Yellow · Khaki · Sunflower

HEX

#F5DE8C

RGB

rgb(245, 222, 140)

HSL

hsl(47, 84%, 75%)

HSB

hsb(47, 43%, 96%)

CMYK

cmyk(0%, 9%, 43%, 4%)

Oklch

oklch(90.2% 0.105 94.3)

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

#C8D197

Fresh Green · Tan · Sunflower

HEX

#C8D197

RGB

rgb(200, 209, 151)

HSL

hsl(69, 39%, 71%)

HSB

hsb(69, 28%, 82%)

CMYK

cmyk(4%, 0%, 28%, 18%)

Oklch

oklch(84.0% 0.077 115.3)

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

#C5C8A9

Fresh Green · Silver · Sunflower

HEX

#C5C8A9

RGB

rgb(197, 200, 169)

HSL

hsl(66, 22%, 72%)

HSB

hsb(66, 16%, 78%)

CMYK

cmyk(1%, 0%, 16%, 22%)

Oklch

oklch(82.2% 0.042 111.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3F5CE

EFCCF5

Analogous

E6F5CC

D3F5CE

CCF5DB

Triadic

D3F5CE

CCD2F5

F5CCD2

Split-Comp.

D3F5CE

DBCCF5

F5CCE6

Tetradic

D3F5CE

CCE6F5

EFCCF5

F5DBCC

Contrast Matrix WCAG 2.1 Contrast

D3F5CE	E4F7F0	F5DE8C	C8D197	C5C8A9
—	1.1 Fail	1.1 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
1.5 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.2Fail

1.1Fail

1.3Fail

1.6Fail

1.7Fail

Black BG

17.7AAA

18.9AAA

15.7AAA

13.0AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2D7

ECECF2

EBEBA0

CCCCA5

C6C6B1

Deuteranopia

E0DDDA

EBEAF2

ECEEA5

CBCBA8

C6C6B2

Tritanopia

D5DFE1

E5F3F3

F4B0B3

C8B0B3

C5B6B8

Achromatopsia

E6E6E6

F1F1F1

DCDCDC

C8C8C8

C4C4C4

Shades & Tints Shades & Tints

#D3F5CE

Dark

Light

#E4F7F0

Dark

Light

#F5DE8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3f5ce;
  --color-2: #e4f7f0;
  --color-3: #f5de8c;
  --color-4: #c8d197;
  --color-5: #c5c8a9;
}

SCSS

$color-1: #d3f5ce;
$color-2: #e4f7f0;
$color-3: #f5de8c;
$color-4: #c8d197;
$color-5: #c5c8a9;

TAILWIND

colors: {
  'brand-1': '#d3f5ce',
  'brand-2': '#e4f7f0',
  'brand-3': '#f5de8c',
  'brand-4': '#c8d197',
  'brand-5': '#c5c8a9',
}

RGB Array

[211, 245, 206], [228, 247, 240], [245, 222, 140], [200, 209, 151], [197, 200, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #D3F5CE, #E4F7F0, #F5DE8C, #C8D197, #C5C8A9 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: #d3f5ce; --color-2: #e4f7f0; --color-3: #f5de8c; --color-4: #c8d197; --color-5: #c5c8a9. 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 bright-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