← Back to Editor

#4F2547 · #7A2254 · #B3325B · #DB6930 · #DBBC30

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4F2547

Rose Purple · DarkSlateGray · Eggplant

HEX
#4F2547
RGB
rgb(79, 37, 71)
HSL
hsl(311, 36%, 23%)
HSB
hsb(311, 53%, 31%)
CMYK
cmyk(0%, 53%, 10%, 69%)
Oklch
oklch(33.5% 0.080 334.8)

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

#7A2254

Rose Purple · Purple · Camellia

HEX
#7A2254
RGB
rgb(122, 34, 84)
HSL
hsl(326, 56%, 31%)
HSB
hsb(326, 72%, 48%)
CMYK
cmyk(0%, 72%, 31%, 52%)
Oklch
oklch(40.7% 0.132 349.6)

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

#B3325B

Dark Violet · Brown · Camellia

HEX
#B3325B
RGB
rgb(179, 50, 91)
HSL
hsl(341, 56%, 45%)
HSB
hsb(341, 72%, 70%)
CMYK
cmyk(0%, 72%, 49%, 30%)
Oklch
oklch(52.3% 0.167 6.0)

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

#DB6930

Tangerine · Chocolate · Warm Sun

HEX
#DB6930
RGB
rgb(219, 105, 48)
HSL
hsl(20, 70%, 52%)
HSB
hsb(20, 78%, 86%)
CMYK
cmyk(0%, 52%, 78%, 14%)
Oklch
oklch(64.9% 0.159 44.5)

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

#DBBC30

Ginger · GoldenRod · Sunflower

HEX
#DBBC30
RGB
rgb(219, 188, 48)
HSL
hsl(49, 70%, 52%)
HSB
hsb(49, 78%, 86%)
CMYK
cmyk(0%, 14%, 78%, 14%)
Oklch
oklch(79.9% 0.151 95.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F2547
26502D

Analogous

422650
4F2547
502633

Triadic

4F2547
485026
264850

Split-Comp.

4F2547
335026
265042

Tetradic

4F2547
504226
26502D
263350

Contrast Matrix WCAG 2.1 Contrast

4F2547
7A2254
B3325B
DB6930
DBBC30
—
1.3
Fail
2.1
Fail
3.6
AA Large
6.7
AA
1.3
Fail
—
1.6
Fail
2.8
Fail
5.1
AA
2.1
Fail
1.6
Fail
—
1.7
Fail
3.2
AA Large
3.6
AA Large
2.8
Fail
1.7
Fail
—
1.9
Fail
6.7
AA
5.1
AA
3.2
AA Large
1.9
Fail
—
White BG
12.4AAA
9.6AAA
6.0AA
3.5AA Large
1.9Fail
Black BG
1.7Fail
2.2Fail
3.5AA Large
6.1AA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3C3F
545348
7B7A51
AAA93E
CECD52

Deuteranopia

3F423D
596045
838C4F
B0B941
CFD25A

Tritanopia

4D3837
763E3C
AD4948
D5494B
D96D73

Achromatopsia

353535
424242
5D5D5D
858585
B5B5B5

Shades & Tints Shades & Tints

#4F2547

Dark
Light

#7A2254

Dark
Light

#B3325B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f2547;
  --color-2: #7a2254;
  --color-3: #b3325b;
  --color-4: #db6930;
  --color-5: #dbbc30;
}

SCSS

$color-1: #4f2547;
$color-2: #7a2254;
$color-3: #b3325b;
$color-4: #db6930;
$color-5: #dbbc30;

TAILWIND

colors: {
  'brand-1': '#4f2547',
  'brand-2': '#7a2254',
  'brand-3': '#b3325b',
  'brand-4': '#db6930',
  'brand-5': '#dbbc30',
}

RGB Array

[79, 37, 71], [122, 34, 84], [179, 50, 91], [219, 105, 48], [219, 188, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F2547, #7A2254, #B3325B, #DB6930, #DBBC30 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4f2547; --color-2: #7a2254; --color-3: #b3325b; --color-4: #db6930; --color-5: #dbbc30. 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. 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 tech, SaaS, healthcare, eco industries. 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