#8A9B71 + #ECE2A5 + #E2D398 + #FFBA78 + #B9D4AB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8A9B71

Grass Green · Gray · Olive Green

HEX

#8A9B71

RGB

rgb(138, 155, 113)

HSL

hsl(84, 17%, 53%)

HSB

hsb(84, 27%, 61%)

CMYK

cmyk(11%, 0%, 27%, 39%)

Oklch

oklch(66.5% 0.063 126.0)

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

#ECE2A5

Fresh Green · Wheat · Lemon Cream

HEX

#ECE2A5

RGB

rgb(236, 226, 165)

HSL

hsl(52, 65%, 79%)

HSB

hsb(52, 30%, 93%)

CMYK

cmyk(0%, 4%, 30%, 7%)

Oklch

oklch(90.6% 0.079 99.9)

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

#E2D398

Goose Yellow · Khaki · Sunflower

HEX

#E2D398

RGB

rgb(226, 211, 152)

HSL

hsl(48, 56%, 74%)

HSB

hsb(48, 33%, 89%)

CMYK

cmyk(0%, 7%, 33%, 11%)

Oklch

oklch(86.5% 0.078 95.6)

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

#FFBA78

Apricot · LightSalmon · Warm Sun

HEX

#FFBA78

RGB

rgb(255, 186, 120)

HSL

hsl(29, 100%, 74%)

HSB

hsb(29, 53%, 100%)

CMYK

cmyk(0%, 27%, 53%, 0%)

Oklch

oklch(83.9% 0.115 63.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#B9D4AB

Celadon · Silver · Apple Green

HEX

#B9D4AB

RGB

rgb(185, 212, 171)

HSL

hsl(100, 32%, 75%)

HSB

hsb(100, 19%, 83%)

CMYK

cmyk(13%, 0%, 19%, 17%)

Oklch

oklch(83.9% 0.063 134.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A9B71

83739C

Analogous

9C9773

8A9B71

779C73

Triadic

8A9B71

738B9C

9C738B

Split-Comp.

8A9B71

73779C

97739C

Tetradic

8A9B71

739C97

83739C

9C7377

Contrast Matrix WCAG 2.1 Contrast

8A9B71	ECE2A5	E2D398	FFBA78	B9D4AB
—	2.3 Fail	2.0 Fail	1.8 Fail	1.9 Fail
2.3 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
2.0 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.8 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.9 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

3.0Fail

1.3Fail

1.5Fail

1.7Fail

1.6Fail

Black BG

7.0AAA

16.0AAA

14.0AAA

12.5AAA

13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91927B

E8E8B4

DCDBA6

E1E188

C5C5B5

Deuteranopia

908F7E

E8E9B7

DCDEAA

E5EA8C

C3C1B7

Tritanopia

8B8385

ECBFC2

E1B2B4

FC9597

BABDBE

Achromatopsia

919191

DEDEDE

D1D1D1

C7C7C7

Shades & Tints Shades & Tints

#8A9B71

Dark

Light

#ECE2A5

Dark

Light

#E2D398

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a9b71;
  --color-2: #ece2a5;
  --color-3: #e2d398;
  --color-4: #ffba78;
  --color-5: #b9d4ab;
}

SCSS

$color-1: #8a9b71;
$color-2: #ece2a5;
$color-3: #e2d398;
$color-4: #ffba78;
$color-5: #b9d4ab;

TAILWIND

colors: {
  'brand-1': '#8a9b71',
  'brand-2': '#ece2a5',
  'brand-3': '#e2d398',
  'brand-4': '#ffba78',
  'brand-5': '#b9d4ab',
}

RGB Array

[138, 155, 113], [236, 226, 165], [226, 211, 152], [255, 186, 120], [185, 212, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8A9B71, #ECE2A5, #E2D398, #FFBA78, #B9D4AB 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: #8a9b71; --color-2: #ece2a5; --color-3: #e2d398; --color-4: #ffba78; --color-5: #b9d4ab. 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