← Back to Editor

#2B313D · #82463E · #AE5A42 · #BC7945 · #BCA146

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

#2B313D

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#2B313D
RGB
rgb(43, 49, 61)
HSL
hsl(220, 17%, 20%)
HSB
hsb(220, 30%, 24%)
CMYK
cmyk(30%, 20%, 0%, 76%)
Oklch
oklch(31.3% 0.023 264.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#82463E

Crimson · Sienna · Wine Red

HEX
#82463E
RGB
rgb(130, 70, 62)
HSL
hsl(7, 35%, 38%)
HSB
hsb(7, 52%, 51%)
CMYK
cmyk(0%, 46%, 52%, 49%)
Oklch
oklch(46.5% 0.084 28.7)

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

#AE5A42

Crimson · Sienna · Passion Red

HEX
#AE5A42
RGB
rgb(174, 90, 66)
HSL
hsl(13, 45%, 47%)
HSB
hsb(13, 62%, 68%)
CMYK
cmyk(0%, 48%, 62%, 32%)
Oklch
oklch(56.3% 0.116 36.8)

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

#BC7945

Tangerine · Chocolate · Amber Brown

HEX
#BC7945
RGB
rgb(188, 121, 69)
HSL
hsl(26, 47%, 50%)
HSB
hsb(26, 63%, 74%)
CMYK
cmyk(0%, 36%, 63%, 26%)
Oklch
oklch(63.6% 0.108 57.0)

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

#BCA146

Ginger · GoldenRod · Sunflower

HEX
#BCA146
RGB
rgb(188, 161, 70)
HSL
hsl(46, 47%, 51%)
HSB
hsb(46, 63%, 74%)
CMYK
cmyk(0%, 14%, 63%, 26%)
Oklch
oklch(71.5% 0.114 92.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B313D
3C362A

Analogous

2A393C
2B313D
2D2A3C

Triadic

2B313D
3C2A30
303C2A

Split-Comp.

2B313D
3C2D2A
393C2A

Tetradic

2B313D
3C2A39
3C362A
2A3C2D

Contrast Matrix WCAG 2.1 Contrast

2B313D
82463E
AE5A42
BC7945
BCA146
—
1.8
Fail
2.7
Fail
3.7
AA Large
5.2
AA
1.8
Fail
—
1.5
Fail
2.1
Fail
2.9
Fail
2.7
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
3.7
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
5.2
AA
2.9
Fail
1.9
Fail
1.4
Fail
—
White BG
13.0AAA
7.3AAA
4.8AA
3.5AA Large
2.5Fail
Black BG
1.6Fail
2.9Fail
4.3AA Large
6.0AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E3A
686740
8A8948
9F9E52
B0B05C

Deuteranopia

2D2D39
6C7040
8F9549
A3A855
B2B461

Tritanopia

2B3837
7F4142
AA4C4D
B95C5E
BB6D71

Achromatopsia

313131
575757
707070
878787
9F9F9F

Shades & Tints Shades & Tints

#2B313D

Dark
Light

#82463E

Dark
Light

#AE5A42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b313d;
  --color-2: #82463e;
  --color-3: #ae5a42;
  --color-4: #bc7945;
  --color-5: #bca146;
}

SCSS

$color-1: #2b313d;
$color-2: #82463e;
$color-3: #ae5a42;
$color-4: #bc7945;
$color-5: #bca146;

TAILWIND

colors: {
  'brand-1': '#2b313d',
  'brand-2': '#82463e',
  'brand-3': '#ae5a42',
  'brand-4': '#bc7945',
  'brand-5': '#bca146',
}

RGB Array

[43, 49, 61], [130, 70, 62], [174, 90, 66], [188, 121, 69], [188, 161, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B313D, #82463E, #AE5A42, #BC7945, #BCA146 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: #2b313d; --color-2: #82463e; --color-3: #ae5a42; --color-4: #bc7945; --color-5: #bca146. 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