← Back to Editor

#A51F2A · #33CAB9 · #09A961 · #0A893A · #180F14

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#A51F2A

Vermilion · Brown · Wine Red

HEX
#A51F2A
RGB
rgb(165, 31, 42)
HSL
hsl(355, 68%, 38%)
HSB
hsb(355, 81%, 65%)
CMYK
cmyk(0%, 81%, 75%, 35%)
Oklch
oklch(47.1% 0.169 23.0)

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

#33CAB9

Mineral Blue · MediumTurquoise · Mint Ice

HEX
#33CAB9
RGB
rgb(51, 202, 185)
HSL
hsl(173, 60%, 50%)
HSB
hsb(173, 75%, 79%)
CMYK
cmyk(75%, 0%, 8%, 21%)
Oklch
oklch(75.9% 0.124 183.6)

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

#09A961

Mineral Blue · SeaGreen · Forest Green

HEX
#09A961
RGB
rgb(9, 169, 97)
HSL
hsl(153, 90%, 35%)
HSB
hsb(153, 95%, 66%)
CMYK
cmyk(95%, 0%, 43%, 34%)
Oklch
oklch(64.6% 0.158 154.9)

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

#0A893A

Pine Green · ForestGreen · Forest Green

HEX
#0A893A
RGB
rgb(10, 137, 58)
HSL
hsl(143, 86%, 29%)
HSB
hsb(143, 93%, 54%)
CMYK
cmyk(93%, 0%, 58%, 46%)
Oklch
oklch(55.1% 0.153 148.8)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#180F14

Rose Purple · Black · Raspberry

HEX
#180F14
RGB
rgb(24, 15, 20)
HSL
hsl(327, 23%, 8%)
HSB
hsb(327, 38%, 9%)
CMYK
cmyk(0%, 37%, 17%, 91%)
Oklch
oklch(18.3% 0.018 344.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A51F2A
1FA398

Analogous

A31F6C
A51F2A
A3561F

Triadic

A51F2A
2AA31F
1F2AA3

Split-Comp.

A51F2A
1FA356
1F6CA3

Tetradic

A51F2A
6CA31F
1FA398
561FA3

Contrast Matrix WCAG 2.1 Contrast

A51F2A
33CAB9
09A961
0A893A
180F14
—
3.6
AA Large
2.4
Fail
1.6
Fail
2.5
Fail
3.6
AA Large
—
1.5
Fail
2.2
Fail
9.2
AAA
2.4
Fail
1.5
Fail
—
1.5
Fail
6.1
AA
1.6
Fail
2.2
Fail
1.5
Fail
—
4.2
AA Large
2.5
Fail
9.2
AAA
6.1
AA
4.2
AA Large
—
White BG
7.4AAA
2.0Fail
3.1AA Large
4.5AA
18.8AAA
Black BG
2.8Fail
10.3AAA
6.9AA
4.7AA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6A27
7476BD
4E5072
41424D
141413

Deuteranopia

737D27
6C60BE
453977
3A3052
151513

Tritanopia

9E2525
3BC0C1
118083
105C60
181212

Achromatopsia

484848
9B9B9B
717171
5A5A5A
121212

Shades & Tints Shades & Tints

#A51F2A

Dark
Light

#33CAB9

Dark
Light

#09A961

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a51f2a;
  --color-2: #33cab9;
  --color-3: #09a961;
  --color-4: #0a893a;
  --color-5: #180f14;
}

SCSS

$color-1: #a51f2a;
$color-2: #33cab9;
$color-3: #09a961;
$color-4: #0a893a;
$color-5: #180f14;

TAILWIND

colors: {
  'brand-1': '#a51f2a',
  'brand-2': '#33cab9',
  'brand-3': '#09a961',
  'brand-4': '#0a893a',
  'brand-5': '#180f14',
}

RGB Array

[165, 31, 42], [51, 202, 185], [9, 169, 97], [10, 137, 58], [24, 15, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A51F2A, #33CAB9, #09A961, #0A893A, #180F14 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: #a51f2a; --color-2: #33cab9; --color-3: #09a961; --color-4: #0a893a; --color-5: #180f14. 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