#5A4853 + #2E1F24 + #813014 + #C77D1F + #FE950A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5A4853

Rose Purple · DimGray · Camellia

HEX

#5A4853

RGB

rgb(90, 72, 83)

HSL

hsl(323, 11%, 32%)

HSB

hsb(323, 20%, 35%)

CMYK

cmyk(0%, 20%, 8%, 65%)

Oklch

oklch(42.4% 0.030 341.2)

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

#2E1F24

Dark Violet · DarkSlateGray · Raspberry

HEX

#2E1F24

RGB

rgb(46, 31, 36)

HSL

hsl(340, 19%, 15%)

HSB

hsb(340, 33%, 18%)

CMYK

cmyk(0%, 33%, 22%, 82%)

Oklch

oklch(26.0% 0.025 357.2)

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

#813014

Tangerine · Brown · Amber Brown

HEX

#813014

RGB

rgb(129, 48, 20)

HSL

hsl(15, 73%, 29%)

HSB

hsb(15, 84%, 51%)

CMYK

cmyk(0%, 63%, 84%, 49%)

Oklch

oklch(42.1% 0.119 38.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#C77D1F

Ochre · Chocolate · Amber Brown

HEX

#C77D1F

RGB

rgb(199, 125, 31)

HSL

hsl(34, 73%, 45%)

HSB

hsb(34, 84%, 78%)

CMYK

cmyk(0%, 37%, 84%, 22%)

Oklch

oklch(65.4% 0.135 66.1)

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

#FE950A

Ginger · Orange · Warm Sun

HEX

#FE950A

RGB

rgb(254, 149, 10)

HSL

hsl(34, 99%, 52%)

HSB

hsb(34, 96%, 100%)

CMYK

cmyk(0%, 41%, 96%, 0%)

Oklch

oklch(76.4% 0.173 62.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A4853

495B50

Analogous

58495B

5A4853

5B494B

Triadic

5A4853

545B49

49545B

Split-Comp.

5A4853

4B5B49

495B58

Tetradic

5A4853

5B5849

495B50

494B5B

Contrast Matrix WCAG 2.1 Contrast

5A4853	2E1F24	813014	C77D1F	FE950A
—	1.9 Fail	1.1 Fail	2.6 Fail	3.8 AA Large
1.9 Fail	—	1.8 Fail	4.8 AA	7.1 AAA
1.1 Fail	1.8 Fail	—	2.7 Fail	4.0 AA Large
2.6 Fail	4.8 AA	2.7 Fail	—	1.5 Fail
3.8 AA Large	7.1 AAA	4.0 AA Large	1.5 Fail	—

White BG

8.4AAA

15.7AAA

8.9AAA

3.3AA Large

2.2Fail

Black BG

2.5Fail

1.3Fail

2.4Fail

6.4AA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

525250

282723

5E5D1B

A7A636

D1D02C

Deuteranopia

535550

282923

63691C

ABB13B

D7DE34

Tritanopia

594E4E

2D2222

7D2021

C3484C

F9464C

Achromatopsia

4F4F4F

242424

454545

888888

A5A5A5

Shades & Tints Shades & Tints

#5A4853

Dark

Light

#2E1F24

Dark

Light

#813014

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a4853;
  --color-2: #2e1f24;
  --color-3: #813014;
  --color-4: #c77d1f;
  --color-5: #fe950a;
}

SCSS

$color-1: #5a4853;
$color-2: #2e1f24;
$color-3: #813014;
$color-4: #c77d1f;
$color-5: #fe950a;

TAILWIND

colors: {
  'brand-1': '#5a4853',
  'brand-2': '#2e1f24',
  'brand-3': '#813014',
  'brand-4': '#c77d1f',
  'brand-5': '#fe950a',
}

RGB Array

[90, 72, 83], [46, 31, 36], [129, 48, 20], [199, 125, 31], [254, 149, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A4853, #2E1F24, #813014, #C77D1F, #FE950A 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: #5a4853; --color-2: #2e1f24; --color-3: #813014; --color-4: #c77d1f; --color-5: #fe950a. 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