← Back to Editor

#FF5854 · #DAD77E · #291F2F · #850446 · #2C394A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FF5854

Peach Pink · Tomato · Coral Red

HEX
#FF5854
RGB
rgb(255, 88, 84)
HSL
hsl(1, 100%, 66%)
HSB
hsb(1, 67%, 100%)
CMYK
cmyk(0%, 65%, 67%, 0%)
Oklch
oklch(68.5% 0.204 25.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DAD77E

Fresh Green · Khaki · Sunflower

HEX
#DAD77E
RGB
rgb(218, 215, 126)
HSL
hsl(58, 55%, 67%)
HSB
hsb(58, 42%, 85%)
CMYK
cmyk(0%, 1%, 42%, 15%)
Oklch
oklch(86.2% 0.111 106.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#291F2F

Dark Plum · DarkSlateGray · Dark Purple

HEX
#291F2F
RGB
rgb(41, 31, 47)
HSL
hsl(278, 21%, 15%)
HSB
hsb(278, 34%, 18%)
CMYK
cmyk(13%, 34%, 0%, 82%)
Oklch
oklch(25.8% 0.033 312.5)

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

#850446

Rose Purple · Brown · Camellia

HEX
#850446
RGB
rgb(133, 4, 70)
HSL
hsl(329, 94%, 27%)
HSB
hsb(329, 97%, 52%)
CMYK
cmyk(0%, 97%, 47%, 48%)
Oklch
oklch(40.2% 0.160 359.1)

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

#2C394A

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C394A
RGB
rgb(44, 57, 74)
HSL
hsl(214, 25%, 23%)
HSB
hsb(214, 41%, 29%)
CMYK
cmyk(41%, 23%, 0%, 71%)
Oklch
oklch(34.0% 0.035 255.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF5854
52FCFF

Analogous

FF52A5
FF5854
FFAB52

Triadic

FF5854
52FF54
5452FF

Split-Comp.

FF5854
52FFAB
52A5FF

Tetradic

FF5854
A5FF52
52FCFF
AB52FF

Contrast Matrix WCAG 2.1 Contrast

FF5854
DAD77E
291F2F
850446
2C394A
—
2.1
Fail
5.1
AA
3.2
AA Large
3.8
AA Large
2.1
Fail
—
10.5
AAA
6.7
AA
7.8
AAA
5.1
AA
10.5
AAA
—
1.6
Fail
1.3
Fail
3.2
AA Large
6.7
AA
1.6
Fail
—
1.2
Fail
3.8
AA Large
7.8
AAA
1.3
Fail
1.2
Fail
—
White BG
3.1AA Large
1.5Fail
15.8AAA
10.0AAA
11.7AAA
Black BG
6.8AA
14.0AAA
1.3Fail
2.1Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B555
D9D994
25252B
4D4C36
323246

Deuteranopia

C0CD55
D9D999
25262A
555E32
313045

Tritanopia

F75656
DAA5A8
282827
7F2927
2D4342

Achromatopsia

898989
CECECE
242424
323232
373737

Shades & Tints Shades & Tints

#FF5854

Dark
Light

#DAD77E

Dark
Light

#291F2F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff5854;
  --color-2: #dad77e;
  --color-3: #291f2f;
  --color-4: #850446;
  --color-5: #2c394a;
}

SCSS

$color-1: #ff5854;
$color-2: #dad77e;
$color-3: #291f2f;
$color-4: #850446;
$color-5: #2c394a;

TAILWIND

colors: {
  'brand-1': '#ff5854',
  'brand-2': '#dad77e',
  'brand-3': '#291f2f',
  'brand-4': '#850446',
  'brand-5': '#2c394a',
}

RGB Array

[255, 88, 84], [218, 215, 126], [41, 31, 47], [133, 4, 70], [44, 57, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF5854, #DAD77E, #291F2F, #850446, #2C394A is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ff5854; --color-2: #dad77e; --color-3: #291f2f; --color-4: #850446; --color-5: #2c394a. 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 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