← Back to Editor

#F3E058 · #E8A939 · #D1B275 · #8C7E38 · #050717

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F3E058

Fresh Green · Khaki · Sunflower

HEX
#F3E058
RGB
rgb(243, 224, 88)
HSL
hsl(53, 87%, 65%)
HSB
hsb(53, 64%, 95%)
CMYK
cmyk(0%, 8%, 64%, 5%)
Oklch
oklch(89.8% 0.154 101.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E8A939

Ginger · GoldenRod · Warm Sun

HEX
#E8A939
RGB
rgb(232, 169, 57)
HSL
hsl(38, 79%, 57%)
HSB
hsb(38, 75%, 91%)
CMYK
cmyk(0%, 27%, 75%, 9%)
Oklch
oklch(77.6% 0.143 77.6)

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

#D1B275

Ginger · BurlyWood · Sunflower

HEX
#D1B275
RGB
rgb(209, 178, 117)
HSL
hsl(40, 50%, 64%)
HSB
hsb(40, 44%, 82%)
CMYK
cmyk(0%, 15%, 44%, 18%)
Oklch
oklch(77.7% 0.087 83.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#8C7E38

Autumn Sage · Sienna · Honey Gold

HEX
#8C7E38
RGB
rgb(140, 126, 56)
HSL
hsl(50, 43%, 38%)
HSB
hsb(50, 60%, 55%)
CMYK
cmyk(0%, 10%, 60%, 45%)
Oklch
oklch(59.1% 0.092 98.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#050717

Indigo · Black · Deep Sea Blue

HEX
#050717
RGB
rgb(5, 7, 23)
HSL
hsl(233, 64%, 5%)
HSB
hsb(233, 78%, 9%)
CMYK
cmyk(78%, 70%, 0%, 91%)
Oklch
oklch(13.7% 0.036 273.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E058
586AF3

Analogous

F39458
F3E058
B8F358

Triadic

F3E058
58F3E1
E158F3

Split-Comp.

F3E058
58B8F3
9458F3

Tetradic

F3E058
58F394
586AF3
F358B8

Contrast Matrix WCAG 2.1 Contrast

F3E058
E8A939
D1B275
8C7E38
050717
—
1.5
Fail
1.5
Fail
3.0
AA Large
14.9
AAA
1.5
Fail
—
1.0
Fail
2.0
Fail
9.7
AAA
1.5
Fail
1.0
Fail
—
2.0
Fail
9.9
AAA
3.0
AA Large
2.0
Fail
2.0
Fail
—
4.9
AA
14.9
AAA
9.7
AAA
9.9
AAA
4.9
AA
—
White BG
1.3Fail
2.1Fail
2.0Fail
4.1AA Large
20.0AAA
Black BG
15.6AAA
10.2AAA
10.3AAA
5.2AA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB79
CDCC54
C4C384
868649
060613

Deuteranopia

ECED81
D0D55B
C5C887
87884D
060612

Tritanopia

F29399
E5696E
CF8F92
8B5659
05100F

Achromatopsia

D6D6D6
AFAFAF
B4B4B4
7A7A7A
080808

Shades & Tints Shades & Tints

#F3E058

Dark
Light

#E8A939

Dark
Light

#D1B275

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e058;
  --color-2: #e8a939;
  --color-3: #d1b275;
  --color-4: #8c7e38;
  --color-5: #050717;
}

SCSS

$color-1: #f3e058;
$color-2: #e8a939;
$color-3: #d1b275;
$color-4: #8c7e38;
$color-5: #050717;

TAILWIND

colors: {
  'brand-1': '#f3e058',
  'brand-2': '#e8a939',
  'brand-3': '#d1b275',
  'brand-4': '#8c7e38',
  'brand-5': '#050717',
}

RGB Array

[243, 224, 88], [232, 169, 57], [209, 178, 117], [140, 126, 56], [5, 7, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3E058, #E8A939, #D1B275, #8C7E38, #050717 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f3e058; --color-2: #e8a939; --color-3: #d1b275; --color-4: #8c7e38; --color-5: #050717. 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. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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