#88AB67 + #B3C276 + #E0D4BC + #D9B99A + #BA8270 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#88AB67

Celadon · DarkSeaGreen · Olive Green

HEX

#88AB67

RGB

rgb(136, 171, 103)

HSL

hsl(91, 29%, 54%)

HSB

hsb(91, 40%, 67%)

CMYK

cmyk(20%, 0%, 40%, 33%)

Oklch

oklch(69.9% 0.101 130.8)

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

#B3C276

Willow Green · Tan · Apple Green

HEX

#B3C276

RGB

rgb(179, 194, 118)

HSL

hsl(72, 38%, 61%)

HSB

hsb(72, 39%, 76%)

CMYK

cmyk(8%, 0%, 39%, 24%)

Oklch

oklch(78.5% 0.101 117.9)

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

#E0D4BC

Goose Yellow · Wheat · Lemon Cream

HEX

#E0D4BC

RGB

rgb(224, 212, 188)

HSL

hsl(40, 37%, 81%)

HSB

hsb(40, 16%, 88%)

CMYK

cmyk(0%, 5%, 16%, 12%)

Oklch

oklch(87.3% 0.035 84.6)

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

#D9B99A

Goose Yellow · Tan · Warm Sun

HEX

#D9B99A

RGB

rgb(217, 185, 154)

HSL

hsl(30, 45%, 73%)

HSB

hsb(30, 29%, 85%)

CMYK

cmyk(0%, 15%, 29%, 15%)

Oklch

oklch(80.6% 0.056 66.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#BA8270

Tangerine · DarkSalmon · Warm Sun

HEX

#BA8270

RGB

rgb(186, 130, 112)

HSL

hsl(15, 35%, 58%)

HSB

hsb(15, 40%, 73%)

CMYK

cmyk(0%, 30%, 40%, 27%)

Oklch

oklch(65.8% 0.075 38.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88AB67

8B68AC

Analogous

ABAC68

88AB67

68AC69

Triadic

88AB67

6889AC

AC6889

Split-Comp.

88AB67

6968AC

AC68AB

Tetradic

88AB67

68ABAC

8B68AC

AC6968

Contrast Matrix WCAG 2.1 Contrast

88AB67	B3C276	E0D4BC	D9B99A	BA8270
—	1.4 Fail	1.8 Fail	1.4 Fail	1.2 Fail
1.4 Fail	—	1.3 Fail	1.0 Fail	1.7 Fail
1.8 Fail	1.3 Fail	—	1.3 Fail	2.2 Fail
1.4 Fail	1.0 Fail	1.3 Fail	—	1.7 Fail
1.2 Fail	1.7 Fail	2.2 Fail	1.7 Fail	—

White BG

2.6Fail

1.9Fail

1.5Fail

1.8Fail

3.2AA Large

Black BG

8.1AAA

10.9AAA

14.3AAA

11.4AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

979777

B9BA88

DBDBC2

CBCBA2

A2A174

Deuteranopia

95937B

B9B88D

DCDCC3

CDCFA3

A5A975

Tritanopia

8A8487

B4979A

DFC6C7

D7A7A9

B77879

Achromatopsia

999999

B5B5B5

D5D5D5

BFBFBF

919191

Shades & Tints Shades & Tints

#88AB67

Dark

Light

#B3C276

Dark

Light

#E0D4BC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88ab67;
  --color-2: #b3c276;
  --color-3: #e0d4bc;
  --color-4: #d9b99a;
  --color-5: #ba8270;
}

SCSS

$color-1: #88ab67;
$color-2: #b3c276;
$color-3: #e0d4bc;
$color-4: #d9b99a;
$color-5: #ba8270;

TAILWIND

colors: {
  'brand-1': '#88ab67',
  'brand-2': '#b3c276',
  'brand-3': '#e0d4bc',
  'brand-4': '#d9b99a',
  'brand-5': '#ba8270',
}

RGB Array

[136, 171, 103], [179, 194, 118], [224, 212, 188], [217, 185, 154], [186, 130, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #88AB67, #B3C276, #E0D4BC, #D9B99A, #BA8270 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: #88ab67; --color-2: #b3c276; --color-3: #e0d4bc; --color-4: #d9b99a; --color-5: #ba8270. 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