← Back to Editor

#5F3C3A · #A3486B · #AE7D21 · #B5B829 · #B9CB37

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

#5F3C3A

Crimson · DarkOliveGreen · Wine Red

HEX
#5F3C3A
RGB
rgb(95, 60, 58)
HSL
hsl(3, 24%, 30%)
HSB
hsb(3, 39%, 37%)
CMYK
cmyk(0%, 37%, 39%, 63%)
Oklch
oklch(39.7% 0.050 23.1)

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

#A3486B

Dark Violet · Sienna · Camellia

HEX
#A3486B
RGB
rgb(163, 72, 107)
HSL
hsl(337, 39%, 46%)
HSB
hsb(337, 56%, 64%)
CMYK
cmyk(0%, 56%, 34%, 36%)
Oklch
oklch(52.9% 0.126 358.1)

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

#AE7D21

Ochre · DarkGoldenRod · Amber Brown

HEX
#AE7D21
RGB
rgb(174, 125, 33)
HSL
hsl(39, 68%, 41%)
HSB
hsb(39, 81%, 68%)
CMYK
cmyk(0%, 28%, 81%, 32%)
Oklch
oklch(62.4% 0.119 78.1)

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

#B5B829

Autumn Sage · GoldenRod · Honey Gold

HEX
#B5B829
RGB
rgb(181, 184, 41)
HSL
hsl(61, 64%, 44%)
HSB
hsb(61, 78%, 72%)
CMYK
cmyk(2%, 0%, 78%, 28%)
Oklch
oklch(75.6% 0.154 110.8)

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

#B9CB37

Autumn Sage · GreenYellow · Sunflower

HEX
#B9CB37
RGB
rgb(185, 203, 55)
HSL
hsl(67, 59%, 51%)
HSB
hsb(67, 73%, 80%)
CMYK
cmyk(9%, 0%, 73%, 20%)
Oklch
oklch(80.2% 0.166 116.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F3C3A
3A5D5F

Analogous

5F3A4B
5F3C3A
5F4E3A

Triadic

5F3C3A
3A5F3C
3C3A5F

Split-Comp.

5F3C3A
3A5F4E
3A4B5F

Tetradic

5F3C3A
4B5F3A
3A5D5F
4E3A5F

Contrast Matrix WCAG 2.1 Contrast

5F3C3A
A3486B
AE7D21
B5B829
B9CB37
—
1.7
Fail
2.6
Fail
4.5
AA Large
5.3
AA
1.7
Fail
—
1.6
Fail
2.7
Fail
3.2
AA Large
2.6
Fail
1.6
Fail
—
1.7
Fail
2.0
Fail
4.5
AA Large
2.7
Fail
1.7
Fail
—
1.2
Fail
5.3
AA
3.2
AA Large
2.0
Fail
1.2
Fail
—
White BG
9.6AAA
5.7AA
3.6AA Large
2.1Fail
1.8Fail
Black BG
2.2Fail
3.7AA Large
5.8AA
9.9AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

50503A
7C7B63
999837
B6B64C
C1C15B

Deuteranopia

52553B
818860
9C9F3D
B6B654
C0BE63

Tritanopia

5D3B3B
9E5C5A
AC494D
B5676D
BA777D

Achromatopsia

464646
676767
818181
A7A7A7
B5B5B5

Shades & Tints Shades & Tints

#5F3C3A

Dark
Light

#A3486B

Dark
Light

#AE7D21

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f3c3a;
  --color-2: #a3486b;
  --color-3: #ae7d21;
  --color-4: #b5b829;
  --color-5: #b9cb37;
}

SCSS

$color-1: #5f3c3a;
$color-2: #a3486b;
$color-3: #ae7d21;
$color-4: #b5b829;
$color-5: #b9cb37;

TAILWIND

colors: {
  'brand-1': '#5f3c3a',
  'brand-2': '#a3486b',
  'brand-3': '#ae7d21',
  'brand-4': '#b5b829',
  'brand-5': '#b9cb37',
}

RGB Array

[95, 60, 58], [163, 72, 107], [174, 125, 33], [181, 184, 41], [185, 203, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F3C3A, #A3486B, #AE7D21, #B5B829, #B9CB37 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: #5f3c3a; --color-2: #a3486b; --color-3: #ae7d21; --color-4: #b5b829; --color-5: #b9cb37. 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