← Back to Editor

#FEA51C · #493731 · #7562A1 · #332431 · #141A0D

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

#FEA51C

Ginger · Orange · Warm Sun

HEX
#FEA51C
RGB
rgb(254, 165, 28)
HSL
hsl(36, 99%, 55%)
HSB
hsb(36, 89%, 100%)
CMYK
cmyk(0%, 35%, 89%, 0%)
Oklch
oklch(79.2% 0.166 69.7)

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

#493731

Tangerine · DarkSlateGray · Cinnamon

HEX
#493731
RGB
rgb(73, 55, 49)
HSL
hsl(15, 20%, 24%)
HSB
hsb(15, 33%, 29%)
CMYK
cmyk(0%, 25%, 33%, 71%)
Oklch
oklch(35.5% 0.028 39.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#7562A1

Deep Indigo · SlateGray · Navy Blue

HEX
#7562A1
RGB
rgb(117, 98, 161)
HSL
hsl(258, 25%, 51%)
HSB
hsb(258, 39%, 63%)
CMYK
cmyk(27%, 39%, 0%, 37%)
Oklch
oklch(54.1% 0.098 296.9)

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

#332431

Rose Purple · DarkSlateGray · Dark Purple

HEX
#332431
RGB
rgb(51, 36, 49)
HSL
hsl(308, 17%, 17%)
HSB
hsb(308, 29%, 20%)
CMYK
cmyk(0%, 29%, 4%, 80%)
Oklch
oklch(28.4% 0.032 331.0)

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

#141A0D

Grass Green · Black · Dark Green

HEX
#141A0D
RGB
rgb(20, 26, 13)
HSL
hsl(88, 33%, 8%)
HSB
hsb(88, 50%, 10%)
CMYK
cmyk(23%, 0%, 50%, 90%)
Oklch
oklch(20.7% 0.026 128.6)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEA51C
1B76FE

Analogous

FE311B
FEA51C
E7FE1B

Triadic

FEA51C
1BFEA3
A31BFE

Split-Comp.

FEA51C
1BE7FE
311BFE

Tetradic

FEA51C
1BFE31
1B76FE
FE1BE7

Contrast Matrix WCAG 2.1 Contrast

FEA51C
493731
7562A1
332431
141A0D
—
5.7
AA
2.6
Fail
7.4
AAA
9.0
AAA
5.7
AA
—
2.1
Fail
1.3
Fail
1.6
Fail
2.6
Fail
2.1
Fail
—
2.8
Fail
3.4
AA Large
7.4
AAA
1.3
Fail
2.8
Fail
—
1.2
Fail
9.0
AAA
1.6
Fail
3.4
AA Large
1.2
Fail
—
White BG
2.0Fail
11.2AAA
5.2AA
14.6AAA
17.7AAA
Black BG
10.6AAA
1.9Fail
4.0AA Large
1.4Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D73D
414132
6D6D92
2D2C2E
171710

Deuteranopia

DDE345
424433
6E6F8E
2D2E2D
161611

Tritanopia

FA575D
483434
748683
322B2B
141313

Achromatopsia

B0B0B0
3C3C3C
6F6F6F
2A2A2A
171717

Shades & Tints Shades & Tints

#FEA51C

Dark
Light

#493731

Dark
Light

#7562A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fea51c;
  --color-2: #493731;
  --color-3: #7562a1;
  --color-4: #332431;
  --color-5: #141a0d;
}

SCSS

$color-1: #fea51c;
$color-2: #493731;
$color-3: #7562a1;
$color-4: #332431;
$color-5: #141a0d;

TAILWIND

colors: {
  'brand-1': '#fea51c',
  'brand-2': '#493731',
  'brand-3': '#7562a1',
  'brand-4': '#332431',
  'brand-5': '#141a0d',
}

RGB Array

[254, 165, 28], [73, 55, 49], [117, 98, 161], [51, 36, 49], [20, 26, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEA51C, #493731, #7562A1, #332431, #141A0D 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: #fea51c; --color-2: #493731; --color-3: #7562a1; --color-4: #332431; --color-5: #141a0d. 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