← Back to Editor

#7F4880 · #9D4660 · #BB4440 · #D94220 · #F74000

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

#7F4880

Dark Plum · DimGray · Eggplant

HEX
#7F4880
RGB
rgb(127, 72, 128)
HSL
hsl(299, 28%, 39%)
HSB
hsb(299, 44%, 50%)
CMYK
cmyk(1%, 44%, 0%, 50%)
Oklch
oklch(48.8% 0.108 326.4)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#9D4660

Dark Violet · Sienna · Camellia

HEX
#9D4660
RGB
rgb(157, 70, 96)
HSL
hsl(342, 38%, 45%)
HSB
hsb(342, 55%, 62%)
CMYK
cmyk(0%, 55%, 39%, 38%)
Oklch
oklch(51.4% 0.119 3.4)

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

#BB4440

Crimson · Sienna · Passion Red

HEX
#BB4440
RGB
rgb(187, 68, 64)
HSL
hsl(2, 49%, 49%)
HSB
hsb(2, 66%, 73%)
CMYK
cmyk(0%, 64%, 66%, 27%)
Oklch
oklch(55.0% 0.155 25.5)

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

#D94220

Vermilion · Chocolate · Passion Red

HEX
#D94220
RGB
rgb(217, 66, 32)
HSL
hsl(11, 74%, 49%)
HSB
hsb(11, 85%, 85%)
CMYK
cmyk(0%, 70%, 85%, 15%)
Oklch
oklch(59.4% 0.193 33.9)

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

#F74000

Tangerine · OrangeRed · Amber Brown

HEX
#F74000
RGB
rgb(247, 64, 0)
HSL
hsl(16, 100%, 48%)
HSB
hsb(16, 100%, 97%)
CMYK
cmyk(0%, 74%, 100%, 3%)
Oklch
oklch(64.2% 0.226 34.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7F4880
497F48

Analogous

63487F
7F4880
7F4864

Triadic

7F4880
7F7E48
487F7E

Split-Comp.

7F4880
647F48
487F63

Tetradic

7F4880
7F6348
497F48
48647F

Contrast Matrix WCAG 2.1 Contrast

7F4880
9D4660
BB4440
D94220
F74000
—
1.1
Fail
1.3
Fail
1.5
Fail
1.8
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
6.7AA
6.0AA
5.2AA
4.4AA Large
3.7AA Large
Black BG
3.1AA Large
3.5AA Large
4.0AA Large
4.8AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676772
77775A
878641
989628
A8A60F

Deuteranopia

6A6E6F
7C8358
8E9741
A0AC2A
B2C013

Tritanopia

7C6865
995554
B54242
D12F30
EE1C1E

Achromatopsia

5F5F5F
636363
676767
6B6B6B
6F6F6F

Shades & Tints Shades & Tints

#7F4880

Dark
Light

#9D4660

Dark
Light

#BB4440

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7f4880;
  --color-2: #9d4660;
  --color-3: #bb4440;
  --color-4: #d94220;
  --color-5: #f74000;
}

SCSS

$color-1: #7f4880;
$color-2: #9d4660;
$color-3: #bb4440;
$color-4: #d94220;
$color-5: #f74000;

TAILWIND

colors: {
  'brand-1': '#7f4880',
  'brand-2': '#9d4660',
  'brand-3': '#bb4440',
  'brand-4': '#d94220',
  'brand-5': '#f74000',
}

RGB Array

[127, 72, 128], [157, 70, 96], [187, 68, 64], [217, 66, 32], [247, 64, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7F4880, #9D4660, #BB4440, #D94220, #F74000 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: #7f4880; --color-2: #9d4660; --color-3: #bb4440; --color-4: #d94220; --color-5: #f74000. 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