← Back to Editor

#829778 · #AC815E · #8B7647 · #C5A968 · #C9A83D

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

#829778

Celadon · Gray · Olive Green

HEX
#829778
RGB
rgb(130, 151, 120)
HSL
hsl(101, 13%, 53%)
HSB
hsb(101, 21%, 59%)
CMYK
cmyk(14%, 0%, 21%, 41%)
Oklch
oklch(65.1% 0.051 135.6)

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

#AC815E

Tangerine · Gray · Warm Sun

HEX
#AC815E
RGB
rgb(172, 129, 94)
HSL
hsl(27, 32%, 52%)
HSB
hsb(27, 45%, 67%)
CMYK
cmyk(0%, 25%, 45%, 33%)
Oklch
oklch(63.7% 0.072 60.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#8B7647

Ochre · Sienna · Honey Gold

HEX
#8B7647
RGB
rgb(139, 118, 71)
HSL
hsl(41, 32%, 41%)
HSB
hsb(41, 49%, 55%)
CMYK
cmyk(0%, 15%, 49%, 45%)
Oklch
oklch(57.5% 0.070 86.2)

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

#C5A968

Ginger · Tan · Sunflower

HEX
#C5A968
RGB
rgb(197, 169, 104)
HSL
hsl(42, 44%, 59%)
HSB
hsb(42, 47%, 77%)
CMYK
cmyk(0%, 14%, 47%, 23%)
Oklch
oklch(74.5% 0.090 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C9A83D

Ginger · GoldenRod · Sunflower

HEX
#C9A83D
RGB
rgb(201, 168, 61)
HSL
hsl(46, 56%, 51%)
HSB
hsb(46, 70%, 79%)
CMYK
cmyk(0%, 16%, 70%, 21%)
Oklch
oklch(74.2% 0.128 91.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

829778
8D7897

Analogous

919778
829778
78977D

Triadic

829778
788197
977881

Split-Comp.

829778
7D7897
977891

Tetradic

829778
789197
8D7897
977D78

Contrast Matrix WCAG 2.1 Contrast

829778
AC815E
8B7647
C5A968
C9A83D
—
1.1
Fail
1.4
Fail
1.4
Fail
1.4
Fail
1.1
Fail
—
1.3
Fail
1.5
Fail
1.5
Fail
1.4
Fail
1.3
Fail
—
1.9
Fail
1.9
Fail
1.4
Fail
1.5
Fail
1.9
Fail
—
1.0
Fail
1.4
Fail
1.5
Fail
1.9
Fail
1.0
Fail
—
White BG
3.2AA Large
3.5AA Large
4.4AA Large
2.3Fail
2.3Fail
Black BG
6.6AA
6.1AA
4.8AA
9.2AAA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B80
999966
828252
B9B978
BBBA57

Deuteranopia

8A8881
9C9F69
838555
BBBD7C
BDBF5D

Tritanopia

838587
AA6D6F
8A5B5D
C48487
C76B70

Achromatopsia

8D8D8D
8A8A8A
777777
AAAAAA
A6A6A6

Shades & Tints Shades & Tints

#829778

Dark
Light

#AC815E

Dark
Light

#8B7647

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #829778;
  --color-2: #ac815e;
  --color-3: #8b7647;
  --color-4: #c5a968;
  --color-5: #c9a83d;
}

SCSS

$color-1: #829778;
$color-2: #ac815e;
$color-3: #8b7647;
$color-4: #c5a968;
$color-5: #c9a83d;

TAILWIND

colors: {
  'brand-1': '#829778',
  'brand-2': '#ac815e',
  'brand-3': '#8b7647',
  'brand-4': '#c5a968',
  'brand-5': '#c9a83d',
}

RGB Array

[130, 151, 120], [172, 129, 94], [139, 118, 71], [197, 169, 104], [201, 168, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #829778, #AC815E, #8B7647, #C5A968, #C9A83D 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: #829778; --color-2: #ac815e; --color-3: #8b7647; --color-4: #c5a968; --color-5: #c9a83d. 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