← Back to Editor

#9B4715 · #A55B36 · #D0B0AA · #AA9EA3 · #8A7A8C

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

#9B4715

Tangerine · Sienna · Amber Brown

HEX
#9B4715
RGB
rgb(155, 71, 21)
HSL
hsl(22, 76%, 35%)
HSB
hsb(22, 86%, 61%)
CMYK
cmyk(0%, 54%, 86%, 39%)
Oklch
oklch(49.9% 0.127 46.6)

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

#A55B36

Tangerine · Sienna · Amber Brown

HEX
#A55B36
RGB
rgb(165, 91, 54)
HSL
hsl(20, 51%, 43%)
HSB
hsb(20, 67%, 65%)
CMYK
cmyk(0%, 45%, 67%, 35%)
Oklch
oklch(55.0% 0.110 46.1)

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

#D0B0AA

Peach Pink · Tan · Coral Red

HEX
#D0B0AA
RGB
rgb(208, 176, 170)
HSL
hsl(9, 29%, 74%)
HSB
hsb(9, 18%, 82%)
CMYK
cmyk(0%, 15%, 18%, 18%)
Oklch
oklch(78.4% 0.038 30.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#AA9EA3

Ash · DarkGray · Silver Sand

HEX
#AA9EA3
RGB
rgb(170, 158, 163)
HSL
hsl(335, 7%, 64%)
HSB
hsb(335, 7%, 67%)
CMYK
cmyk(0%, 7%, 4%, 33%)
Oklch
oklch(71.1% 0.016 350.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#8A7A8C

Ash · Gray · Warm Gray

HEX
#8A7A8C
RGB
rgb(138, 122, 140)
HSL
hsl(293, 7%, 51%)
HSB
hsb(293, 13%, 55%)
CMYK
cmyk(1%, 13%, 0%, 45%)
Oklch
oklch(60.0% 0.033 322.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B4715
156B9D

Analogous

9D1528
9B4715
9D8B15

Triadic

9B4715
159D47
47159D

Split-Comp.

9B4715
159D8B
15289D

Tetradic

9B4715
289D15
156B9D
8B159D

Contrast Matrix WCAG 2.1 Contrast

9B4715
A55B36
D0B0AA
AA9EA3
8A7A8C
—
1.3
Fail
3.2
AA Large
2.5
Fail
1.6
Fail
1.3
Fail
—
2.5
Fail
2.0
Fail
1.3
Fail
3.2
AA Large
2.5
Fail
—
1.3
Fail
2.0
Fail
2.5
Fail
2.0
Fail
1.3
Fail
—
1.6
Fail
1.6
Fail
1.3
Fail
2.0
Fail
1.6
Fail
—
White BG
6.4AA
5.1AA
2.0Fail
2.6Fail
4.0AA Large
Black BG
3.3AA Large
4.1AA Large
10.5AAA
8.1AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777621
85843F
C2C2AB
A5A5A2
838388

Deuteranopia

7C8224
898F41
C4C6AC
A6A6A2
848587

Tritanopia

972B2D
A14648
CEADAD
A9A1A1
898483

Achromatopsia

5A5A5A
6D6D6D
B9B9B9
A2A2A2
818181

Shades & Tints Shades & Tints

#9B4715

Dark
Light

#A55B36

Dark
Light

#D0B0AA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b4715;
  --color-2: #a55b36;
  --color-3: #d0b0aa;
  --color-4: #aa9ea3;
  --color-5: #8a7a8c;
}

SCSS

$color-1: #9b4715;
$color-2: #a55b36;
$color-3: #d0b0aa;
$color-4: #aa9ea3;
$color-5: #8a7a8c;

TAILWIND

colors: {
  'brand-1': '#9b4715',
  'brand-2': '#a55b36',
  'brand-3': '#d0b0aa',
  'brand-4': '#aa9ea3',
  'brand-5': '#8a7a8c',
}

RGB Array

[155, 71, 21], [165, 91, 54], [208, 176, 170], [170, 158, 163], [138, 122, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B4715, #A55B36, #D0B0AA, #AA9EA3, #8A7A8C 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: #9b4715; --color-2: #a55b36; --color-3: #d0b0aa; --color-4: #aa9ea3; --color-5: #8a7a8c. 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