← Back to Editor

#3A2427 · #B76849 · #BAA36D · #A0CBAF · #E5E9E8

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

#3A2427

Crimson · DarkSlateGray · Deep Berry

HEX
#3A2427
RGB
rgb(58, 36, 39)
HSL
hsl(352, 23%, 18%)
HSB
hsb(352, 38%, 23%)
CMYK
cmyk(0%, 38%, 33%, 77%)
Oklch
oklch(28.9% 0.034 10.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#B76849

Tangerine · Sienna · Amber Brown

HEX
#B76849
RGB
rgb(183, 104, 73)
HSL
hsl(17, 43%, 50%)
HSB
hsb(17, 60%, 72%)
CMYK
cmyk(0%, 43%, 60%, 28%)
Oklch
oklch(60.0% 0.111 41.8)

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

#BAA36D

Ginger · Tan · Sunflower

HEX
#BAA36D
RGB
rgb(186, 163, 109)
HSL
hsl(42, 36%, 58%)
HSB
hsb(42, 41%, 73%)
CMYK
cmyk(0%, 12%, 41%, 27%)
Oklch
oklch(72.3% 0.077 87.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A0CBAF

Celadon · DarkGray · Apple Green

HEX
#A0CBAF
RGB
rgb(160, 203, 175)
HSL
hsl(141, 29%, 71%)
HSB
hsb(141, 21%, 80%)
CMYK
cmyk(21%, 0%, 14%, 20%)
Oklch
oklch(80.3% 0.060 156.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#E5E9E8

Jade · Lavender · Cloud White

HEX
#E5E9E8
RGB
rgb(229, 233, 232)
HSL
hsl(165, 8%, 91%)
HSB
hsb(165, 2%, 91%)
CMYK
cmyk(2%, 0%, 0%, 9%)
Oklch
oklch(93.1% 0.004 179.7)

Traditional「Jade」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A2427
233836

Analogous

382331
3A2427
382B23

Triadic

3A2427
263823
232638

Split-Comp.

3A2427
23382B
233138

Tetradic

3A2427
313823
233836
2B2338

Contrast Matrix WCAG 2.1 Contrast

3A2427
B76849
BAA36D
A0CBAF
E5E9E8
—
3.5
AA Large
5.8
AA
8.0
AAA
11.7
AAA
3.5
AA Large
—
1.7
Fail
2.3
Fail
3.4
AA Large
5.8
AA
1.7
Fail
—
1.4
Fail
2.0
Fail
8.0
AAA
2.3
Fail
1.4
Fail
—
1.5
Fail
11.7
AAA
3.4
AA Large
2.0
Fail
1.5
Fail
—
White BG
14.4AAA
4.1AA Large
2.5Fail
1.8Fail
1.2Fail
Black BG
1.5Fail
5.1AA
8.5AAA
11.7AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303026
959451
B0B07A
B3B3B6
E7E7E8

Deuteranopia

323326
999F52
B1B37D
B0ADB7
E7E6E8

Tritanopia

392626
B35658
B98487
A2BBBC
E5E8E8

Achromatopsia

2B2B2B
7C7C7C
A4A4A4
BBBBBB
E8E8E8

Shades & Tints Shades & Tints

#3A2427

Dark
Light

#B76849

Dark
Light

#BAA36D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a2427;
  --color-2: #b76849;
  --color-3: #baa36d;
  --color-4: #a0cbaf;
  --color-5: #e5e9e8;
}

SCSS

$color-1: #3a2427;
$color-2: #b76849;
$color-3: #baa36d;
$color-4: #a0cbaf;
$color-5: #e5e9e8;

TAILWIND

colors: {
  'brand-1': '#3a2427',
  'brand-2': '#b76849',
  'brand-3': '#baa36d',
  'brand-4': '#a0cbaf',
  'brand-5': '#e5e9e8',
}

RGB Array

[58, 36, 39], [183, 104, 73], [186, 163, 109], [160, 203, 175], [229, 233, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A2427, #B76849, #BAA36D, #A0CBAF, #E5E9E8 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #3a2427; --color-2: #b76849; --color-3: #baa36d; --color-4: #a0cbaf; --color-5: #e5e9e8. 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. 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