← Back to Editor

#2C2942 · #70580D · #FF850E · #FF3C57 · #870466

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

#2C2942

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2C2942
RGB
rgb(44, 41, 66)
HSL
hsl(247, 23%, 21%)
HSB
hsb(247, 38%, 26%)
CMYK
cmyk(33%, 38%, 0%, 74%)
Oklch
oklch(29.6% 0.045 288.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#70580D

Ochre · Olive · Amber Gold

HEX
#70580D
RGB
rgb(112, 88, 13)
HSL
hsl(45, 79%, 25%)
HSB
hsb(45, 88%, 44%)
CMYK
cmyk(0%, 21%, 88%, 56%)
Oklch
oklch(47.2% 0.091 89.0)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#FF850E

Ginger · Orange · Warm Sun

HEX
#FF850E
RGB
rgb(255, 133, 14)
HSL
hsl(30, 100%, 53%)
HSB
hsb(30, 95%, 100%)
CMYK
cmyk(0%, 48%, 95%, 0%)
Oklch
oklch(74.0% 0.181 54.5)

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

#FF3C57

Peach Pink · Tomato · Coral Red

HEX
#FF3C57
RGB
rgb(255, 60, 87)
HSL
hsl(352, 100%, 62%)
HSB
hsb(352, 76%, 100%)
CMYK
cmyk(0%, 76%, 66%, 0%)
Oklch
oklch(66.0% 0.228 19.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#870466

Rose Purple · Purple · Eggplant

HEX
#870466
RGB
rgb(135, 4, 102)
HSL
hsl(315, 94%, 27%)
HSB
hsb(315, 97%, 53%)
CMYK
cmyk(0%, 97%, 24%, 47%)
Oklch
oklch(42.0% 0.177 342.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C2942
3F4229

Analogous

293342
2C2942
382942

Triadic

2C2942
422C29
29422C

Split-Comp.

2C2942
423829
334229

Tetradic

2C2942
422933
3F4229
294238

Contrast Matrix WCAG 2.1 Contrast

2C2942
70580D
FF850E
FF3C57
870466
—
2.1
Fail
5.7
AA
4.0
AA Large
1.5
Fail
2.1
Fail
—
2.8
Fail
2.0
Fail
1.4
Fail
5.7
AA
2.8
Fail
—
1.4
Fail
3.8
AA Large
4.0
AA Large
2.0
Fail
1.4
Fail
—
2.7
Fail
1.5
Fail
1.4
Fail
3.8
AA Large
2.7
Fail
—
White BG
14.0AAA
6.8AA
2.4Fail
3.5AA Large
9.4AAA
Black BG
1.5Fail
3.1AA Large
8.6AAA
6.0AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B3C
66651F
CAC92B
ABA950
4E4D4E

Deuteranopia

2B2B3A
676924
D1DA32
B6C54F
566049

Tritanopia

2C3736
6F2D31
F94247
F54B4A
803C37

Achromatopsia

2D2D2D
575757
9C9C9C
797979
363636

Shades & Tints Shades & Tints

#2C2942

Dark
Light

#70580D

Dark
Light

#FF850E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c2942;
  --color-2: #70580d;
  --color-3: #ff850e;
  --color-4: #ff3c57;
  --color-5: #870466;
}

SCSS

$color-1: #2c2942;
$color-2: #70580d;
$color-3: #ff850e;
$color-4: #ff3c57;
$color-5: #870466;

TAILWIND

colors: {
  'brand-1': '#2c2942',
  'brand-2': '#70580d',
  'brand-3': '#ff850e',
  'brand-4': '#ff3c57',
  'brand-5': '#870466',
}

RGB Array

[44, 41, 66], [112, 88, 13], [255, 133, 14], [255, 60, 87], [135, 4, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C2942, #70580D, #FF850E, #FF3C57, #870466 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #2c2942; --color-2: #70580d; --color-3: #ff850e; --color-4: #ff3c57; --color-5: #870466. 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. 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