← Back to Editor

#F5E97C · #D54307 · #372706 · #FFA509 · #5C5A0F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F5E97C

Fresh Green · Khaki · Sunflower

HEX
#F5E97C
RGB
rgb(245, 233, 124)
HSL
hsl(54, 86%, 72%)
HSB
hsb(54, 49%, 96%)
CMYK
cmyk(0%, 5%, 49%, 4%)
Oklch
oklch(92.2% 0.131 103.0)

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

#D54307

Tangerine · OrangeRed · Amber Brown

HEX
#D54307
RGB
rgb(213, 67, 7)
HSL
hsl(17, 94%, 43%)
HSB
hsb(17, 97%, 84%)
CMYK
cmyk(0%, 69%, 97%, 16%)
Oklch
oklch(58.7% 0.191 37.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#372706

Ochre · Black · Amber Gold

HEX
#372706
RGB
rgb(55, 39, 6)
HSL
hsl(40, 80%, 12%)
HSB
hsb(40, 89%, 22%)
CMYK
cmyk(0%, 29%, 89%, 78%)
Oklch
oklch(28.5% 0.052 81.6)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#FFA509

Ginger · Orange · Warm Sun

HEX
#FFA509
RGB
rgb(255, 165, 9)
HSL
hsl(38, 100%, 52%)
HSB
hsb(38, 96%, 100%)
CMYK
cmyk(0%, 35%, 96%, 0%)
Oklch
oklch(79.3% 0.170 70.4)

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

#5C5A0F

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#5C5A0F
RGB
rgb(92, 90, 15)
HSL
hsl(58, 72%, 21%)
HSB
hsb(58, 84%, 36%)
CMYK
cmyk(0%, 2%, 84%, 64%)
Oklch
oklch(45.5% 0.091 107.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5E97C
7A86F5

Analogous

F5AB7A
F5E97C
C4F57A

Triadic

F5E97C
7AF5E9
E97AF5

Split-Comp.

F5E97C
7AC4F5
AB7AF5

Tetradic

F5E97C
7AF5AB
7A86F5
F57AC4

Contrast Matrix WCAG 2.1 Contrast

F5E97C
D54307
372706
FFA509
5C5A0F
—
3.6
AA Large
11.6
AAA
1.6
Fail
5.8
AA
3.6
AA Large
—
3.2
AA Large
2.3
Fail
1.6
Fail
11.6
AAA
3.2
AA Large
—
7.3
AAA
2.0
Fail
1.6
Fail
2.3
Fail
7.3
AAA
—
3.6
AA Large
5.8
AA
1.6
Fail
2.0
Fail
3.6
AA Large
—
White BG
1.2Fail
4.5AA
14.4AAA
2.0Fail
7.2AAA
Black BG
16.8AAA
4.6AA
1.5Fail
10.6AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F096
969416
30300E
D8D72F
5B5B21

Deuteranopia

F1F19D
9EA919
313210
DDE438
5B5B26

Tritanopia

F4ABB0
CE2124
361416
FB4D53
5C2F33

Achromatopsia

E0E0E0
686868
282828
AEAEAE
525252

Shades & Tints Shades & Tints

#F5E97C

Dark
Light

#D54307

Dark
Light

#372706

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5e97c;
  --color-2: #d54307;
  --color-3: #372706;
  --color-4: #ffa509;
  --color-5: #5c5a0f;
}

SCSS

$color-1: #f5e97c;
$color-2: #d54307;
$color-3: #372706;
$color-4: #ffa509;
$color-5: #5c5a0f;

TAILWIND

colors: {
  'brand-1': '#f5e97c',
  'brand-2': '#d54307',
  'brand-3': '#372706',
  'brand-4': '#ffa509',
  'brand-5': '#5c5a0f',
}

RGB Array

[245, 233, 124], [213, 67, 7], [55, 39, 6], [255, 165, 9], [92, 90, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5E97C, #D54307, #372706, #FFA509, #5C5A0F 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: #f5e97c; --color-2: #d54307; --color-3: #372706; --color-4: #ffa509; --color-5: #5c5a0f. 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