← Back to Editor

#0F0312 · #4D0341 · #660D59 · #4C6B09 · #BDD980

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

#0F0312

Royal Purple · Black · Dark Purple

HEX
#0F0312
RGB
rgb(15, 3, 18)
HSL
hsl(288, 71%, 4%)
HSB
hsb(288, 83%, 7%)
CMYK
cmyk(17%, 83%, 0%, 93%)
Oklch
oklch(13.3% 0.042 320.5)

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

#4D0341

Rose Purple · MidnightBlue · Dark Purple

HEX
#4D0341
RGB
rgb(77, 3, 65)
HSL
hsl(310, 93%, 16%)
HSB
hsb(310, 96%, 30%)
CMYK
cmyk(0%, 96%, 16%, 70%)
Oklch
oklch(28.9% 0.123 336.6)

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

#660D59

Rose Purple · Purple · Eggplant

HEX
#660D59
RGB
rgb(102, 13, 89)
HSL
hsl(309, 77%, 23%)
HSB
hsb(309, 87%, 40%)
CMYK
cmyk(0%, 87%, 13%, 60%)
Oklch
oklch(35.7% 0.145 335.3)

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

#4C6B09

Grass Green · DarkOliveGreen · Forest Green

HEX
#4C6B09
RGB
rgb(76, 107, 9)
HSL
hsl(79, 84%, 23%)
HSB
hsb(79, 92%, 42%)
CMYK
cmyk(29%, 0%, 92%, 58%)
Oklch
oklch(48.6% 0.122 127.3)

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

#BDD980

Willow Green · Tan · Apple Green

HEX
#BDD980
RGB
rgb(189, 217, 128)
HSL
hsl(79, 54%, 68%)
HSB
hsb(79, 41%, 85%)
CMYK
cmyk(13%, 0%, 41%, 15%)
Oklch
oklch(84.4% 0.119 123.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F0312
061103

Analogous

070311
0F0312
11030D

Triadic

0F0312
110F03
03110F

Split-Comp.

0F0312
0D1103
031107

Tetradic

0F0312
110703
061103
030D11

Contrast Matrix WCAG 2.1 Contrast

0F0312
4D0341
660D59
4C6B09
BDD980
—
1.3
Fail
1.7
Fail
3.3
AA Large
12.9
AAA
1.3
Fail
—
1.3
Fail
2.4
Fail
9.5
AAA
1.7
Fail
1.3
Fail
—
1.9
Fail
7.6
AAA
3.3
AA Large
2.4
Fail
1.9
Fail
—
3.9
AA Large
12.9
AAA
9.5
AAA
7.6
AAA
3.9
AA Large
—
White BG
20.2AAA
14.9AAA
11.9AAA
6.2AA
1.6Fail
Black BG
1.0Fail
1.4Fail
1.8Fail
3.4AA Large
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A0E
2D2C32
3F3F47
595A21
C9C996

Deuteranopia

0B0B0E
31372E
454B42
585526
C8C59B

Tritanopia

0E0C0B
492624
623835
4E3338
BEA7AA

Achromatopsia

080808
202020
303030
575757
C6C6C6

Shades & Tints Shades & Tints

#0F0312

Dark
Light

#4D0341

Dark
Light

#660D59

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f0312;
  --color-2: #4d0341;
  --color-3: #660d59;
  --color-4: #4c6b09;
  --color-5: #bdd980;
}

SCSS

$color-1: #0f0312;
$color-2: #4d0341;
$color-3: #660d59;
$color-4: #4c6b09;
$color-5: #bdd980;

TAILWIND

colors: {
  'brand-1': '#0f0312',
  'brand-2': '#4d0341',
  'brand-3': '#660d59',
  'brand-4': '#4c6b09',
  'brand-5': '#bdd980',
}

RGB Array

[15, 3, 18], [77, 3, 65], [102, 13, 89], [76, 107, 9], [189, 217, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F0312, #4D0341, #660D59, #4C6B09, #BDD980 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: #0f0312; --color-2: #4d0341; --color-3: #660d59; --color-4: #4c6b09; --color-5: #bdd980. 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