← Back to Editor

#A61728 · #823838 · #664A42 · #3E524A · #140F0F

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

#A61728

Vermilion · FireBrick · Wine Red

HEX
#A61728
RGB
rgb(166, 23, 40)
HSL
hsl(353, 76%, 37%)
HSB
hsb(353, 86%, 65%)
CMYK
cmyk(0%, 86%, 76%, 35%)
Oklch
oklch(46.8% 0.175 22.4)

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

#823838

Crimson · Brown · Wine Red

HEX
#823838
RGB
rgb(130, 56, 56)
HSL
hsl(0, 40%, 36%)
HSB
hsb(0, 57%, 51%)
CMYK
cmyk(0%, 57%, 57%, 49%)
Oklch
oklch(44.1% 0.103 22.2)

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

#664A42

Crimson · DarkOliveGreen · Wine Red

HEX
#664A42
RGB
rgb(102, 74, 66)
HSL
hsl(13, 21%, 33%)
HSB
hsb(13, 35%, 40%)
CMYK
cmyk(0%, 27%, 35%, 60%)
Oklch
oklch(43.7% 0.041 36.6)

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

#3E524A

Mineral Blue · DarkSlateGray · Forest Green

HEX
#3E524A
RGB
rgb(62, 82, 74)
HSL
hsl(156, 14%, 28%)
HSB
hsb(156, 24%, 32%)
CMYK
cmyk(24%, 0%, 10%, 68%)
Oklch
oklch(41.9% 0.028 168.5)

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

#140F0F

Crimson · Black · Deep Berry

HEX
#140F0F
RGB
rgb(20, 15, 15)
HSL
hsl(0, 14%, 7%)
HSB
hsb(0, 25%, 8%)
CMYK
cmyk(0%, 25%, 25%, 92%)
Oklch
oklch(17.5% 0.008 18.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A61728
17A695

Analogous

A6176F
A61728
A64E17

Triadic

A61728
27A617
1727A6

Split-Comp.

A61728
17A64E
176FA6

Tetradic

A61728
6FA617
17A695
4E17A6

Contrast Matrix WCAG 2.1 Contrast

A61728
823838
664A42
3E524A
140F0F
—
1.1
Fail
1.1
Fail
1.1
Fail
2.5
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
2.3
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
2.4
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
2.3
Fail
2.5
Fail
2.3
Fail
2.4
Fail
2.3
Fail
—
White BG
7.6AAA
8.2AAA
8.0AAA
8.4AAA
19.0AAA
Black BG
2.8Fail
2.6Fail
2.6Fail
2.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686724
626138
5A5A44
47474C
12120F

Deuteranopia

707B23
666C38
5C5E44
46444C
12130F

Tritanopia

9F2120
7E3838
654546
3F4D4E
140F0F

Achromatopsia

444444
4E4E4E
515151
4B4B4B
101010

Shades & Tints Shades & Tints

#A61728

Dark
Light

#823838

Dark
Light

#664A42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a61728;
  --color-2: #823838;
  --color-3: #664a42;
  --color-4: #3e524a;
  --color-5: #140f0f;
}

SCSS

$color-1: #a61728;
$color-2: #823838;
$color-3: #664a42;
$color-4: #3e524a;
$color-5: #140f0f;

TAILWIND

colors: {
  'brand-1': '#a61728',
  'brand-2': '#823838',
  'brand-3': '#664a42',
  'brand-4': '#3e524a',
  'brand-5': '#140f0f',
}

RGB Array

[166, 23, 40], [130, 56, 56], [102, 74, 66], [62, 82, 74], [20, 15, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A61728, #823838, #664A42, #3E524A, #140F0F 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: #a61728; --color-2: #823838; --color-3: #664a42; --color-4: #3e524a; --color-5: #140f0f. 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