#E0E697 + #B8C48D + #7AA189 + #5FB89A + #F2E7AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E0E697

Fresh Green · Khaki · Sunflower

HEX

#E0E697

RGB

rgb(224, 230, 151)

HSL

hsl(65, 61%, 75%)

HSB

hsb(65, 34%, 90%)

CMYK

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

Oklch

oklch(90.2% 0.101 111.9)

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

#B8C48D

Willow Green · Tan · Apple Green

HEX

#B8C48D

RGB

rgb(184, 196, 141)

HSL

hsl(73, 32%, 66%)

HSB

hsb(73, 28%, 77%)

CMYK

cmyk(6%, 0%, 28%, 23%)

Oklch

oklch(79.7% 0.075 118.1)

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

#7AA189

Celadon · LightSlateGray · Olive Green

HEX

#7AA189

RGB

rgb(122, 161, 137)

HSL

hsl(143, 17%, 55%)

HSB

hsb(143, 24%, 63%)

CMYK

cmyk(24%, 0%, 15%, 37%)

Oklch

oklch(67.3% 0.055 157.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#5FB89A

Mineral Blue · CadetBlue · Lake Green

HEX

#5FB89A

RGB

rgb(95, 184, 154)

HSL

hsl(160, 39%, 55%)

HSB

hsb(160, 48%, 72%)

CMYK

cmyk(48%, 0%, 16%, 28%)

Oklch

oklch(71.9% 0.097 169.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#F2E7AC

Fresh Green · Wheat · Lemon Cream

HEX

#F2E7AC

RGB

rgb(242, 231, 172)

HSL

hsl(51, 73%, 81%)

HSB

hsb(51, 29%, 95%)

CMYK

cmyk(0%, 5%, 29%, 5%)

Oklch

oklch(92.3% 0.077 98.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0E697

9F98E6

Analogous

E6C698

E0E697

B9E698

Triadic

E0E697

98E0E6

E698E0

Split-Comp.

E0E697

98B9E6

C698E6

Tetradic

E0E697

98E6C6

9F98E6

E698B9

Contrast Matrix WCAG 2.1 Contrast

E0E697	B8C48D	7AA189	5FB89A	F2E7AC
—	1.4 Fail	2.2 Fail	1.8 Fail	1.1 Fail
1.4 Fail	—	1.6 Fail	1.3 Fail	1.5 Fail
2.2 Fail	1.6 Fail	—	1.2 Fail	2.3 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	1.9 Fail
1.1 Fail	1.5 Fail	2.3 Fail	1.9 Fail	—

White BG

1.3Fail

1.9Fail

2.9Fail

2.4Fail

1.2Fail

Black BG

15.9AAA

11.3AAA

7.3AAA

8.8AAA

16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3AA

BDBD9A

8B8B8F

8686A1

EDEDBA

Deuteranopia

E2E2AF

BDBC9E

898690

807AA3

EEEFBE

Tritanopia

E0B9BD

B9A5A7

7C9394

63A7A8

F1C6C8

Achromatopsia

DBDBDB

BABABA

939393

9A9A9A

E4E4E4

Shades & Tints Shades & Tints

#E0E697

Dark

Light

#B8C48D

Dark

Light

#7AA189

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0e697;
  --color-2: #b8c48d;
  --color-3: #7aa189;
  --color-4: #5fb89a;
  --color-5: #f2e7ac;
}

SCSS

$color-1: #e0e697;
$color-2: #b8c48d;
$color-3: #7aa189;
$color-4: #5fb89a;
$color-5: #f2e7ac;

TAILWIND

colors: {
  'brand-1': '#e0e697',
  'brand-2': '#b8c48d',
  'brand-3': '#7aa189',
  'brand-4': '#5fb89a',
  'brand-5': '#f2e7ac',
}

RGB Array

[224, 230, 151], [184, 196, 141], [122, 161, 137], [95, 184, 154], [242, 231, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0E697, #B8C48D, #7AA189, #5FB89A, #F2E7AC 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: #e0e697; --color-2: #b8c48d; --color-3: #7aa189; --color-4: #5fb89a; --color-5: #f2e7ac. 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