← Back to Editor

#978C51 · #9F8748 · #B3792F · #CE680F · #A7823F

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

#978C51

Autumn Sage · Gray · Honey Gold

HEX
#978C51
RGB
rgb(151, 140, 81)
HSL
hsl(51, 30%, 45%)
HSB
hsb(51, 46%, 59%)
CMYK
cmyk(0%, 7%, 46%, 41%)
Oklch
oklch(63.6% 0.080 99.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#9F8748

Ochre · Sienna · Honey Gold

HEX
#9F8748
RGB
rgb(159, 135, 72)
HSL
hsl(43, 38%, 45%)
HSB
hsb(43, 55%, 62%)
CMYK
cmyk(0%, 15%, 55%, 38%)
Oklch
oklch(63.2% 0.087 89.0)

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

#B3792F

Ochre · DarkGoldenRod · Amber Brown

HEX
#B3792F
RGB
rgb(179, 121, 47)
HSL
hsl(34, 58%, 44%)
HSB
hsb(34, 74%, 70%)
CMYK
cmyk(0%, 32%, 74%, 30%)
Oklch
oklch(62.3% 0.114 69.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#CE680F

Tangerine · Chocolate · Amber Brown

HEX
#CE680F
RGB
rgb(206, 104, 15)
HSL
hsl(28, 86%, 43%)
HSB
hsb(28, 93%, 81%)
CMYK
cmyk(0%, 50%, 93%, 19%)
Oklch
oklch(62.6% 0.155 52.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A7823F

Ochre · Sienna · Amber Brown

HEX
#A7823F
RGB
rgb(167, 130, 63)
HSL
hsl(39, 45%, 45%)
HSB
hsb(39, 62%, 65%)
CMYK
cmyk(0%, 22%, 62%, 35%)
Oklch
oklch(62.9% 0.096 80.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

978C51
505B95

Analogous

956850
978C51
7D9550

Triadic

978C51
50958B
8B5095

Split-Comp.

978C51
507D95
685095

Tetradic

978C51
509568
505B95
95507D

Contrast Matrix WCAG 2.1 Contrast

978C51
9F8748
B3792F
CE680F
A7823F
—
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
—
White BG
3.4AA Large
3.5AA Large
3.7AA Large
3.7AA Large
3.6AA Large
Black BG
6.2AA
6.0AA
5.7AA
5.6AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

92925F
959457
9A9941
A2A125
97974F

Deuteranopia

939463
96985B
9DA245
A8AF2A
999C53

Tritanopia

966B6D
9E6366
B04F52
C93639
A55C5F

Achromatopsia

898989
878787
828282
7C7C7C
858585

Shades & Tints Shades & Tints

#978C51

Dark
Light

#9F8748

Dark
Light

#B3792F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #978c51;
  --color-2: #9f8748;
  --color-3: #b3792f;
  --color-4: #ce680f;
  --color-5: #a7823f;
}

SCSS

$color-1: #978c51;
$color-2: #9f8748;
$color-3: #b3792f;
$color-4: #ce680f;
$color-5: #a7823f;

TAILWIND

colors: {
  'brand-1': '#978c51',
  'brand-2': '#9f8748',
  'brand-3': '#b3792f',
  'brand-4': '#ce680f',
  'brand-5': '#a7823f',
}

RGB Array

[151, 140, 81], [159, 135, 72], [179, 121, 47], [206, 104, 15], [167, 130, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #978C51, #9F8748, #B3792F, #CE680F, #A7823F 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: #978c51; --color-2: #9f8748; --color-3: #b3792f; --color-4: #ce680f; --color-5: #a7823f. 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