← Back to Editor

#664A34 · #86671C · #9A8813 · #C9946F · #DAD9E1

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#664A34

Tangerine · DarkOliveGreen · Amber Brown

HEX
#664A34
RGB
rgb(102, 74, 52)
HSL
hsl(26, 32%, 30%)
HSB
hsb(26, 49%, 40%)
CMYK
cmyk(0%, 27%, 49%, 60%)
Oklch
oklch(43.4% 0.051 59.1)

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

#86671C

Ochre · Sienna · Honey Gold

HEX
#86671C
RGB
rgb(134, 103, 28)
HSL
hsl(42, 65%, 32%)
HSB
hsb(42, 79%, 53%)
CMYK
cmyk(0%, 23%, 79%, 47%)
Oklch
oklch(53.1% 0.097 84.9)

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

#9A8813

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9A8813
RGB
rgb(154, 136, 19)
HSL
hsl(52, 78%, 34%)
HSB
hsb(52, 88%, 60%)
CMYK
cmyk(0%, 12%, 88%, 40%)
Oklch
oklch(62.4% 0.125 99.4)

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

#C9946F

Apricot · DarkSalmon · Warm Sun

HEX
#C9946F
RGB
rgb(201, 148, 111)
HSL
hsl(25, 45%, 61%)
HSB
hsb(25, 45%, 79%)
CMYK
cmyk(0%, 26%, 45%, 21%)
Oklch
oklch(70.9% 0.082 55.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DAD9E1

Wisteria · LightGray · Sky Blue

HEX
#DAD9E1
RGB
rgb(218, 217, 225)
HSL
hsl(248, 12%, 87%)
HSB
hsb(248, 4%, 88%)
CMYK
cmyk(3%, 4%, 0%, 12%)
Oklch
oklch(88.8% 0.011 291.9)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664A34
345065

Analogous

653437
664A34
656234

Triadic

664A34
346549
493465

Split-Comp.

664A34
346562
343765

Tetradic

664A34
376534
345065
623465

Contrast Matrix WCAG 2.1 Contrast

664A34
86671C
9A8813
C9946F
DAD9E1
—
1.5
Fail
2.3
Fail
3.1
AA Large
5.8
AA
1.5
Fail
—
1.5
Fail
2.0
Fail
3.8
AA Large
2.3
Fail
1.5
Fail
—
1.3
Fail
2.5
Fail
3.1
AA Large
2.0
Fail
1.3
Fail
—
1.9
Fail
5.8
AA
3.8
AA Large
2.5
Fail
1.9
Fail
—
White BG
8.1AAA
5.3AA
3.6AA Large
2.6Fail
1.4Fail
Black BG
2.6Fail
4.0AA Large
5.9AA
7.9AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A39
79782E
92922F
B2B278
DADADF

Deuteranopia

5C5E3B
7A7D33
939536
B5B97A
DADADF

Tritanopia

653E3E
843C40
99464B
C67F81
DADEDD

Achromatopsia

505050
686868
808080
A0A0A0
DADADA

Shades & Tints Shades & Tints

#664A34

Dark
Light

#86671C

Dark
Light

#9A8813

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664a34;
  --color-2: #86671c;
  --color-3: #9a8813;
  --color-4: #c9946f;
  --color-5: #dad9e1;
}

SCSS

$color-1: #664a34;
$color-2: #86671c;
$color-3: #9a8813;
$color-4: #c9946f;
$color-5: #dad9e1;

TAILWIND

colors: {
  'brand-1': '#664a34',
  'brand-2': '#86671c',
  'brand-3': '#9a8813',
  'brand-4': '#c9946f',
  'brand-5': '#dad9e1',
}

RGB Array

[102, 74, 52], [134, 103, 28], [154, 136, 19], [201, 148, 111], [218, 217, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #664A34, #86671C, #9A8813, #C9946F, #DAD9E1 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: #664a34; --color-2: #86671c; --color-3: #9a8813; --color-4: #c9946f; --color-5: #dad9e1. 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