← Back to Editor

#9C9A87 · #A39A56 · #A37856 · #D3742C · #FA6F05

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

#9C9A87

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9C9A87
RGB
rgb(156, 154, 135)
HSL
hsl(54, 10%, 57%)
HSB
hsb(54, 13%, 61%)
CMYK
cmyk(0%, 1%, 13%, 39%)
Oklch
oklch(68.3% 0.027 102.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#A39A56

Autumn Sage · Gray · Honey Gold

HEX
#A39A56
RGB
rgb(163, 154, 86)
HSL
hsl(53, 31%, 49%)
HSB
hsb(53, 47%, 64%)
CMYK
cmyk(0%, 6%, 47%, 36%)
Oklch
oklch(67.9% 0.090 101.8)

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

#A37856

Tangerine · Gray · Amber Brown

HEX
#A37856
RGB
rgb(163, 120, 86)
HSL
hsl(26, 31%, 49%)
HSB
hsb(26, 47%, 64%)
CMYK
cmyk(0%, 26%, 47%, 36%)
Oklch
oklch(60.7% 0.072 59.2)

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

#D3742C

Tangerine · Chocolate · Amber Brown

HEX
#D3742C
RGB
rgb(211, 116, 44)
HSL
hsl(26, 65%, 50%)
HSB
hsb(26, 79%, 83%)
CMYK
cmyk(0%, 45%, 79%, 17%)
Oklch
oklch(65.4% 0.145 53.4)

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

#FA6F05

Tangerine · OrangeRed · Amber Brown

HEX
#FA6F05
RGB
rgb(250, 111, 5)
HSL
hsl(26, 96%, 50%)
HSB
hsb(26, 98%, 98%)
CMYK
cmyk(0%, 56%, 98%, 2%)
Oklch
oklch(70.0% 0.192 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C9A87
86899C

Analogous

9C8F86
9C9A87
949C86

Triadic

9C9A87
869C9A
9A869C

Split-Comp.

9C9A87
86949C
8F869C

Tetradic

9C9A87
869C8F
86899C
9C8694

Contrast Matrix WCAG 2.1 Contrast

9C9A87
A39A56
A37856
D3742C
FA6F05
—
1.0
Fail
1.4
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.4
Fail
1.2
Fail
1.0
Fail
1.4
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.0
Fail
1.0
Fail
1.4
Fail
1.2
Fail
—
White BG
2.8Fail
2.9Fail
3.9AA Large
3.3AA Large
2.9Fail
Black BG
7.4AAA
7.3AAA
5.4AA
6.3AA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9B8C
9F9F66
90905E
AAA93D
BEBD1F

Deuteranopia

9B9B8D
A0A06A
939660
AFB742
C6D025

Tritanopia

9C8F90
A37376
A16566
CE4B4E
F33337

Achromatopsia

989898
959595
818181
888888
8C8C8C

Shades & Tints Shades & Tints

#9C9A87

Dark
Light

#A39A56

Dark
Light

#A37856

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c9a87;
  --color-2: #a39a56;
  --color-3: #a37856;
  --color-4: #d3742c;
  --color-5: #fa6f05;
}

SCSS

$color-1: #9c9a87;
$color-2: #a39a56;
$color-3: #a37856;
$color-4: #d3742c;
$color-5: #fa6f05;

TAILWIND

colors: {
  'brand-1': '#9c9a87',
  'brand-2': '#a39a56',
  'brand-3': '#a37856',
  'brand-4': '#d3742c',
  'brand-5': '#fa6f05',
}

RGB Array

[156, 154, 135], [163, 154, 86], [163, 120, 86], [211, 116, 44], [250, 111, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C9A87, #A39A56, #A37856, #D3742C, #FA6F05 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: #9c9a87; --color-2: #a39a56; --color-3: #a37856; --color-4: #d3742c; --color-5: #fa6f05. 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