← Back to Editor

#ABB823 · #CC964B · #FF1F35 · #80174B · #300030

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#ABB823

Autumn Sage · GoldenRod · Honey Gold

HEX
#ABB823
RGB
rgb(171, 184, 35)
HSL
hsl(65, 68%, 43%)
HSB
hsb(65, 81%, 72%)
CMYK
cmyk(7%, 0%, 81%, 28%)
Oklch
oklch(74.8% 0.160 114.9)

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

#CC964B

Ginger · SandyBrown · Warm Sun

HEX
#CC964B
RGB
rgb(204, 150, 75)
HSL
hsl(35, 56%, 55%)
HSB
hsb(35, 63%, 80%)
CMYK
cmyk(0%, 26%, 63%, 20%)
Oklch
oklch(71.0% 0.113 73.2)

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

#FF1F35

Vermilion · Crimson · Passion Red

HEX
#FF1F35
RGB
rgb(255, 31, 53)
HSL
hsl(354, 100%, 56%)
HSB
hsb(354, 88%, 100%)
CMYK
cmyk(0%, 88%, 79%, 0%)
Oklch
oklch(63.9% 0.247 24.6)

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

#80174B

Dark Violet · Brown · Camellia

HEX
#80174B
RGB
rgb(128, 23, 75)
HSL
hsl(330, 70%, 30%)
HSB
hsb(330, 82%, 50%)
CMYK
cmyk(0%, 82%, 41%, 50%)
Oklch
oklch(40.4% 0.146 356.2)

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

#300030

Rose Purple · Black · Dark Purple

HEX
#300030
RGB
rgb(48, 0, 48)
HSL
hsl(300, 100%, 9%)
HSB
hsb(300, 100%, 19%)
CMYK
cmyk(0%, 100%, 0%, 81%)
Oklch
oklch(21.7% 0.100 328.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABB823
3023B8

Analogous

B87A23
ABB823
61B823

Triadic

ABB823
23ACB8
B823AC

Split-Comp.

ABB823
2361B8
7A23B8

Tetradic

ABB823
23B87A
3023B8
B82361

Contrast Matrix WCAG 2.1 Contrast

ABB823
CC964B
FF1F35
80174B
300030
—
1.2
Fail
1.7
Fail
4.5
AA Large
8.2
AAA
1.2
Fail
—
1.5
Fail
3.7
AA Large
6.9
AA
1.7
Fail
1.5
Fail
—
2.6
Fail
4.7
AA
4.5
AA Large
3.7
AA Large
2.6
Fail
—
1.8
Fail
8.2
AAA
6.9
AA
4.7
AA
1.8
Fail
—
White BG
2.2Fail
2.6Fail
3.8AA Large
9.8AAA
18.0AAA
Black BG
9.6AAA
8.0AAA
5.5AA
2.1Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B147
B5B45D
9E9C30
53523E
1B1B24

Deuteranopia

B0AF50
B8BC62
ABBC2E
59613B
1E2222

Tritanopia

AC646A
C96B6F
F42B2B
7B3432
2E1B19

Achromatopsia

A3A3A3
9E9E9E
646464
3C3C3C
141414

Shades & Tints Shades & Tints

#ABB823

Dark
Light

#CC964B

Dark
Light

#FF1F35

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abb823;
  --color-2: #cc964b;
  --color-3: #ff1f35;
  --color-4: #80174b;
  --color-5: #300030;
}

SCSS

$color-1: #abb823;
$color-2: #cc964b;
$color-3: #ff1f35;
$color-4: #80174b;
$color-5: #300030;

TAILWIND

colors: {
  'brand-1': '#abb823',
  'brand-2': '#cc964b',
  'brand-3': '#ff1f35',
  'brand-4': '#80174b',
  'brand-5': '#300030',
}

RGB Array

[171, 184, 35], [204, 150, 75], [255, 31, 53], [128, 23, 75], [48, 0, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABB823, #CC964B, #FF1F35, #80174B, #300030 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #abb823; --color-2: #cc964b; --color-3: #ff1f35; --color-4: #80174b; --color-5: #300030. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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