← Back to Editor

#A66F28 · #8A755D · #7B7876 · #986775 · #D00173

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

#A66F28

Ochre · Sienna · Amber Brown

HEX
#A66F28
RGB
rgb(166, 111, 40)
HSL
hsl(34, 61%, 40%)
HSB
hsb(34, 76%, 65%)
CMYK
cmyk(0%, 33%, 76%, 35%)
Oklch
oklch(58.7% 0.110 69.0)

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

#8A755D

Ochre · DimGray · Amber Brown

HEX
#8A755D
RGB
rgb(138, 117, 93)
HSL
hsl(32, 19%, 45%)
HSB
hsb(32, 33%, 54%)
CMYK
cmyk(0%, 15%, 33%, 46%)
Oklch
oklch(57.6% 0.044 70.5)

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

#7B7876

Ink Gray · Gray · Warm Gray

HEX
#7B7876
RGB
rgb(123, 120, 118)
HSL
hsl(24, 2%, 47%)
HSB
hsb(24, 4%, 48%)
CMYK
cmyk(0%, 2%, 4%, 52%)
Oklch
oklch(57.5% 0.005 56.3)

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

#986775

Dark Violet · Gray · Camellia

HEX
#986775
RGB
rgb(152, 103, 117)
HSL
hsl(343, 19%, 50%)
HSB
hsb(343, 32%, 60%)
CMYK
cmyk(0%, 32%, 23%, 40%)
Oklch
oklch(56.9% 0.066 0.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#D00173

Rose Purple · MediumVioletRed · Camellia

HEX
#D00173
RGB
rgb(208, 1, 115)
HSL
hsl(327, 99%, 41%)
HSB
hsb(327, 100%, 82%)
CMYK
cmyk(0%, 100%, 45%, 18%)
Oklch
oklch(55.7% 0.227 358.0)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A66F28
285EA4

Analogous

A43028
A66F28
9CA428

Triadic

A66F28
28A46E
6E28A4

Split-Comp.

A66F28
289CA4
3028A4

Tetradic

A66F28
28A430
285EA4
A4289C

Contrast Matrix WCAG 2.1 Contrast

A66F28
8A755D
7B7876
986775
D00173
—
1.0
Fail
1.0
Fail
1.1
Fail
1.3
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
White BG
4.3AA Large
4.4AA Large
4.4AA Large
4.6AA
5.3AA
Black BG
4.9AA
4.8AA
4.8AA
4.5AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E39
818163
7A7A76
838272
767557

Deuteranopia

91963D
828464
7A7A77
868971
829251

Tritanopia

A3474A
896768
7B7777
966F6E
C6423D

Achromatopsia

777777
797979
797979
777777
4C4C4C

Shades & Tints Shades & Tints

#A66F28

Dark
Light

#8A755D

Dark
Light

#7B7876

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a66f28;
  --color-2: #8a755d;
  --color-3: #7b7876;
  --color-4: #986775;
  --color-5: #d00173;
}

SCSS

$color-1: #a66f28;
$color-2: #8a755d;
$color-3: #7b7876;
$color-4: #986775;
$color-5: #d00173;

TAILWIND

colors: {
  'brand-1': '#a66f28',
  'brand-2': '#8a755d',
  'brand-3': '#7b7876',
  'brand-4': '#986775',
  'brand-5': '#d00173',
}

RGB Array

[166, 111, 40], [138, 117, 93], [123, 120, 118], [152, 103, 117], [208, 1, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A66F28, #8A755D, #7B7876, #986775, #D00173 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: #a66f28; --color-2: #8a755d; --color-3: #7b7876; --color-4: #986775; --color-5: #d00173. 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