#570640 + #2D1C2E + #981B4A + #F21E3D + #766576 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#570640

Rose Purple · Maroon · Dark Purple

HEX

#570640

RGB

rgb(87, 6, 64)

HSL

hsl(317, 87%, 18%)

HSB

hsb(317, 93%, 34%)

CMYK

cmyk(0%, 93%, 26%, 66%)

Oklch

oklch(31.0% 0.125 343.5)

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

#2D1C2E

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2D1C2E

RGB

rgb(45, 28, 46)

HSL

hsl(297, 24%, 15%)

HSB

hsb(297, 39%, 18%)

CMYK

cmyk(2%, 39%, 0%, 82%)

Oklch

oklch(25.6% 0.041 324.8)

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

#981B4A

Dark Violet · Brown · Camellia

HEX

#981B4A

RGB

rgb(152, 27, 74)

HSL

hsl(337, 70%, 35%)

HSB

hsb(337, 82%, 60%)

CMYK

cmyk(0%, 82%, 51%, 40%)

Oklch

oklch(45.1% 0.162 4.7)

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

#F21E3D

Vermilion · Crimson · Passion Red

HEX

#F21E3D

RGB

rgb(242, 30, 61)

HSL

hsl(351, 89%, 53%)

HSB

hsb(351, 88%, 95%)

CMYK

cmyk(0%, 88%, 75%, 5%)

Oklch

oklch(61.6% 0.236 22.1)

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

#766576

Rose Purple · DimGray · Warm Gray

HEX

#766576

RGB

rgb(118, 101, 118)

HSL

hsl(300, 8%, 43%)

HSB

hsb(300, 14%, 46%)

CMYK

cmyk(0%, 14%, 0%, 54%)

Oklch

oklch(52.9% 0.033 326.0)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

570640

06561D

Analogous

450656

570640

560617

Triadic

570640

3F5606

063F56

Split-Comp.

570640

175606

065645

Tetradic

570640

564506

06561D

061756

Contrast Matrix WCAG 2.1 Contrast

570640	2D1C2E	981B4A	F21E3D	766576
—	1.1 Fail	1.7 Fail	3.3 AA Large	2.6 Fail
1.1 Fail	—	2.0 Fail	3.8 AA Large	3.0 Fail
1.7 Fail	2.0 Fail	—	1.9 Fail	1.5 Fail
3.3 AA Large	3.8 AA Large	1.9 Fail	—	1.3 Fail
2.6 Fail	3.0 Fail	1.5 Fail	1.3 Fail	—

White BG

14.0AAA

15.9AAA

8.1AAA

4.2AA Large

5.4AA

Black BG

1.5Fail

1.3Fail

2.6Fail

5.0AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

343332

26252A

62613F

969435

6F6E72

Deuteranopia

393F2F

272829

69723C

A3B234

707171

Tritanopia

532724

2C2625

923634

E7302E

756F6E

Achromatopsia

252525

232323

464646

616161

6C6C6C

Shades & Tints Shades & Tints

#570640

Dark

Light

#2D1C2E

Dark

Light

#981B4A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #570640;
  --color-2: #2d1c2e;
  --color-3: #981b4a;
  --color-4: #f21e3d;
  --color-5: #766576;
}

SCSS

$color-1: #570640;
$color-2: #2d1c2e;
$color-3: #981b4a;
$color-4: #f21e3d;
$color-5: #766576;

TAILWIND

colors: {
  'brand-1': '#570640',
  'brand-2': '#2d1c2e',
  'brand-3': '#981b4a',
  'brand-4': '#f21e3d',
  'brand-5': '#766576',
}

RGB Array

[87, 6, 64], [45, 28, 46], [152, 27, 74], [242, 30, 61], [118, 101, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #570640, #2D1C2E, #981B4A, #F21E3D, #766576 is ideal for: tech websites, dark mode UIs, game UIs. 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: #570640; --color-2: #2d1c2e; --color-3: #981b4a; --color-4: #f21e3d; --color-5: #766576. 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. 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