← Back to Editor

#F34D00 · #F39A3A · #FFFB7A · #9B9A85 · #573E3F

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

#F34D00

Tangerine · OrangeRed · Amber Brown

HEX
#F34D00
RGB
rgb(243, 77, 0)
HSL
hsl(19, 100%, 48%)
HSB
hsb(19, 100%, 95%)
CMYK
cmyk(0%, 68%, 100%, 5%)
Oklch
oklch(64.8% 0.212 37.9)

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

#F39A3A

Ginger · Coral · Warm Sun

HEX
#F39A3A
RGB
rgb(243, 154, 58)
HSL
hsl(31, 89%, 59%)
HSB
hsb(31, 76%, 95%)
CMYK
cmyk(0%, 37%, 76%, 5%)
Oklch
oklch(76.1% 0.150 63.5)

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

#FFFB7A

Fresh Green · Khaki · Sunflower

HEX
#FFFB7A
RGB
rgb(255, 251, 122)
HSL
hsl(58, 100%, 74%)
HSB
hsb(58, 52%, 100%)
CMYK
cmyk(0%, 2%, 52%, 0%)
Oklch
oklch(96.6% 0.151 107.3)

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

#9B9A85

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9B9A85
RGB
rgb(155, 154, 133)
HSL
hsl(57, 10%, 56%)
HSB
hsb(57, 14%, 61%)
CMYK
cmyk(0%, 1%, 14%, 39%)
Oklch
oklch(68.1% 0.030 104.9)

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

#573E3F

Crimson · DarkSlateGray · Wine Red

HEX
#573E3F
RGB
rgb(87, 62, 63)
HSL
hsl(358, 17%, 29%)
HSB
hsb(358, 29%, 34%)
CMYK
cmyk(0%, 29%, 28%, 66%)
Oklch
oklch(39.2% 0.035 16.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F34D00
00A7F5

Analogous

F5002D
F34D00
F5C800

Triadic

F34D00
00F54E
4E00F5

Split-Comp.

F34D00
00F5C8
002DF5

Tetradic

F34D00
2DF500
00A7F5
C800F5

Contrast Matrix WCAG 2.1 Contrast

F34D00
F39A3A
FFFB7A
9B9A85
573E3F
—
1.6
Fail
3.3
AA Large
1.3
Fail
2.7
Fail
1.6
Fail
—
2.0
Fail
1.3
Fail
4.4
AA Large
3.3
AA Large
2.0
Fail
—
2.6
Fail
8.9
AAA
1.3
Fail
1.3
Fail
2.6
Fail
—
3.4
AA Large
2.7
Fail
4.4
AA Large
8.9
AAA
3.4
AA Large
—
White BG
3.6AA Large
2.2Fail
1.1Fail
2.9Fail
9.7AAA
Black BG
5.9AA
9.5AAA
19.3AAA
7.4AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA13
CCCC51
FDFD99
9B9B8A
4C4C3F

Deuteranopia

B5C117
D2D857
FEFEA1
9B9B8B
4E503F

Tritanopia

EB2125
EF6468
FFB2B7
9B8E8F
563F3F

Achromatopsia

767676
AAAAAA
EDEDED
989898
464646

Shades & Tints Shades & Tints

#F34D00

Dark
Light

#F39A3A

Dark
Light

#FFFB7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f34d00;
  --color-2: #f39a3a;
  --color-3: #fffb7a;
  --color-4: #9b9a85;
  --color-5: #573e3f;
}

SCSS

$color-1: #f34d00;
$color-2: #f39a3a;
$color-3: #fffb7a;
$color-4: #9b9a85;
$color-5: #573e3f;

TAILWIND

colors: {
  'brand-1': '#f34d00',
  'brand-2': '#f39a3a',
  'brand-3': '#fffb7a',
  'brand-4': '#9b9a85',
  'brand-5': '#573e3f',
}

RGB Array

[243, 77, 0], [243, 154, 58], [255, 251, 122], [155, 154, 133], [87, 62, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F34D00, #F39A3A, #FFFB7A, #9B9A85, #573E3F 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: #f34d00; --color-2: #f39a3a; --color-3: #fffb7a; --color-4: #9b9a85; --color-5: #573e3f. 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