#587264 + #2E2231 + #96153F + #F64D2A + #FEA40B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#587264

Celadon · DimGray · Forest Green

HEX

#587264

RGB

rgb(88, 114, 100)

HSL

hsl(148, 13%, 40%)

HSB

hsb(148, 23%, 45%)

CMYK

cmyk(23%, 0%, 12%, 55%)

Oklch

oklch(52.7% 0.038 161.3)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#2E2231

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2E2231

RGB

rgb(46, 34, 49)

HSL

hsl(288, 18%, 16%)

HSB

hsb(288, 31%, 19%)

CMYK

cmyk(6%, 31%, 0%, 81%)

Oklch

oklch(27.3% 0.032 319.5)

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

#96153F

Dark Violet · Brown · Camellia

HEX

#96153F

RGB

rgb(150, 21, 63)

HSL

hsl(340, 75%, 34%)

HSB

hsb(340, 86%, 59%)

CMYK

cmyk(0%, 86%, 58%, 41%)

Oklch

oklch(44.0% 0.162 9.3)

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

#F64D2A

Vermilion · Tomato · Passion Red

HEX

#F64D2A

RGB

rgb(246, 77, 42)

HSL

hsl(10, 92%, 56%)

HSB

hsb(10, 83%, 96%)

CMYK

cmyk(0%, 69%, 83%, 4%)

Oklch

oklch(65.5% 0.211 33.4)

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

#FEA40B

Ginger · Orange · Warm Sun

HEX

#FEA40B

RGB

rgb(254, 164, 11)

HSL

hsl(38, 99%, 52%)

HSB

hsb(38, 96%, 100%)

CMYK

cmyk(0%, 35%, 96%, 0%)

Oklch

oklch(79.0% 0.169 70.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

587264

735967

Analogous

5A7359

587264

597372

Triadic

587264

655973

736559

Split-Comp.

587264

725973

73595A

Tetradic

587264

595A73

735967

737259

Contrast Matrix WCAG 2.1 Contrast

587264	2E2231	96153F	F64D2A	FEA40B
—	2.9 Fail	1.6 Fail	1.5 Fail	2.6 Fail
2.9 Fail	—	1.8 Fail	4.3 AA Large	7.6 AAA
1.6 Fail	1.8 Fail	—	2.4 Fail	4.3 AA Large
1.5 Fail	4.3 AA Large	2.4 Fail	—	1.8 Fail
2.6 Fail	7.6 AAA	4.3 AA Large	1.8 Fail	—

White BG

5.2AA

15.1AAA

8.5AAA

3.5AA Large

2.0Fail

Black BG

4.0AA Large

1.4Fail

2.5Fail

6.0AA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636367

29292D

5E5D35

ADAB32

D7D630

Deuteranopia

626068

2A2A2D

666F32

B7C335

DCE339

Tritanopia

596A6B

2D2B2A

902D2B

EE393B

F94D54

Achromatopsia

696969

272727

404040

7C7C7C

ADADAD

Shades & Tints Shades & Tints

#587264

Dark

Light

#2E2231

Dark

Light

#96153F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #587264;
  --color-2: #2e2231;
  --color-3: #96153f;
  --color-4: #f64d2a;
  --color-5: #fea40b;
}

SCSS

$color-1: #587264;
$color-2: #2e2231;
$color-3: #96153f;
$color-4: #f64d2a;
$color-5: #fea40b;

TAILWIND

colors: {
  'brand-1': '#587264',
  'brand-2': '#2e2231',
  'brand-3': '#96153f',
  'brand-4': '#f64d2a',
  'brand-5': '#fea40b',
}

RGB Array

[88, 114, 100], [46, 34, 49], [150, 21, 63], [246, 77, 42], [254, 164, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #587264, #2E2231, #96153F, #F64D2A, #FEA40B 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: #587264; --color-2: #2e2231; --color-3: #96153f; --color-4: #f64d2a; --color-5: #fea40b. 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