← Back to Editor

#FEC321 · #C4B44B · #89A187 · #778888 · #574F6E

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

#FEC321

Ginger · Gold · Sunflower

HEX
#FEC321
RGB
rgb(254, 195, 33)
HSL
hsl(44, 99%, 56%)
HSB
hsb(44, 87%, 100%)
CMYK
cmyk(0%, 23%, 87%, 0%)
Oklch
oklch(84.8% 0.168 85.5)

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

#C4B44B

Autumn Sage · GoldenRod · Sunflower

HEX
#C4B44B
RGB
rgb(196, 180, 75)
HSL
hsl(52, 51%, 53%)
HSB
hsb(52, 62%, 77%)
CMYK
cmyk(0%, 8%, 62%, 23%)
Oklch
oklch(76.3% 0.126 100.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#89A187

Celadon · DarkSeaGreen · Olive Green

HEX
#89A187
RGB
rgb(137, 161, 135)
HSL
hsl(115, 12%, 58%)
HSB
hsb(115, 16%, 63%)
CMYK
cmyk(15%, 0%, 16%, 37%)
Oklch
oklch(68.3% 0.046 143.0)

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

#778888

Ink Gray · SlateGray · Warm Gray

HEX
#778888
RGB
rgb(119, 136, 136)
HSL
hsl(180, 7%, 50%)
HSB
hsb(180, 12%, 53%)
CMYK
cmyk(12%, 0%, 0%, 47%)
Oklch
oklch(61.3% 0.020 196.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#574F6E

Deep Indigo · DimGray · Prussian Blue

HEX
#574F6E
RGB
rgb(87, 79, 110)
HSL
hsl(255, 16%, 37%)
HSB
hsb(255, 28%, 43%)
CMYK
cmyk(21%, 28%, 0%, 57%)
Oklch
oklch(44.8% 0.051 296.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC321
205BFE

Analogous

FE5420
FEC321
CAFE20

Triadic

FEC321
20FEC3
C320FE

Split-Comp.

FEC321
20CAFE
5420FE

Tetradic

FEC321
20FE54
205BFE
FE20CA

Contrast Matrix WCAG 2.1 Contrast

FEC321
C4B44B
89A187
778888
574F6E
—
1.3
Fail
1.7
Fail
2.3
Fail
4.7
AA
1.3
Fail
—
1.3
Fail
1.8
Fail
3.6
AA Large
1.7
Fail
1.3
Fail
—
1.3
Fail
2.7
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
2.1
Fail
4.7
AA
3.6
AA Large
2.7
Fail
2.1
Fail
—
White BG
1.6Fail
2.1Fail
2.8Fail
3.7AA Large
7.6AAA
Black BG
13.0AAA
10.0AAA
7.5AAA
5.7AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E448
BDBD64
93948D
7E7F88
545366

Deuteranopia

E8EC52
BEBF6B
92908F
7D7C88
545565

Tritanopia

FB676E
C3787D
8A9293
788888
57615F

Achromatopsia

C2C2C2
ADADAD
979797
838383
555555

Shades & Tints Shades & Tints

#FEC321

Dark
Light

#C4B44B

Dark
Light

#89A187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec321;
  --color-2: #c4b44b;
  --color-3: #89a187;
  --color-4: #778888;
  --color-5: #574f6e;
}

SCSS

$color-1: #fec321;
$color-2: #c4b44b;
$color-3: #89a187;
$color-4: #778888;
$color-5: #574f6e;

TAILWIND

colors: {
  'brand-1': '#fec321',
  'brand-2': '#c4b44b',
  'brand-3': '#89a187',
  'brand-4': '#778888',
  'brand-5': '#574f6e',
}

RGB Array

[254, 195, 33], [196, 180, 75], [137, 161, 135], [119, 136, 136], [87, 79, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEC321, #C4B44B, #89A187, #778888, #574F6E 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: #fec321; --color-2: #c4b44b; --color-3: #89a187; --color-4: #778888; --color-5: #574f6e. 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