← Back to Editor

#661C4B · #6A4399 · #41B571 · #D3FA55 · #FFB224

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

#661C4B

Rose Purple · Purple · Raspberry

HEX
#661C4B
RGB
rgb(102, 28, 75)
HSL
hsl(322, 57%, 25%)
HSB
hsb(322, 73%, 40%)
CMYK
cmyk(0%, 73%, 26%, 60%)
Oklch
oklch(36.2% 0.118 345.6)

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

#6A4399

Deep Indigo · DarkSlateBlue · Violet

HEX
#6A4399
RGB
rgb(106, 67, 153)
HSL
hsl(267, 39%, 43%)
HSB
hsb(267, 56%, 60%)
CMYK
cmyk(31%, 56%, 0%, 40%)
Oklch
oklch(46.9% 0.137 302.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#41B571

Celadon · MediumSeaGreen · Olive Green

HEX
#41B571
RGB
rgb(65, 181, 113)
HSL
hsl(145, 47%, 48%)
HSB
hsb(145, 64%, 71%)
CMYK
cmyk(64%, 0%, 38%, 29%)
Oklch
oklch(69.1% 0.145 154.0)

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

#D3FA55

Willow Green · GreenYellow · Apple Green

HEX
#D3FA55
RGB
rgb(211, 250, 85)
HSL
hsl(74, 94%, 66%)
HSB
hsb(74, 66%, 98%)
CMYK
cmyk(16%, 0%, 66%, 2%)
Oklch
oklch(92.8% 0.191 121.7)

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

#FFB224

Ginger · Orange · Warm Sun

HEX
#FFB224
RGB
rgb(255, 178, 36)
HSL
hsl(39, 100%, 57%)
HSB
hsb(39, 86%, 100%)
CMYK
cmyk(0%, 30%, 86%, 0%)
Oklch
oklch(81.7% 0.164 75.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

661C4B
1B6436

Analogous

5A1B64
661C4B
641B25

Triadic

661C4B
49641B
1B4964

Split-Comp.

661C4B
25641B
1B645A

Tetradic

661C4B
645A1B
1B6436
1B2564

Contrast Matrix WCAG 2.1 Contrast

661C4B
6A4399
41B571
D3FA55
FFB224
—
1.6
Fail
4.4
AA Large
9.6
AAA
6.4
AA
1.6
Fail
—
2.8
Fail
6.1
AA
4.0
AA Large
4.4
AA Large
2.8
Fail
—
2.2
Fail
1.4
Fail
9.6
AAA
6.1
AA
2.2
Fail
—
1.5
Fail
6.4
AA
4.0
AA Large
1.4
Fail
1.5
Fail
—
White BG
11.5AAA
7.3AAA
2.6Fail
1.2Fail
1.8Fail
Black BG
1.8Fail
2.9Fail
8.1AAA
17.6AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464540
595984
737481
E4E47D
DEDD46

Deuteranopia

4A503D
5B5E7F
6D6485
E2DF87
E2E84F

Tritanopia

623735
687470
478E91
D59CA3
FB6167

Achromatopsia

373737
585858
8B8B8B
DCDCDC
B9B9B9

Shades & Tints Shades & Tints

#661C4B

Dark
Light

#6A4399

Dark
Light

#41B571

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #661c4b;
  --color-2: #6a4399;
  --color-3: #41b571;
  --color-4: #d3fa55;
  --color-5: #ffb224;
}

SCSS

$color-1: #661c4b;
$color-2: #6a4399;
$color-3: #41b571;
$color-4: #d3fa55;
$color-5: #ffb224;

TAILWIND

colors: {
  'brand-1': '#661c4b',
  'brand-2': '#6a4399',
  'brand-3': '#41b571',
  'brand-4': '#d3fa55',
  'brand-5': '#ffb224',
}

RGB Array

[102, 28, 75], [106, 67, 153], [65, 181, 113], [211, 250, 85], [255, 178, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #661C4B, #6A4399, #41B571, #D3FA55, #FFB224 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: #661c4b; --color-2: #6a4399; --color-3: #41b571; --color-4: #d3fa55; --color-5: #ffb224. 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