#8BA49F + #A8BBAA + #C5D2B6 + #E2E8C1 + #E8AF92 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8BA49F

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#8BA49F

RGB

rgb(139, 164, 159)

HSL

hsl(168, 12%, 59%)

HSB

hsb(168, 15%, 64%)

CMYK

cmyk(15%, 0%, 3%, 36%)

Oklch

oklch(69.8% 0.029 182.0)

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

#A8BBAA

Celadon · DarkGray · Apple Green

HEX

#A8BBAA

RGB

rgb(168, 187, 170)

HSL

hsl(126, 12%, 70%)

HSB

hsb(126, 10%, 73%)

CMYK

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

Oklch

oklch(77.3% 0.032 148.3)

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

#C5D2B6

Willow Green · Silver · Apple Green

HEX

#C5D2B6

RGB

rgb(197, 210, 182)

HSL

hsl(88, 24%, 77%)

HSB

hsb(88, 13%, 82%)

CMYK

cmyk(6%, 0%, 13%, 18%)

Oklch

oklch(84.6% 0.041 127.6)

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

#E2E8C1

Fresh Green · Wheat · Lemon Cream

HEX

#E2E8C1

RGB

rgb(226, 232, 193)

HSL

hsl(69, 46%, 83%)

HSB

hsb(69, 17%, 91%)

CMYK

cmyk(3%, 0%, 17%, 9%)

Oklch

oklch(91.6% 0.052 114.5)

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

#E8AF92

Apricot · BurlyWood · Warm Sun

HEX

#E8AF92

RGB

rgb(232, 175, 146)

HSL

hsl(20, 65%, 74%)

HSB

hsb(20, 37%, 91%)

CMYK

cmyk(0%, 25%, 37%, 9%)

Oklch

oklch(80.0% 0.078 48.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BA49F

A38A8F

Analogous

8AA391

8BA49F

8A9BA3

Triadic

8BA49F

9E8AA3

A39E8A

Split-Comp.

8BA49F

A38A9B

A3918A

Tetradic

8BA49F

918AA3

A38A8F

9BA38A

Contrast Matrix WCAG 2.1 Contrast

8BA49F	A8BBAA	C5D2B6	E2E8C1	E8AF92
—	1.3 Fail	1.7 Fail	2.1 Fail	1.4 Fail
1.3 Fail	—	1.3 Fail	1.6 Fail	1.1 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.2 Fail
2.1 Fail	1.6 Fail	1.2 Fail	—	1.5 Fail
1.4 Fail	1.1 Fail	1.2 Fail	1.5 Fail	—

White BG

2.7Fail

2.0Fail

1.6Fail

1.3Fail

1.9Fail

Black BG

7.9AAA

10.4AAA

13.3AAA

16.5AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9696A0

B0B0AE

CBCBBD

E5E5CA

CFCF99

Deuteranopia

9493A1

AFAEAF

CAC9BE

E4E4CD

D3D79B

Tritanopia

8CA1A1

A9B1B2

C6C2C3

E2D2D4

E59FA0

Achromatopsia

9C9C9C

B3B3B3

CBCBCB

E2E2E2

BDBDBD

Shades & Tints Shades & Tints

#8BA49F

Dark

Light

#A8BBAA

Dark

Light

#C5D2B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ba49f;
  --color-2: #a8bbaa;
  --color-3: #c5d2b6;
  --color-4: #e2e8c1;
  --color-5: #e8af92;
}

SCSS

$color-1: #8ba49f;
$color-2: #a8bbaa;
$color-3: #c5d2b6;
$color-4: #e2e8c1;
$color-5: #e8af92;

TAILWIND

colors: {
  'brand-1': '#8ba49f',
  'brand-2': '#a8bbaa',
  'brand-3': '#c5d2b6',
  'brand-4': '#e2e8c1',
  'brand-5': '#e8af92',
}

RGB Array

[139, 164, 159], [168, 187, 170], [197, 210, 182], [226, 232, 193], [232, 175, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BA49F, #A8BBAA, #C5D2B6, #E2E8C1, #E8AF92 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: #8ba49f; --color-2: #a8bbaa; --color-3: #c5d2b6; --color-4: #e2e8c1; --color-5: #e8af92. 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