← Back to Editor

#AB6C5A · #984B42 · #842A2A · #492A2A · #2A2A2A

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

#AB6C5A

Crimson · Sienna · Passion Red

HEX
#AB6C5A
RGB
rgb(171, 108, 90)
HSL
hsl(13, 33%, 51%)
HSB
hsb(13, 47%, 67%)
CMYK
cmyk(0%, 37%, 47%, 33%)
Oklch
oklch(59.5% 0.086 36.7)

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

#984B42

Crimson · Sienna · Passion Red

HEX
#984B42
RGB
rgb(152, 75, 66)
HSL
hsl(6, 39%, 43%)
HSB
hsb(6, 57%, 60%)
CMYK
cmyk(0%, 51%, 57%, 40%)
Oklch
oklch(50.7% 0.105 28.2)

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

#842A2A

Crimson · Brown · Wine Red

HEX
#842A2A
RGB
rgb(132, 42, 42)
HSL
hsl(0, 52%, 34%)
HSB
hsb(0, 68%, 52%)
CMYK
cmyk(0%, 68%, 68%, 48%)
Oklch
oklch(42.2% 0.124 24.1)

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

#492A2A

Crimson · DarkSlateGray · Wine Red

HEX
#492A2A
RGB
rgb(73, 42, 42)
HSL
hsl(0, 27%, 23%)
HSB
hsb(0, 42%, 29%)
CMYK
cmyk(0%, 42%, 42%, 71%)
Oklch
oklch(32.4% 0.046 19.9)

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

#2A2A2A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2A2A2A
RGB
rgb(42, 42, 42)
HSL
hsl(0, 0%, 16%)
HSB
hsb(0, 0%, 16%)
CMYK
cmyk(0%, 0%, 0%, 84%)
Oklch
oklch(28.5% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB6C5A
5999AB

Analogous

AB5970
AB6C5A
AB9459

Triadic

AB6C5A
59AB6B
6B59AB

Split-Comp.

AB6C5A
59AB94
5970AB

Tetradic

AB6C5A
70AB59
5999AB
9459AB

Contrast Matrix WCAG 2.1 Contrast

AB6C5A
984B42
842A2A
492A2A
2A2A2A
—
1.5
Fail
2.1
Fail
3.0
AA Large
3.4
AA Large
1.5
Fail
—
1.5
Fail
2.1
Fail
2.3
Fail
2.1
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
3.0
AA Large
2.1
Fail
1.4
Fail
—
1.1
Fail
3.4
AA Large
2.3
Fail
1.6
Fail
1.1
Fail
—
White BG
4.2AA Large
6.1AA
9.0AAA
12.7AAA
14.4AAA
Black BG
5.0AA
3.4AA Large
2.3Fail
1.6Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

908F5E
777644
5D5C2A
3C3B2A
2A2A2A

Deuteranopia

93985F
7B8145
62692A
3D402A
2A2A2A

Tritanopia

A86263
944646
7F2A2A
472A2A
2A2A2A

Achromatopsia

7D7D7D
616161
454545
333333
2A2A2A

Shades & Tints Shades & Tints

#AB6C5A

Dark
Light

#984B42

Dark
Light

#842A2A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab6c5a;
  --color-2: #984b42;
  --color-3: #842a2a;
  --color-4: #492a2a;
  --color-5: #2a2a2a;
}

SCSS

$color-1: #ab6c5a;
$color-2: #984b42;
$color-3: #842a2a;
$color-4: #492a2a;
$color-5: #2a2a2a;

TAILWIND

colors: {
  'brand-1': '#ab6c5a',
  'brand-2': '#984b42',
  'brand-3': '#842a2a',
  'brand-4': '#492a2a',
  'brand-5': '#2a2a2a',
}

RGB Array

[171, 108, 90], [152, 75, 66], [132, 42, 42], [73, 42, 42], [42, 42, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB6C5A, #984B42, #842A2A, #492A2A, #2A2A2A is ideal for: tech websites, dark mode UIs, game UIs. 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: #ab6c5a; --color-2: #984b42; --color-3: #842a2a; --color-4: #492a2a; --color-5: #2a2a2a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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