#828B6C + #B4CCA8 + #EAEDC2 + #EEC082 + #BAA47F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#828B6C

Grass Green · Gray · Olive Green

HEX

#828B6C

RGB

rgb(130, 139, 108)

HSL

hsl(77, 13%, 48%)

HSB

hsb(77, 22%, 55%)

CMYK

cmyk(6%, 0%, 22%, 45%)

Oklch

oklch(62.1% 0.046 120.9)

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

#B4CCA8

Celadon · Silver · Apple Green

HEX

#B4CCA8

RGB

rgb(180, 204, 168)

HSL

hsl(100, 26%, 73%)

HSB

hsb(100, 18%, 80%)

CMYK

cmyk(12%, 0%, 18%, 20%)

Oklch

oklch(81.8% 0.056 135.2)

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

#EAEDC2

Fresh Green · Bisque · Lemon Cream

HEX

#EAEDC2

RGB

rgb(234, 237, 194)

HSL

hsl(64, 54%, 85%)

HSB

hsb(64, 18%, 93%)

CMYK

cmyk(1%, 0%, 18%, 7%)

Oklch

oklch(93.3% 0.056 110.7)

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

#EEC082

Goose Yellow · BurlyWood · Warm Sun

HEX

#EEC082

RGB

rgb(238, 192, 130)

HSL

hsl(34, 76%, 72%)

HSB

hsb(34, 45%, 93%)

CMYK

cmyk(0%, 19%, 45%, 7%)

Oklch

oklch(83.5% 0.095 74.2)

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

#BAA47F

Ginger · Tan · Warm Sun

HEX

#BAA47F

RGB

rgb(186, 164, 127)

HSL

hsl(38, 30%, 61%)

HSB

hsb(38, 32%, 73%)

CMYK

cmyk(0%, 12%, 32%, 27%)

Oklch

oklch(72.9% 0.057 80.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

828B6C

746A8A

Analogous

8A836A

828B6C

718A6A

Triadic

828B6C

6A818A

8A6A81

Split-Comp.

828B6C

6A718A

836A8A

Tetradic

828B6C

6A8A83

746A8A

8A6A71

Contrast Matrix WCAG 2.1 Contrast

828B6C	B4CCA8	EAEDC2	EEC082	BAA47F
—	2.1 Fail	3.0 Fail	2.1 Fail	1.5 Fail
2.1 Fail	—	1.4 Fail	1.0 Fail	1.4 Fail
3.0 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.1 Fail	1.0 Fail	1.4 Fail	—	1.4 Fail
1.5 Fail	1.4 Fail	2.0 Fail	1.4 Fail	—

White BG

3.6AA Large

1.7Fail

1.2Fail

1.7Fail

2.4Fail

Black BG

5.9AA

12.1AAA

17.4AAA

12.5AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

868674

BEBFB1

EBEBCC

DADA91

B0B088

Deuteranopia

858575

BDBBB3

EBEBCF

DDE095

B2B38A

Tritanopia

82797B

B5B8B9

EAD5D6

EC9D9F

B98F91

Achromatopsia

858585

C1C1C1

E7E7E7

C7C7C7

A6A6A6

Shades & Tints Shades & Tints

#828B6C

Dark

Light

#B4CCA8

Dark

Light

#EAEDC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #828b6c;
  --color-2: #b4cca8;
  --color-3: #eaedc2;
  --color-4: #eec082;
  --color-5: #baa47f;
}

SCSS

$color-1: #828b6c;
$color-2: #b4cca8;
$color-3: #eaedc2;
$color-4: #eec082;
$color-5: #baa47f;

TAILWIND

colors: {
  'brand-1': '#828b6c',
  'brand-2': '#b4cca8',
  'brand-3': '#eaedc2',
  'brand-4': '#eec082',
  'brand-5': '#baa47f',
}

RGB Array

[130, 139, 108], [180, 204, 168], [234, 237, 194], [238, 192, 130], [186, 164, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #828B6C, #B4CCA8, #EAEDC2, #EEC082, #BAA47F 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: #828b6c; --color-2: #b4cca8; --color-3: #eaedc2; --color-4: #eec082; --color-5: #baa47f. 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