← Back to Editor

#ABBA83 · #DA0023 · #6A0C31 · #3B0C38 · #61786E

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 LibraryData Visualization

Color Details Color Details

#ABBA83

Willow Green · DarkSeaGreen · Apple Green

HEX
#ABBA83
RGB
rgb(171, 186, 131)
HSL
hsl(76, 28%, 62%)
HSB
hsb(76, 30%, 73%)
CMYK
cmyk(8%, 0%, 30%, 27%)
Oklch
oklch(76.3% 0.076 120.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#DA0023

Vermilion · Crimson · Passion Red

HEX
#DA0023
RGB
rgb(218, 0, 35)
HSL
hsl(350, 100%, 43%)
HSB
hsb(350, 100%, 85%)
CMYK
cmyk(0%, 100%, 84%, 15%)
Oklch
oklch(56.0% 0.227 25.1)

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

#6A0C31

Dark Violet · Maroon · Raspberry

HEX
#6A0C31
RGB
rgb(106, 12, 49)
HSL
hsl(336, 80%, 23%)
HSB
hsb(336, 89%, 42%)
CMYK
cmyk(0%, 89%, 54%, 58%)
Oklch
oklch(34.5% 0.128 4.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#3B0C38

Rose Purple · MidnightBlue · Dark Purple

HEX
#3B0C38
RGB
rgb(59, 12, 56)
HSL
hsl(304, 66%, 14%)
HSB
hsb(304, 80%, 23%)
CMYK
cmyk(0%, 80%, 5%, 77%)
Oklch
oklch(25.8% 0.094 330.6)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#61786E

Mineral Blue · DimGray · Olive Green

HEX
#61786E
RGB
rgb(97, 120, 110)
HSL
hsl(154, 11%, 43%)
HSB
hsb(154, 19%, 47%)
CMYK
cmyk(19%, 0%, 8%, 53%)
Oklch
oklch(55.1% 0.031 167.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABBA83
9183B9

Analogous

B9AD83
ABBA83
90B983

Triadic

ABBA83
83ABB9
B983AB

Split-Comp.

ABBA83
8390B9
AD83B9

Tetradic

ABBA83
83B9AD
9183B9
B98390

Contrast Matrix WCAG 2.1 Contrast

ABBA83
DA0023
6A0C31
3B0C38
61786E
—
2.5
Fail
5.9
AA
7.8
AAA
2.3
Fail
2.5
Fail
—
2.3
Fail
3.1
AA Large
1.1
Fail
5.9
AA
2.3
Fail
—
1.3
Fail
2.6
Fail
7.8
AAA
3.1
AA Large
1.3
Fail
—
3.4
AA Large
2.3
Fail
1.1
Fail
2.6
Fail
3.4
AA Large
—
White BG
2.1Fail
5.2AA
12.3AAA
16.2AAA
4.8AA
Black BG
10.1AAA
4.0AA Large
1.7Fail
1.3Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B290
7C7A1B
414028
27262D
6B6B70

Deuteranopia

B1B094
889919
474E26
292D2B
6A6871

Tritanopia

AC9B9D
CF1412
65211F
392523
627273

Achromatopsia

AFAFAF
454545
2C2C2C
1F1F1F
707070

Shades & Tints Shades & Tints

#ABBA83

Dark
Light

#DA0023

Dark
Light

#6A0C31

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abba83;
  --color-2: #da0023;
  --color-3: #6a0c31;
  --color-4: #3b0c38;
  --color-5: #61786e;
}

SCSS

$color-1: #abba83;
$color-2: #da0023;
$color-3: #6a0c31;
$color-4: #3b0c38;
$color-5: #61786e;

TAILWIND

colors: {
  'brand-1': '#abba83',
  'brand-2': '#da0023',
  'brand-3': '#6a0c31',
  'brand-4': '#3b0c38',
  'brand-5': '#61786e',
}

RGB Array

[171, 186, 131], [218, 0, 35], [106, 12, 49], [59, 12, 56], [97, 120, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABBA83, #DA0023, #6A0C31, #3B0C38, #61786E is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #abba83; --color-2: #da0023; --color-3: #6a0c31; --color-4: #3b0c38; --color-5: #61786e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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