← Back to Editor

#A84C33 · #422E29 · #315965 · #67A093 · #E0AA51

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

#A84C33

Crimson · Sienna · Passion Red

HEX
#A84C33
RGB
rgb(168, 76, 51)
HSL
hsl(13, 53%, 43%)
HSB
hsb(13, 70%, 66%)
CMYK
cmyk(0%, 55%, 70%, 34%)
Oklch
oklch(53.0% 0.128 36.2)

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

#422E29

Crimson · DarkSlateGray · Wine Red

HEX
#422E29
RGB
rgb(66, 46, 41)
HSL
hsl(12, 23%, 21%)
HSB
hsb(12, 38%, 26%)
CMYK
cmyk(0%, 30%, 38%, 74%)
Oklch
oklch(32.3% 0.031 34.5)

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

#315965

Slate Blue · DarkSlateGray · Mint Ice

HEX
#315965
RGB
rgb(49, 89, 101)
HSL
hsl(194, 35%, 29%)
HSB
hsb(194, 51%, 40%)
CMYK
cmyk(51%, 12%, 0%, 60%)
Oklch
oklch(44.0% 0.049 219.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#67A093

Mineral Blue · CadetBlue · Lake Green

HEX
#67A093
RGB
rgb(103, 160, 147)
HSL
hsl(166, 23%, 52%)
HSB
hsb(166, 36%, 63%)
CMYK
cmyk(36%, 0%, 8%, 37%)
Oklch
oklch(66.2% 0.063 178.2)

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

#E0AA51

Ginger · SandyBrown · Warm Sun

HEX
#E0AA51
RGB
rgb(224, 170, 81)
HSL
hsl(37, 70%, 60%)
HSB
hsb(37, 64%, 88%)
CMYK
cmyk(0%, 24%, 64%, 12%)
Oklch
oklch(77.1% 0.123 77.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A84C33
348FA8

Analogous

A83454
A84C33
A88734

Triadic

A84C33
34A84D
4D34A8

Split-Comp.

A84C33
34A887
3454A8

Tetradic

A84C33
54A834
348FA8
8734A8

Contrast Matrix WCAG 2.1 Contrast

A84C33
422E29
315965
67A093
E0AA51
—
2.3
Fail
1.4
Fail
1.9
Fail
2.7
Fail
2.3
Fail
—
1.7
Fail
4.2
AA Large
6.1
AA
1.4
Fail
1.7
Fail
—
2.6
Fail
3.7
AA Large
1.9
Fail
4.2
AA Large
2.6
Fail
—
1.4
Fail
2.7
Fail
6.1
AA
3.7
AA Large
1.4
Fail
—
White BG
5.6AA
12.7AAA
7.6AAA
3.0Fail
2.1Fail
Black BG
3.7AA Large
1.7Fail
2.7Fail
7.0AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

807F39
39392A
424362
808096
C9C867

Deuteranopia

868C3B
3B3C2B
403D61
7C7897
CCD06C

Tritanopia

A33E3F
412B2B
33605F
6A9999
DD787B

Achromatopsia

656565
333333
4E4E4E
8D8D8D
B0B0B0

Shades & Tints Shades & Tints

#A84C33

Dark
Light

#422E29

Dark
Light

#315965

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a84c33;
  --color-2: #422e29;
  --color-3: #315965;
  --color-4: #67a093;
  --color-5: #e0aa51;
}

SCSS

$color-1: #a84c33;
$color-2: #422e29;
$color-3: #315965;
$color-4: #67a093;
$color-5: #e0aa51;

TAILWIND

colors: {
  'brand-1': '#a84c33',
  'brand-2': '#422e29',
  'brand-3': '#315965',
  'brand-4': '#67a093',
  'brand-5': '#e0aa51',
}

RGB Array

[168, 76, 51], [66, 46, 41], [49, 89, 101], [103, 160, 147], [224, 170, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A84C33, #422E29, #315965, #67A093, #E0AA51 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: #a84c33; --color-2: #422e29; --color-3: #315965; --color-4: #67a093; --color-5: #e0aa51. 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