← Back to Editor

#733D51 · #87664A · #85874A · #8A9E82 · #B0B8AD

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

#733D51

Dark Violet · DimGray · Camellia

HEX
#733D51
RGB
rgb(115, 61, 81)
HSL
hsl(338, 31%, 35%)
HSB
hsb(338, 47%, 45%)
CMYK
cmyk(0%, 47%, 30%, 55%)
Oklch
oklch(43.3% 0.079 357.3)

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

#87664A

Tangerine · Sienna · Amber Brown

HEX
#87664A
RGB
rgb(135, 102, 74)
HSL
hsl(28, 29%, 41%)
HSB
hsb(28, 45%, 53%)
CMYK
cmyk(0%, 24%, 45%, 47%)
Oklch
oklch(53.7% 0.059 61.4)

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

#85874A

Autumn Sage · DimGray · Honey Gold

HEX
#85874A
RGB
rgb(133, 135, 74)
HSL
hsl(62, 29%, 41%)
HSB
hsb(62, 45%, 53%)
CMYK
cmyk(1%, 0%, 45%, 47%)
Oklch
oklch(60.7% 0.083 110.3)

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

#8A9E82

Celadon · Gray · Olive Green

HEX
#8A9E82
RGB
rgb(138, 158, 130)
HSL
hsl(103, 13%, 56%)
HSB
hsb(103, 18%, 62%)
CMYK
cmyk(13%, 0%, 18%, 38%)
Oklch
oklch(67.6% 0.046 136.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B0B8AD

Ash · DarkGray · Silver Sand

HEX
#B0B8AD
RGB
rgb(176, 184, 173)
HSL
hsl(104, 7%, 70%)
HSB
hsb(104, 6%, 72%)
CMYK
cmyk(4%, 0%, 6%, 28%)
Oklch
oklch(77.3% 0.018 137.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

733D51
3E7561

Analogous

753E6E
733D51
75453E

Triadic

733D51
52753E
3E5275

Split-Comp.

733D51
3E7545
3E6E75

Tetradic

733D51
6E753E
3E7561
453E75

Contrast Matrix WCAG 2.1 Contrast

733D51
87664A
85874A
8A9E82
B0B8AD
—
1.6
Fail
2.2
Fail
2.9
Fail
4.1
AA Large
1.6
Fail
—
1.4
Fail
1.8
Fail
2.6
Fail
2.2
Fail
1.4
Fail
—
1.3
Fail
1.9
Fail
2.9
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
4.1
AA Large
2.6
Fail
1.9
Fail
1.4
Fail
—
White BG
8.3AAA
5.2AA
3.8AA Large
2.9Fail
2.0Fail
Black BG
2.5Fail
4.0AA Large
5.6AA
7.3AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5B4C
797851
868659
939389
B3B4B0

Deuteranopia

5F634B
7B7D52
86865C
92908A
B3B2B0

Tritanopia

704848
855657
856467
8B8E8F
B0B2B2

Achromatopsia

4F4F4F
6D6D6D
7F7F7F
959595
B4B4B4

Shades & Tints Shades & Tints

#733D51

Dark
Light

#87664A

Dark
Light

#85874A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #733d51;
  --color-2: #87664a;
  --color-3: #85874a;
  --color-4: #8a9e82;
  --color-5: #b0b8ad;
}

SCSS

$color-1: #733d51;
$color-2: #87664a;
$color-3: #85874a;
$color-4: #8a9e82;
$color-5: #b0b8ad;

TAILWIND

colors: {
  'brand-1': '#733d51',
  'brand-2': '#87664a',
  'brand-3': '#85874a',
  'brand-4': '#8a9e82',
  'brand-5': '#b0b8ad',
}

RGB Array

[115, 61, 81], [135, 102, 74], [133, 135, 74], [138, 158, 130], [176, 184, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #733D51, #87664A, #85874A, #8A9E82, #B0B8AD is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #733d51; --color-2: #87664a; --color-3: #85874a; --color-4: #8a9e82; --color-5: #b0b8ad. 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. Restrained colors convey professionalism and trust. 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