← Back to Editor

#3B2F30 · #E33109 · #A86A38 · #7F8255 · #A69A66

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

#3B2F30

Crimson · DarkSlateGray · Wine Red

HEX
#3B2F30
RGB
rgb(59, 47, 48)
HSL
hsl(355, 11%, 21%)
HSB
hsb(355, 20%, 23%)
CMYK
cmyk(0%, 20%, 19%, 77%)
Oklch
oklch(31.9% 0.018 12.5)

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

#E33109

Vermilion · OrangeRed · Passion Red

HEX
#E33109
RGB
rgb(227, 49, 9)
HSL
hsl(11, 92%, 46%)
HSB
hsb(11, 96%, 89%)
CMYK
cmyk(0%, 78%, 96%, 11%)
Oklch
oklch(59.6% 0.217 32.7)

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

#A86A38

Tangerine · Sienna · Amber Brown

HEX
#A86A38
RGB
rgb(168, 106, 56)
HSL
hsl(27, 50%, 44%)
HSB
hsb(27, 67%, 66%)
CMYK
cmyk(0%, 37%, 67%, 34%)
Oklch
oklch(58.2% 0.103 57.6)

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

#7F8255

Autumn Sage · DimGray · Honey Gold

HEX
#7F8255
RGB
rgb(127, 130, 85)
HSL
hsl(64, 21%, 42%)
HSB
hsb(64, 35%, 51%)
CMYK
cmyk(2%, 0%, 35%, 49%)
Oklch
oklch(59.3% 0.064 111.4)

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

#A69A66

Ginger · Gray · Sunflower

HEX
#A69A66
RGB
rgb(166, 154, 102)
HSL
hsl(49, 26%, 53%)
HSB
hsb(49, 39%, 65%)
CMYK
cmyk(0%, 7%, 39%, 35%)
Oklch
oklch(68.4% 0.072 96.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2F30
303B3A

Analogous

3B3037
3B2F30
3B3530

Triadic

3B2F30
313B30
30313B

Split-Comp.

3B2F30
303B35
30373B

Tetradic

3B2F30
373B30
303B3A
35303B

Contrast Matrix WCAG 2.1 Contrast

3B2F30
E33109
A86A38
7F8255
A69A66
—
2.9
Fail
2.9
Fail
3.2
AA Large
4.5
AA
2.9
Fail
—
1.0
Fail
1.1
Fail
1.6
Fail
2.9
Fail
1.0
Fail
—
1.1
Fail
1.6
Fail
3.2
AA Large
1.1
Fail
1.1
Fail
—
1.4
Fail
4.5
AA
1.6
Fail
1.6
Fail
1.4
Fail
—
White BG
12.8AAA
4.5AA Large
4.4AA Large
4.0AA Large
2.8Fail
Black BG
1.6Fail
4.7AA
4.8AA
5.2AA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363630
969413
8D8D44
808060
A1A173

Deuteranopia

373730
A0AE15
919547
808063
A2A276

Tritanopia

3A3030
DA1A1C
A54E50
7F686A
A57D7F

Achromatopsia

333333
626262
777777
7C7C7C
989898

Shades & Tints Shades & Tints

#3B2F30

Dark
Light

#E33109

Dark
Light

#A86A38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2f30;
  --color-2: #e33109;
  --color-3: #a86a38;
  --color-4: #7f8255;
  --color-5: #a69a66;
}

SCSS

$color-1: #3b2f30;
$color-2: #e33109;
$color-3: #a86a38;
$color-4: #7f8255;
$color-5: #a69a66;

TAILWIND

colors: {
  'brand-1': '#3b2f30',
  'brand-2': '#e33109',
  'brand-3': '#a86a38',
  'brand-4': '#7f8255',
  'brand-5': '#a69a66',
}

RGB Array

[59, 47, 48], [227, 49, 9], [168, 106, 56], [127, 130, 85], [166, 154, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2F30, #E33109, #A86A38, #7F8255, #A69A66 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: #3b2f30; --color-2: #e33109; --color-3: #a86a38; --color-4: #7f8255; --color-5: #a69a66. 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