← Back to Editor

#826C79 · #8A8370 · #8B9E71 · #99C77F · #F6F6AC

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#826C79

Rose Purple · Gray · Warm Gray

HEX
#826C79
RGB
rgb(130, 108, 121)
HSL
hsl(325, 9%, 47%)
HSB
hsb(325, 17%, 51%)
CMYK
cmyk(0%, 17%, 7%, 49%)
Oklch
oklch(55.7% 0.034 342.0)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#8A8370

Ochre · Gray · Honey Gold

HEX
#8A8370
RGB
rgb(138, 131, 112)
HSL
hsl(44, 10%, 49%)
HSB
hsb(44, 19%, 54%)
CMYK
cmyk(0%, 5%, 19%, 46%)
Oklch
oklch(61.1% 0.029 90.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8B9E71

Grass Green · Gray · Olive Green

HEX
#8B9E71
RGB
rgb(139, 158, 113)
HSL
hsl(85, 19%, 53%)
HSB
hsb(85, 28%, 62%)
CMYK
cmyk(12%, 0%, 28%, 38%)
Oklch
oklch(67.2% 0.067 126.7)

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

#99C77F

Celadon · DarkSeaGreen · Apple Green

HEX
#99C77F
RGB
rgb(153, 199, 127)
HSL
hsl(98, 39%, 64%)
HSB
hsb(98, 36%, 78%)
CMYK
cmyk(23%, 0%, 36%, 22%)
Oklch
oklch(77.9% 0.109 134.8)

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

#F6F6AC

Fresh Green · Wheat · Lemon Cream

HEX
#F6F6AC
RGB
rgb(246, 246, 172)
HSL
hsl(60, 80%, 82%)
HSB
hsb(60, 30%, 96%)
CMYK
cmyk(0%, 0%, 30%, 4%)
Oklch
oklch(95.6% 0.094 108.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

826C79
6D8376

Analogous

816D83
826C79
836D6F

Triadic

826C79
7A836D
6D7A83

Split-Comp.

826C79
6F836D
6D8381

Tetradic

826C79
83816D
6D8376
6D6F83

Contrast Matrix WCAG 2.1 Contrast

826C79
8A8370
8B9E71
99C77F
F6F6AC
—
1.3
Fail
1.7
Fail
2.5
Fail
4.3
AA Large
1.3
Fail
—
1.3
Fail
1.9
Fail
3.4
AA Large
1.7
Fail
1.3
Fail
—
1.5
Fail
2.6
Fail
2.5
Fail
1.9
Fail
1.5
Fail
—
1.7
Fail
4.3
AA Large
3.4
AA Large
2.6
Fail
1.7
Fail
—
White BG
4.8AA
3.8AA Large
2.9Fail
1.9Fail
1.1Fail
Black BG
4.4AA Large
5.6AA
7.2AAA
10.8AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787876
878775
93937C
ADAD90
F6F6BE

Deuteranopia

7A7B75
878876
92917F
AAA795
F6F6C2

Tritanopia

817373
8A7879
8C8486
9B9EA1
F6CCCF

Achromatopsia

747474
838383
939393
B1B1B1
EEEEEE

Shades & Tints Shades & Tints

#826C79

Dark
Light

#8A8370

Dark
Light

#8B9E71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #826c79;
  --color-2: #8a8370;
  --color-3: #8b9e71;
  --color-4: #99c77f;
  --color-5: #f6f6ac;
}

SCSS

$color-1: #826c79;
$color-2: #8a8370;
$color-3: #8b9e71;
$color-4: #99c77f;
$color-5: #f6f6ac;

TAILWIND

colors: {
  'brand-1': '#826c79',
  'brand-2': '#8a8370',
  'brand-3': '#8b9e71',
  'brand-4': '#99c77f',
  'brand-5': '#f6f6ac',
}

RGB Array

[130, 108, 121], [138, 131, 112], [139, 158, 113], [153, 199, 127], [246, 246, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #826C79, #8A8370, #8B9E71, #99C77F, #F6F6AC 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: #826c79; --color-2: #8a8370; --color-3: #8b9e71; --color-4: #99c77f; --color-5: #f6f6ac. 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