#849999 + #80AB93 + #A5BA84 + #CCC693 + #F2CDA2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#849999

Slate Blue · LightSlateGray · Silver Sand

HEX

#849999

RGB

rgb(132, 153, 153)

HSL

hsl(180, 9%, 56%)

HSB

hsb(180, 14%, 60%)

CMYK

cmyk(14%, 0%, 0%, 40%)

Oklch

oklch(66.7% 0.024 196.6)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#80AB93

Celadon · DarkSeaGreen · Olive Green

HEX

#80AB93

RGB

rgb(128, 171, 147)

HSL

hsl(147, 20%, 59%)

HSB

hsb(147, 25%, 67%)

CMYK

cmyk(25%, 0%, 14%, 33%)

Oklch

oklch(70.3% 0.058 160.0)

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

#A5BA84

Willow Green · DarkSeaGreen · Apple Green

HEX

#A5BA84

RGB

rgb(165, 186, 132)

HSL

hsl(83, 28%, 62%)

HSB

hsb(83, 29%, 73%)

CMYK

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

Oklch

oklch(75.9% 0.077 125.4)

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

#CCC693

Fresh Green · Tan · Sunflower

HEX

#CCC693

RGB

rgb(204, 198, 147)

HSL

hsl(54, 36%, 69%)

HSB

hsb(54, 28%, 80%)

CMYK

cmyk(0%, 3%, 28%, 20%)

Oklch

oklch(81.9% 0.068 102.1)

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

#F2CDA2

Goose Yellow · Wheat · Peach Orange

HEX

#F2CDA2

RGB

rgb(242, 205, 162)

HSL

hsl(32, 75%, 79%)

HSB

hsb(32, 33%, 95%)

CMYK

cmyk(0%, 15%, 33%, 5%)

Oklch

oklch(87.0% 0.070 70.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

849999

998585

Analogous

85998F

849999

858F99

Triadic

849999

998599

999985

Split-Comp.

849999

99858F

998F85

Tetradic

849999

8F8599

998585

8F9985

Contrast Matrix WCAG 2.1 Contrast

849999	80AB93	A5BA84	CCC693	F2CDA2
—	1.2 Fail	1.4 Fail	1.7 Fail	2.0 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.7 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.0 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

3.0AA Large

2.6Fail

2.1Fail

1.7Fail

1.5Fail

Black BG

7.0AA

8.2AAA

10.0AAA

12.1AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D99

939399

AEAE91

C9C99F

E2E2AC

Deuteranopia

8C8A99

908D9A

ADAB94

CACAA2

E4E7AF

Tritanopia

859999

829D9E

A69B9E

CCA9AB

F0B5B6

Achromatopsia

939393

9B9B9B

AEAEAE

C2C2C2

D3D3D3

Shades & Tints Shades & Tints

#849999

Dark

Light

#80AB93

Dark

Light

#A5BA84

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #849999;
  --color-2: #80ab93;
  --color-3: #a5ba84;
  --color-4: #ccc693;
  --color-5: #f2cda2;
}

SCSS

$color-1: #849999;
$color-2: #80ab93;
$color-3: #a5ba84;
$color-4: #ccc693;
$color-5: #f2cda2;

TAILWIND

colors: {
  'brand-1': '#849999',
  'brand-2': '#80ab93',
  'brand-3': '#a5ba84',
  'brand-4': '#ccc693',
  'brand-5': '#f2cda2',
}

RGB Array

[132, 153, 153], [128, 171, 147], [165, 186, 132], [204, 198, 147], [242, 205, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #849999, #80AB93, #A5BA84, #CCC693, #F2CDA2 is ideal for: corporate websites, product showcases, portfolios. 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: #849999; --color-2: #80ab93; --color-3: #a5ba84; --color-4: #ccc693; --color-5: #f2cda2. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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