← Back to Editor

#FEC50B · #DEA43A · #B97D6F · #9B5F9F · #7D40BF

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 Library

Color Details Color Details

#FEC50B

Ginger · Gold · Sunflower

HEX
#FEC50B
RGB
rgb(254, 197, 11)
HSL
hsl(46, 99%, 52%)
HSB
hsb(46, 96%, 100%)
CMYK
cmyk(0%, 22%, 96%, 0%)
Oklch
oklch(85.1% 0.173 87.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DEA43A

Ginger · GoldenRod · Warm Sun

HEX
#DEA43A
RGB
rgb(222, 164, 58)
HSL
hsl(39, 71%, 55%)
HSB
hsb(39, 74%, 87%)
CMYK
cmyk(0%, 26%, 74%, 13%)
Oklch
oklch(75.5% 0.136 78.6)

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

#B97D6F

Crimson · DarkSalmon · Passion Red

HEX
#B97D6F
RGB
rgb(185, 125, 111)
HSL
hsl(11, 35%, 58%)
HSB
hsb(11, 40%, 73%)
CMYK
cmyk(0%, 32%, 40%, 27%)
Oklch
oklch(64.7% 0.078 33.7)

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

#9B5F9F

Dark Plum · Gray · Violet

HEX
#9B5F9F
RGB
rgb(155, 95, 159)
HSL
hsl(296, 25%, 50%)
HSB
hsb(296, 40%, 62%)
CMYK
cmyk(3%, 40%, 0%, 38%)
Oklch
oklch(57.5% 0.117 324.7)

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

#7D40BF

Deep Indigo · DarkOrchid · Violet

HEX
#7D40BF
RGB
rgb(125, 64, 191)
HSL
hsl(269, 50%, 50%)
HSB
hsb(269, 66%, 75%)
CMYK
cmyk(35%, 66%, 0%, 25%)
Oklch
oklch(51.3% 0.191 302.1)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC50B
0B44FE

Analogous

FE4C0B
FEC50B
BDFE0B

Triadic

FEC50B
0BFEC5
C50BFE

Split-Comp.

FEC50B
0BBDFE
4C0BFE

Tetradic

FEC50B
0BFE4C
0B44FE
FE0BBD

Contrast Matrix WCAG 2.1 Contrast

FEC50B
DEA43A
B97D6F
9B5F9F
7D40BF
—
1.4
Fail
2.1
Fail
2.9
Fail
3.9
AA Large
1.4
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
2.1
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
3.9
AA Large
2.8
Fail
1.9
Fail
1.3
Fail
—
White BG
1.6Fail
2.2Fail
3.4AA Large
4.6AA
6.3AA
Black BG
13.2AAA
9.5AAA
6.2AA
4.5AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E538
C5C454
9F9E72
818090
6362A0

Deuteranopia

E9ED43
C8CD5A
A3A773
85898C
666B99

Tritanopia

FB5C63
DB686C
B67576
988381
7A8883

Achromatopsia

C1C1C1
A9A9A9
8D8D8D
787878
616161

Shades & Tints Shades & Tints

#FEC50B

Dark
Light

#DEA43A

Dark
Light

#B97D6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec50b;
  --color-2: #dea43a;
  --color-3: #b97d6f;
  --color-4: #9b5f9f;
  --color-5: #7d40bf;
}

SCSS

$color-1: #fec50b;
$color-2: #dea43a;
$color-3: #b97d6f;
$color-4: #9b5f9f;
$color-5: #7d40bf;

TAILWIND

colors: {
  'brand-1': '#fec50b',
  'brand-2': '#dea43a',
  'brand-3': '#b97d6f',
  'brand-4': '#9b5f9f',
  'brand-5': '#7d40bf',
}

RGB Array

[254, 197, 11], [222, 164, 58], [185, 125, 111], [155, 95, 159], [125, 64, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEC50B, #DEA43A, #B97D6F, #9B5F9F, #7D40BF is ideal for: corporate websites, product showcases, portfolios. 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: #fec50b; --color-2: #dea43a; --color-3: #b97d6f; --color-4: #9b5f9f; --color-5: #7d40bf. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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