← Back to Editor

#EEC441 · #F3A158 · #DB61A9 · #9B6198 · #716482

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

#EEC441

Ginger · SandyBrown · Sunflower

HEX
#EEC441
RGB
rgb(238, 196, 65)
HSL
hsl(45, 84%, 59%)
HSB
hsb(45, 73%, 93%)
CMYK
cmyk(0%, 18%, 73%, 7%)
Oklch
oklch(83.5% 0.150 90.5)

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

#F3A158

Apricot · SandyBrown · Warm Sun

HEX
#F3A158
RGB
rgb(243, 161, 88)
HSL
hsl(28, 87%, 65%)
HSB
hsb(28, 64%, 95%)
CMYK
cmyk(0%, 34%, 64%, 5%)
Oklch
oklch(77.7% 0.132 60.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DB61A9

Mauve · Orchid · Rose Pink

HEX
#DB61A9
RGB
rgb(219, 97, 169)
HSL
hsl(325, 63%, 62%)
HSB
hsb(325, 56%, 86%)
CMYK
cmyk(0%, 56%, 23%, 14%)
Oklch
oklch(66.5% 0.172 346.3)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#9B6198

Rose Purple · Gray · Violet

HEX
#9B6198
RGB
rgb(155, 97, 152)
HSL
hsl(303, 23%, 49%)
HSB
hsb(303, 37%, 61%)
CMYK
cmyk(0%, 37%, 2%, 39%)
Oklch
oklch(57.5% 0.106 328.7)

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

#716482

Deep Indigo · DimGray · Violet

HEX
#716482
RGB
rgb(113, 100, 130)
HSL
hsl(266, 13%, 45%)
HSB
hsb(266, 23%, 51%)
CMYK
cmyk(13%, 23%, 0%, 49%)
Oklch
oklch(52.7% 0.049 304.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EEC441
3F6BEE

Analogous

EE6B3F
EEC441
C2EE3F

Triadic

EEC441
3FEEC2
C23FEE

Split-Comp.

EEC441
3FC2EE
6B3FEE

Tetradic

EEC441
3FEE6B
3F6BEE
EE3FC2

Contrast Matrix WCAG 2.1 Contrast

EEC441
F3A158
DB61A9
9B6198
716482
—
1.3
Fail
2.0
Fail
2.8
Fail
3.3
AA Large
1.3
Fail
—
1.6
Fail
2.2
Fail
2.6
Fail
2.0
Fail
1.6
Fail
—
1.4
Fail
1.6
Fail
2.8
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
3.3
AA Large
2.6
Fail
1.6
Fail
1.2
Fail
—
White BG
1.7Fail
2.1Fail
3.3AA Large
4.6AA
5.5AA
Black BG
12.6AAA
10.0AAA
6.3AA
4.6AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDB61
CFCF6A
A6A598
82818B
6B6B7B

Deuteranopia

DEE168
D4DA6E
ADB693
858A88
6C6D79

Tritanopia

EC7A7F
EF787B
D58A87
98807E
707574

Achromatopsia

C2C2C2
B1B1B1
8E8E8E
797979
6B6B6B

Shades & Tints Shades & Tints

#EEC441

Dark
Light

#F3A158

Dark
Light

#DB61A9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eec441;
  --color-2: #f3a158;
  --color-3: #db61a9;
  --color-4: #9b6198;
  --color-5: #716482;
}

SCSS

$color-1: #eec441;
$color-2: #f3a158;
$color-3: #db61a9;
$color-4: #9b6198;
$color-5: #716482;

TAILWIND

colors: {
  'brand-1': '#eec441',
  'brand-2': '#f3a158',
  'brand-3': '#db61a9',
  'brand-4': '#9b6198',
  'brand-5': '#716482',
}

RGB Array

[238, 196, 65], [243, 161, 88], [219, 97, 169], [155, 97, 152], [113, 100, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EEC441, #F3A158, #DB61A9, #9B6198, #716482 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: #eec441; --color-2: #f3a158; --color-3: #db61a9; --color-4: #9b6198; --color-5: #716482. 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