← Back to Editor

#2C3837 · #C8DB5A · #FF0D3D · #B81270 · #B719E3

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

#2C3837

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#2C3837
RGB
rgb(44, 56, 55)
HSL
hsl(175, 12%, 20%)
HSB
hsb(175, 21%, 22%)
CMYK
cmyk(21%, 0%, 2%, 78%)
Oklch
oklch(32.9% 0.016 190.2)

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

#C8DB5A

Fresh Green · BurlyWood · Sunflower

HEX
#C8DB5A
RGB
rgb(200, 219, 90)
HSL
hsl(69, 64%, 61%)
HSB
hsb(69, 59%, 86%)
CMYK
cmyk(9%, 0%, 59%, 14%)
Oklch
oklch(85.2% 0.154 116.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FF0D3D

Vermilion · Crimson · Passion Red

HEX
#FF0D3D
RGB
rgb(255, 13, 61)
HSL
hsl(348, 100%, 53%)
HSB
hsb(348, 95%, 100%)
CMYK
cmyk(0%, 95%, 76%, 0%)
Oklch
oklch(63.4% 0.252 21.9)

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

#B81270

Rose Purple · MediumVioletRed · Camellia

HEX
#B81270
RGB
rgb(184, 18, 112)
HSL
hsl(326, 82%, 40%)
HSB
hsb(326, 90%, 72%)
CMYK
cmyk(0%, 90%, 39%, 28%)
Oklch
oklch(51.8% 0.204 354.1)

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

#B719E3

Royal Purple · DarkOrchid · Violet

HEX
#B719E3
RGB
rgb(183, 25, 227)
HSL
hsl(287, 80%, 49%)
HSB
hsb(287, 89%, 89%)
CMYK
cmyk(19%, 89%, 0%, 11%)
Oklch
oklch(58.3% 0.274 316.5)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C3837
392D2E

Analogous

2D3932
2C3837
2D3439

Triadic

2C3837
382D39
39382D

Split-Comp.

2C3837
392D34
39322D

Tetradic

2C3837
322D39
392D2E
34392D

Contrast Matrix WCAG 2.1 Contrast

2C3837
C8DB5A
FF0D3D
B81270
B719E3
—
7.9
AAA
3.1
AA Large
1.9
Fail
2.5
Fail
7.9
AAA
—
2.6
Fail
4.1
AA Large
3.2
AA Large
3.1
AA Large
2.6
Fail
—
1.6
Fail
1.3
Fail
1.9
Fail
4.1
AA Large
1.6
Fail
—
1.3
Fail
2.5
Fail
3.2
AA Large
1.3
Fail
1.3
Fail
—
White BG
12.2AAA
1.5Fail
3.9AA Large
6.3AA
4.9AA
Black BG
1.7Fail
13.7AAA
5.4AA
3.4AA Large
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

313137
D0D079
969431
706F59
7371B2

Deuteranopia

313037
CFCE81
A4B62F
7A8654
7C88A6

Tritanopia

2D3737
C99297
F32826
B04743
AF8C83

Achromatopsia

343434
C7C7C7
5B5B5B
4E4E4E
5F5F5F

Shades & Tints Shades & Tints

#2C3837

Dark
Light

#C8DB5A

Dark
Light

#FF0D3D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c3837;
  --color-2: #c8db5a;
  --color-3: #ff0d3d;
  --color-4: #b81270;
  --color-5: #b719e3;
}

SCSS

$color-1: #2c3837;
$color-2: #c8db5a;
$color-3: #ff0d3d;
$color-4: #b81270;
$color-5: #b719e3;

TAILWIND

colors: {
  'brand-1': '#2c3837',
  'brand-2': '#c8db5a',
  'brand-3': '#ff0d3d',
  'brand-4': '#b81270',
  'brand-5': '#b719e3',
}

RGB Array

[44, 56, 55], [200, 219, 90], [255, 13, 61], [184, 18, 112], [183, 25, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C3837, #C8DB5A, #FF0D3D, #B81270, #B719E3 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #2c3837; --color-2: #c8db5a; --color-3: #ff0d3d; --color-4: #b81270; --color-5: #b719e3. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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