← Back to Editor

#685449 · #807E4B · #C58A00 · #D1987B · #D56687

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

#685449

Tangerine · DimGray · Amber Brown

HEX
#685449
RGB
rgb(104, 84, 73)
HSL
hsl(21, 18%, 35%)
HSB
hsb(21, 30%, 41%)
CMYK
cmyk(0%, 19%, 30%, 59%)
Oklch
oklch(46.3% 0.032 50.4)

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

#807E4B

Autumn Sage · DimGray · Honey Gold

HEX
#807E4B
RGB
rgb(128, 126, 75)
HSL
hsl(58, 26%, 40%)
HSB
hsb(58, 41%, 50%)
CMYK
cmyk(0%, 2%, 41%, 50%)
Oklch
oklch(58.2% 0.071 106.5)

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

#C58A00

Ochre · DarkGoldenRod · Honey Gold

HEX
#C58A00
RGB
rgb(197, 138, 0)
HSL
hsl(42, 100%, 39%)
HSB
hsb(42, 100%, 77%)
CMYK
cmyk(0%, 30%, 100%, 23%)
Oklch
oklch(67.5% 0.140 78.4)

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

#D1987B

Apricot · DarkSalmon · Warm Sun

HEX
#D1987B
RGB
rgb(209, 152, 123)
HSL
hsl(20, 48%, 65%)
HSB
hsb(20, 41%, 82%)
CMYK
cmyk(0%, 27%, 41%, 18%)
Oklch
oklch(72.7% 0.080 48.0)

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

#D56687

Rouge · LightCoral · Rose Pink

HEX
#D56687
RGB
rgb(213, 102, 135)
HSL
hsl(342, 57%, 62%)
HSB
hsb(342, 52%, 84%)
CMYK
cmyk(0%, 52%, 37%, 16%)
Oklch
oklch(65.2% 0.143 3.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

685449
495E69

Analogous

69494E
685449
696449

Triadic

685449
496954
544969

Split-Comp.

685449
496964
494E69

Tetradic

685449
4E6949
495E69
644969

Contrast Matrix WCAG 2.1 Contrast

685449
807E4B
C58A00
D1987B
D56687
—
1.7
Fail
2.4
Fail
2.9
Fail
2.1
Fail
1.7
Fail
—
1.4
Fail
1.7
Fail
1.2
Fail
2.4
Fail
1.4
Fail
—
1.2
Fail
1.2
Fail
2.9
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
1.2
Fail
1.2
Fail
1.4
Fail
—
White BG
7.1AAA
4.2AA Large
3.0Fail
2.5Fail
3.5AA Large
Black BG
3.0Fail
5.0AA
7.0AAA
8.5AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F4C
7F7F57
ABAB21
B8B882
A5A47F

Deuteranopia

61624C
7F7F5A
AFB329
BCC084
ABB47D

Tritanopia

674E4E
806163
C23C42
CE8889
CF7977

Achromatopsia

595959
797979
8C8C8C
A6A6A6
8B8B8B

Shades & Tints Shades & Tints

#685449

Dark
Light

#807E4B

Dark
Light

#C58A00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #685449;
  --color-2: #807e4b;
  --color-3: #c58a00;
  --color-4: #d1987b;
  --color-5: #d56687;
}

SCSS

$color-1: #685449;
$color-2: #807e4b;
$color-3: #c58a00;
$color-4: #d1987b;
$color-5: #d56687;

TAILWIND

colors: {
  'brand-1': '#685449',
  'brand-2': '#807e4b',
  'brand-3': '#c58a00',
  'brand-4': '#d1987b',
  'brand-5': '#d56687',
}

RGB Array

[104, 84, 73], [128, 126, 75], [197, 138, 0], [209, 152, 123], [213, 102, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #685449, #807E4B, #C58A00, #D1987B, #D56687 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: #685449; --color-2: #807e4b; --color-3: #c58a00; --color-4: #d1987b; --color-5: #d56687. 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