← Back to Editor

#5A4240 · #877372 · #A4BA67 · #407B65 · #3D634E

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 Library

Color Details Color Details

#5A4240

Crimson · DarkOliveGreen · Wine Red

HEX
#5A4240
RGB
rgb(90, 66, 64)
HSL
hsl(5, 17%, 30%)
HSB
hsb(5, 29%, 35%)
CMYK
cmyk(0%, 27%, 29%, 65%)
Oklch
oklch(40.5% 0.034 24.1)

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

#877372

Crimson · Gray · Warm Gray

HEX
#877372
RGB
rgb(135, 115, 114)
HSL
hsl(3, 8%, 49%)
HSB
hsb(3, 16%, 53%)
CMYK
cmyk(0%, 15%, 16%, 47%)
Oklch
oklch(57.4% 0.025 21.3)

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

#A4BA67

Grass Green · DarkSeaGreen · Olive Green

HEX
#A4BA67
RGB
rgb(164, 186, 103)
HSL
hsl(76, 38%, 57%)
HSB
hsb(76, 45%, 73%)
CMYK
cmyk(12%, 0%, 45%, 27%)
Oklch
oklch(75.3% 0.111 121.3)

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

#407B65

Mineral Blue · SeaGreen · Forest Green

HEX
#407B65
RGB
rgb(64, 123, 101)
HSL
hsl(158, 32%, 37%)
HSB
hsb(158, 48%, 48%)
CMYK
cmyk(48%, 0%, 18%, 52%)
Oklch
oklch(53.6% 0.072 167.3)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#3D634E

Celadon · DarkSlateGray · Forest Green

HEX
#3D634E
RGB
rgb(61, 99, 78)
HSL
hsl(147, 24%, 31%)
HSB
hsb(147, 38%, 39%)
CMYK
cmyk(38%, 0%, 21%, 61%)
Oklch
oklch(46.5% 0.056 159.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A4240
3F575A

Analogous

5A3F4A
5A4240
5A4F3F

Triadic

5A4240
3F5A42
423F5A

Split-Comp.

5A4240
3F5A4F
3F4A5A

Tetradic

5A4240
4A5A3F
3F575A
4F3F5A

Contrast Matrix WCAG 2.1 Contrast

5A4240
877372
A4BA67
407B65
3D634E
—
2.1
Fail
4.3
AA Large
1.9
Fail
1.4
Fail
2.1
Fail
—
2.1
Fail
1.1
Fail
1.5
Fail
4.3
AA Large
2.1
Fail
—
2.3
Fail
3.2
AA Large
1.9
Fail
1.1
Fail
2.3
Fail
—
1.4
Fail
1.4
Fail
1.5
Fail
3.2
AA Large
1.4
Fail
—
White BG
9.2AAA
4.4AA Large
2.1Fail
5.0AA
6.8AA
Black BG
2.3Fail
4.7AA
9.8AAA
4.2AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

504F40
7E7E72
AEAE7B
5A5A6A
4D4E53

Deuteranopia

515341
808172
ACAB80
56526C
4B4854

Tritanopia

594141
867272
A58B8E
436F6F
3F5758

Achromatopsia

494949
797979
AAAAAA
676767
555555

Shades & Tints Shades & Tints

#5A4240

Dark
Light

#877372

Dark
Light

#A4BA67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a4240;
  --color-2: #877372;
  --color-3: #a4ba67;
  --color-4: #407b65;
  --color-5: #3d634e;
}

SCSS

$color-1: #5a4240;
$color-2: #877372;
$color-3: #a4ba67;
$color-4: #407b65;
$color-5: #3d634e;

TAILWIND

colors: {
  'brand-1': '#5a4240',
  'brand-2': '#877372',
  'brand-3': '#a4ba67',
  'brand-4': '#407b65',
  'brand-5': '#3d634e',
}

RGB Array

[90, 66, 64], [135, 115, 114], [164, 186, 103], [64, 123, 101], [61, 99, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A4240, #877372, #A4BA67, #407B65, #3D634E 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: #5a4240; --color-2: #877372; --color-3: #a4ba67; --color-4: #407b65; --color-5: #3d634e. 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