#767876 + #8A9F8A + #C0C99A + #EEE999 + #FDBF89 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#767876

Ink Gray · Gray · Warm Gray

HEX

#767876

RGB

rgb(118, 120, 118)

HSL

hsl(120, 1%, 47%)

HSB

hsb(120, 2%, 47%)

CMYK

cmyk(2%, 0%, 2%, 53%)

Oklch

oklch(57.0% 0.004 145.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#8A9F8A

Celadon · DarkSeaGreen · Olive Green

HEX

#8A9F8A

RGB

rgb(138, 159, 138)

HSL

hsl(120, 10%, 58%)

HSB

hsb(120, 13%, 62%)

CMYK

cmyk(13%, 0%, 13%, 38%)

Oklch

oklch(68.0% 0.039 145.1)

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

#C0C99A

Willow Green · Tan · Apple Green

HEX

#C0C99A

RGB

rgb(192, 201, 154)

HSL

hsl(71, 30%, 70%)

HSB

hsb(71, 23%, 79%)

CMYK

cmyk(4%, 0%, 23%, 21%)

Oklch

oklch(81.7% 0.064 116.6)

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

#EEE999

Fresh Green · Khaki · Lemon Cream

HEX

#EEE999

RGB

rgb(238, 233, 153)

HSL

hsl(56, 71%, 77%)

HSB

hsb(56, 36%, 93%)

CMYK

cmyk(0%, 2%, 36%, 7%)

Oklch

oklch(92.0% 0.101 105.1)

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

#FDBF89

Apricot · BurlyWood · Peach Orange

HEX

#FDBF89

RGB

rgb(253, 191, 137)

HSL

hsl(28, 97%, 76%)

HSB

hsb(28, 46%, 99%)

CMYK

cmyk(0%, 25%, 46%, 1%)

Oklch

oklch(84.9% 0.100 61.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

767876

797779

Analogous

787977

767876

777978

Triadic

767876

777779

797777

Split-Comp.

767876

787779

797778

Tetradic

767876

777879

797779

797877

Contrast Matrix WCAG 2.1 Contrast

767876	8A9F8A	C0C99A	EEE999	FDBF89
—	1.6 Fail	2.6 Fail	3.6 AA Large	2.8 Fail
1.6 Fail	—	1.6 Fail	2.3 Fail	1.8 Fail
2.6 Fail	1.6 Fail	—	1.4 Fail	1.1 Fail
3.6 AA Large	2.3 Fail	1.4 Fail	—	1.3 Fail
2.8 Fail	1.8 Fail	1.1 Fail	1.3 Fail	—

White BG

4.5AA Large

2.8Fail

1.7Fail

1.3Fail

1.6Fail

Black BG

4.7AA

7.4AAA

12.1AAA

16.8AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777776

93938F

C4C4A5

ECECAC

E2E296

Deuteranopia

777777

929090

C3C3A8

ECEDB1

E6EA99

Tritanopia

767777

8B9394

C0AEB0

EEBCBF

FAA0A3

Achromatopsia

777777

969696

C1C1C1

E1E1E1

CBCBCB

Shades & Tints Shades & Tints

#767876

Dark

Light

#8A9F8A

Dark

Light

#C0C99A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #767876;
  --color-2: #8a9f8a;
  --color-3: #c0c99a;
  --color-4: #eee999;
  --color-5: #fdbf89;
}

SCSS

$color-1: #767876;
$color-2: #8a9f8a;
$color-3: #c0c99a;
$color-4: #eee999;
$color-5: #fdbf89;

TAILWIND

colors: {
  'brand-1': '#767876',
  'brand-2': '#8a9f8a',
  'brand-3': '#c0c99a',
  'brand-4': '#eee999',
  'brand-5': '#fdbf89',
}

RGB Array

[118, 120, 118], [138, 159, 138], [192, 201, 154], [238, 233, 153], [253, 191, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #767876, #8A9F8A, #C0C99A, #EEE999, #FDBF89 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: #767876; --color-2: #8a9f8a; --color-3: #c0c99a; --color-4: #eee999; --color-5: #fdbf89. 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