← Back to Editor

#F0B834 · #C57129 · #B3342E · #A20416 · #462714

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F0B834

Ginger · GoldenRod · Sunflower

HEX
#F0B834
RGB
rgb(240, 184, 52)
HSL
hsl(42, 86%, 57%)
HSB
hsb(42, 78%, 94%)
CMYK
cmyk(0%, 23%, 78%, 6%)
Oklch
oklch(81.3% 0.152 83.9)

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

#C57129

Tangerine · Chocolate · Amber Brown

HEX
#C57129
RGB
rgb(197, 113, 41)
HSL
hsl(28, 66%, 47%)
HSB
hsb(28, 79%, 77%)
CMYK
cmyk(0%, 43%, 79%, 23%)
Oklch
oklch(63.0% 0.134 56.6)

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

#B3342E

Crimson · Brown · Passion Red

HEX
#B3342E
RGB
rgb(179, 52, 46)
HSL
hsl(3, 59%, 44%)
HSB
hsb(3, 74%, 70%)
CMYK
cmyk(0%, 71%, 74%, 30%)
Oklch
oklch(51.6% 0.165 27.3)

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

#A20416

Vermilion · DarkRed · Wine Red

HEX
#A20416
RGB
rgb(162, 4, 22)
HSL
hsl(353, 95%, 33%)
HSB
hsb(353, 98%, 64%)
CMYK
cmyk(0%, 98%, 86%, 36%)
Oklch
oklch(45.0% 0.181 25.7)

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

#462714

Tangerine · Maroon · Cinnamon

HEX
#462714
RGB
rgb(70, 39, 20)
HSL
hsl(23, 56%, 18%)
HSB
hsb(23, 71%, 27%)
CMYK
cmyk(0%, 44%, 71%, 73%)
Oklch
oklch(30.8% 0.056 50.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0B834
336CF0

Analogous

F05933
F0B834
CAF033

Triadic

F0B834
33F0B7
B733F0

Split-Comp.

F0B834
33CAF0
5933F0

Tetradic

F0B834
33F059
336CF0
F033CA

Contrast Matrix WCAG 2.1 Contrast

F0B834
C57129
B3342E
A20416
462714
—
2.0
Fail
3.4
AA Large
4.5
AA
7.4
AAA
2.0
Fail
—
1.7
Fail
2.2
Fail
3.7
AA Large
3.4
AA Large
1.7
Fail
—
1.3
Fail
2.2
Fail
4.5
AA
2.2
Fail
1.3
Fail
—
1.6
Fail
7.4
AAA
3.7
AA Large
2.2
Fail
1.6
Fail
—
White BG
1.8Fail
3.6AA Large
6.1AA
8.2AAA
13.5AAA
Black BG
11.6AAA
5.8AA
3.4AA Large
2.6Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D754
A1A03A
7C7B2F
5E5C12
393819

Deuteranopia

DBDF5C
A6AC3F
838D30
677311
3A3D1A

Tritanopia

ED6D73
C1484B
AD3131
9A0E0D
441C1D

Achromatopsia

BABABA
828282
595959
353535
2E2E2E

Shades & Tints Shades & Tints

#F0B834

Dark
Light

#C57129

Dark
Light

#B3342E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0b834;
  --color-2: #c57129;
  --color-3: #b3342e;
  --color-4: #a20416;
  --color-5: #462714;
}

SCSS

$color-1: #f0b834;
$color-2: #c57129;
$color-3: #b3342e;
$color-4: #a20416;
$color-5: #462714;

TAILWIND

colors: {
  'brand-1': '#f0b834',
  'brand-2': '#c57129',
  'brand-3': '#b3342e',
  'brand-4': '#a20416',
  'brand-5': '#462714',
}

RGB Array

[240, 184, 52], [197, 113, 41], [179, 52, 46], [162, 4, 22], [70, 39, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F0B834, #C57129, #B3342E, #A20416, #462714 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #f0b834; --color-2: #c57129; --color-3: #b3342e; --color-4: #a20416; --color-5: #462714. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 warm-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