#F4064A + #E10581 + #AA31E8 + #2D2026 + #907A83 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F4064A

Dark Violet · Crimson · Camellia

HEX

#F4064A

RGB

rgb(244, 6, 74)

HSL

hsl(343, 95%, 49%)

HSB

hsb(343, 98%, 96%)

CMYK

cmyk(0%, 98%, 70%, 4%)

Oklch

oklch(61.4% 0.244 17.6)

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

#E10581

Rose Purple · MediumVioletRed · Camellia

HEX

#E10581

RGB

rgb(225, 5, 129)

HSL

hsl(326, 96%, 45%)

HSB

hsb(326, 98%, 88%)

CMYK

cmyk(0%, 98%, 43%, 12%)

Oklch

oklch(59.3% 0.241 356.7)

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

#AA31E8

Royal Purple · DarkOrchid · Violet

HEX

#AA31E8

RGB

rgb(170, 49, 232)

HSL

hsl(280, 80%, 55%)

HSB

hsb(280, 79%, 91%)

CMYK

cmyk(27%, 79%, 0%, 9%)

Oklch

oklch(58.3% 0.258 310.6)

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

#2D2026

Dark Violet · DarkSlateGray · Raspberry

HEX

#2D2026

RGB

rgb(45, 32, 38)

HSL

hsl(332, 17%, 15%)

HSB

hsb(332, 29%, 18%)

CMYK

cmyk(0%, 29%, 16%, 82%)

Oklch

oklch(26.2% 0.023 349.4)

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

#907A83

Dark Violet · Gray · Warm Gray

HEX

#907A83

RGB

rgb(144, 122, 131)

HSL

hsl(335, 9%, 52%)

HSB

hsb(335, 15%, 56%)

CMYK

cmyk(0%, 15%, 9%, 44%)

Oklch

oklch(60.3% 0.030 351.5)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4064A

06F4B0

Analogous

F406C0

F4064A

F43A06

Triadic

F4064A

4AF406

064AF4

Split-Comp.

F4064A

06F43A

06C0F4

Tetradic

F4064A

C0F406

06F4B0

3A06F4

Contrast Matrix WCAG 2.1 Contrast

F4064A	E10581	AA31E8	2D2026	907A83
—	1.1 Fail	1.2 Fail	3.7 AA Large	1.1 Fail
1.1 Fail	—	1.1 Fail	3.4 AA Large	1.2 Fail
1.2 Fail	1.1 Fail	—	3.2 AA Large	1.2 Fail
3.7 AA Large	3.4 AA Large	3.2 AA Large	—	3.9 AA Large
1.1 Fail	1.2 Fail	1.2 Fail	3.9 AA Large	—

White BG

4.2AA Large

4.6AA

4.9AA

15.6AAA

4.0AA Large

Black BG

5.0AA

4.5AA

4.3AA Large

1.3Fail

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8B3A

828063

7675BC

272725

868681

Deuteranopia

9BAD36

8F9F5C

7D86B1

282924

888980

Tritanopia

E82D2A

D64B46

A49991

2C2323

8F7F7F

Achromatopsia

555555

6A6A6A

252525

828282

Shades & Tints Shades & Tints

#F4064A

Dark

Light

#E10581

Dark

Light

#AA31E8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4064a;
  --color-2: #e10581;
  --color-3: #aa31e8;
  --color-4: #2d2026;
  --color-5: #907a83;
}

SCSS

$color-1: #f4064a;
$color-2: #e10581;
$color-3: #aa31e8;
$color-4: #2d2026;
$color-5: #907a83;

TAILWIND

colors: {
  'brand-1': '#f4064a',
  'brand-2': '#e10581',
  'brand-3': '#aa31e8',
  'brand-4': '#2d2026',
  'brand-5': '#907a83',
}

RGB Array

[244, 6, 74], [225, 5, 129], [170, 49, 232], [45, 32, 38], [144, 122, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4064A, #E10581, #AA31E8, #2D2026, #907A83 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: #f4064a; --color-2: #e10581; --color-3: #aa31e8; --color-4: #2d2026; --color-5: #907a83. 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