← Back to Editor

#D4514C · #9C0E4A · #3D123B · #0A6158 · #749E33

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

#D4514C

Vermilion · Tomato · Passion Red

HEX
#D4514C
RGB
rgb(212, 81, 76)
HSL
hsl(2, 61%, 56%)
HSB
hsb(2, 64%, 83%)
CMYK
cmyk(0%, 62%, 64%, 17%)
Oklch
oklch(60.8% 0.166 25.5)

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

#9C0E4A

Dark Violet · Brown · Camellia

HEX
#9C0E4A
RGB
rgb(156, 14, 74)
HSL
hsl(335, 84%, 33%)
HSB
hsb(335, 91%, 61%)
CMYK
cmyk(0%, 91%, 53%, 39%)
Oklch
oklch(45.1% 0.174 4.2)

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

#3D123B

Rose Purple · MidnightBlue · Dark Purple

HEX
#3D123B
RGB
rgb(61, 18, 59)
HSL
hsl(303, 54%, 15%)
HSB
hsb(303, 70%, 24%)
CMYK
cmyk(0%, 70%, 3%, 76%)
Oklch
oklch(27.1% 0.089 329.6)

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

#0A6158

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0A6158
RGB
rgb(10, 97, 88)
HSL
hsl(174, 81%, 21%)
HSB
hsb(174, 90%, 38%)
CMYK
cmyk(90%, 0%, 9%, 62%)
Oklch
oklch(44.4% 0.076 183.7)

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

#749E33

Grass Green · DarkOliveGreen · Olive Green

HEX
#749E33
RGB
rgb(116, 158, 51)
HSL
hsl(84, 51%, 41%)
HSB
hsb(84, 68%, 62%)
CMYK
cmyk(27%, 0%, 68%, 38%)
Oklch
oklch(64.7% 0.143 128.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4514C
4ACFD3

Analogous

D34A8A
D4514C
D3934A

Triadic

D4514C
4AD34F
4F4AD3

Split-Comp.

D4514C
4AD393
4A8AD3

Tetradic

D4514C
8AD34A
4ACFD3
934AD3

Contrast Matrix WCAG 2.1 Contrast

D4514C
9C0E4A
3D123B
0A6158
749E33
—
2.0
Fail
3.8
AA Large
1.8
Fail
1.3
Fail
2.0
Fail
—
1.9
Fail
1.1
Fail
2.6
Fail
3.8
AA Large
1.9
Fail
—
2.1
Fail
5.0
AA
1.8
Fail
1.1
Fail
2.1
Fail
—
2.3
Fail
1.3
Fail
2.6
Fail
5.0
AA
2.3
Fail
—
White BG
4.1AA Large
8.2AAA
15.6AAA
7.3AAA
3.1AA Large
Black BG
5.1AA
2.6Fail
1.3Fail
2.9Fail
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A4D
5F5D3B
2A2A31
30305A
86874D

Deuteranopia

A3AD4E
677138
2D302F
2B245B
848153

Tritanopia

CD4E4E
95302E
3B2928
0E5C5C
766166

Achromatopsia

787878
3F3F3F
242424
464646
858585

Shades & Tints Shades & Tints

#D4514C

Dark
Light

#9C0E4A

Dark
Light

#3D123B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4514c;
  --color-2: #9c0e4a;
  --color-3: #3d123b;
  --color-4: #0a6158;
  --color-5: #749e33;
}

SCSS

$color-1: #d4514c;
$color-2: #9c0e4a;
$color-3: #3d123b;
$color-4: #0a6158;
$color-5: #749e33;

TAILWIND

colors: {
  'brand-1': '#d4514c',
  'brand-2': '#9c0e4a',
  'brand-3': '#3d123b',
  'brand-4': '#0a6158',
  'brand-5': '#749e33',
}

RGB Array

[212, 81, 76], [156, 14, 74], [61, 18, 59], [10, 97, 88], [116, 158, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4514C, #9C0E4A, #3D123B, #0A6158, #749E33 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: #d4514c; --color-2: #9c0e4a; --color-3: #3d123b; --color-4: #0a6158; --color-5: #749e33. 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