← Back to Editor

#8A6E77 · #463639 · #AD8063 · #CFBC81 · #FBDDA1

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 LibraryData Visualization

Color Details Color Details

#8A6E77

Dark Violet · Gray · Camellia

HEX
#8A6E77
RGB
rgb(138, 110, 119)
HSL
hsl(341, 11%, 49%)
HSB
hsb(341, 20%, 54%)
CMYK
cmyk(0%, 20%, 14%, 46%)
Oklch
oklch(56.8% 0.038 357.2)

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

#463639

Crimson · DarkSlateGray · Wine Red

HEX
#463639
RGB
rgb(70, 54, 57)
HSL
hsl(349, 13%, 24%)
HSB
hsb(349, 23%, 27%)
CMYK
cmyk(0%, 23%, 19%, 73%)
Oklch
oklch(35.2% 0.023 5.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#AD8063

Tangerine · Gray · Warm Sun

HEX
#AD8063
RGB
rgb(173, 128, 99)
HSL
hsl(24, 31%, 53%)
HSB
hsb(24, 43%, 68%)
CMYK
cmyk(0%, 26%, 43%, 32%)
Oklch
oklch(63.7% 0.070 53.9)

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

#CFBC81

Ginger · Tan · Sunflower

HEX
#CFBC81
RGB
rgb(207, 188, 129)
HSL
hsl(45, 45%, 66%)
HSB
hsb(45, 38%, 81%)
CMYK
cmyk(0%, 9%, 38%, 19%)
Oklch
oklch(79.7% 0.080 92.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FBDDA1

Goose Yellow · Wheat · Lemon Cream

HEX
#FBDDA1
RGB
rgb(251, 221, 161)
HSL
hsl(40, 92%, 81%)
HSB
hsb(40, 36%, 98%)
CMYK
cmyk(0%, 12%, 36%, 2%)
Oklch
oklch(90.9% 0.083 84.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A6E77
6F8B82

Analogous

8B6F86
8A6E77
8B746F

Triadic

8A6E77
788B6F
6F788B

Split-Comp.

8A6E77
6F8B74
6F868B

Tetradic

8A6E77
868B6F
6F8B82
746F8B

Contrast Matrix WCAG 2.1 Contrast

8A6E77
463639
AD8063
CFBC81
FBDDA1
—
2.5
Fail
1.3
Fail
2.4
Fail
3.5
AA Large
2.5
Fail
—
3.3
AA Large
6.0
AA
8.6
AAA
1.3
Fail
3.3
AA Large
—
1.8
Fail
2.6
Fail
2.4
Fail
6.0
AA
1.8
Fail
—
1.4
Fail
3.5
AA Large
8.6
AAA
2.6
Fail
1.4
Fail
—
White BG
4.6AA
11.4AAA
3.5AA Large
1.9Fail
1.3Fail
Black BG
4.6AA
1.8Fail
6.0AA
11.2AAA
16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E75
3F3F38
9A996A
C7C78F
EEEEB0

Deuteranopia

808274
404138
9CA06C
C8C993
F0F2B3

Tritanopia

897373
453838
AB7071
CE9B9D
FABBBE

Achromatopsia

777777
3B3B3B
8A8A8A
BBBBBB
DFDFDF

Shades & Tints Shades & Tints

#8A6E77

Dark
Light

#463639

Dark
Light

#AD8063

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a6e77;
  --color-2: #463639;
  --color-3: #ad8063;
  --color-4: #cfbc81;
  --color-5: #fbdda1;
}

SCSS

$color-1: #8a6e77;
$color-2: #463639;
$color-3: #ad8063;
$color-4: #cfbc81;
$color-5: #fbdda1;

TAILWIND

colors: {
  'brand-1': '#8a6e77',
  'brand-2': '#463639',
  'brand-3': '#ad8063',
  'brand-4': '#cfbc81',
  'brand-5': '#fbdda1',
}

RGB Array

[138, 110, 119], [70, 54, 57], [173, 128, 99], [207, 188, 129], [251, 221, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8A6E77, #463639, #AD8063, #CFBC81, #FBDDA1 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8a6e77; --color-2: #463639; --color-3: #ad8063; --color-4: #cfbc81; --color-5: #fbdda1. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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