← Back to Editor

#F2811B · #FFBE1A · #B9B421 · #657934 · #2F410D

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

#F2811B

Tangerine · Chocolate · Warm Sun

HEX
#F2811B
RGB
rgb(242, 129, 27)
HSL
hsl(28, 89%, 53%)
HSB
hsb(28, 89%, 95%)
CMYK
cmyk(0%, 47%, 89%, 5%)
Oklch
oklch(71.6% 0.170 54.8)

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

#FFBE1A

Ginger · Orange · Sunflower

HEX
#FFBE1A
RGB
rgb(255, 190, 26)
HSL
hsl(43, 100%, 55%)
HSB
hsb(43, 90%, 100%)
CMYK
cmyk(0%, 25%, 90%, 0%)
Oklch
oklch(83.9% 0.168 82.8)

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

#B9B421

Autumn Sage · GoldenRod · Honey Gold

HEX
#B9B421
RGB
rgb(185, 180, 33)
HSL
hsl(58, 70%, 43%)
HSB
hsb(58, 82%, 73%)
CMYK
cmyk(0%, 3%, 82%, 27%)
Oklch
oklch(75.0% 0.153 107.5)

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

#657934

Grass Green · DarkOliveGreen · Forest Green

HEX
#657934
RGB
rgb(101, 121, 52)
HSL
hsl(77, 40%, 34%)
HSB
hsb(77, 57%, 47%)
CMYK
cmyk(17%, 0%, 57%, 53%)
Oklch
oklch(54.4% 0.098 123.1)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#2F410D

Grass Green · DarkGreen · Dark Green

HEX
#2F410D
RGB
rgb(47, 65, 13)
HSL
hsl(81, 67%, 15%)
HSB
hsb(81, 80%, 25%)
CMYK
cmyk(28%, 0%, 80%, 75%)
Oklch
oklch(34.8% 0.078 126.8)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2811B
1C8EF2

Analogous

F21C24
F2811B
F2EB1C

Triadic

F2811B
1CF280
801CF2

Split-Comp.

F2811B
1CF2EB
1C24F2

Tetradic

F2811B
24F21C
1C8EF2
EB1CF2

Contrast Matrix WCAG 2.1 Contrast

F2811B
FFBE1A
B9B421
657934
2F410D
—
1.6
Fail
1.2
Fail
1.8
Fail
4.2
AA Large
1.6
Fail
—
1.3
Fail
2.9
Fail
6.7
AA
1.2
Fail
1.3
Fail
—
2.2
Fail
5.1
AA
1.8
Fail
2.9
Fail
2.2
Fail
—
2.3
Fail
4.2
AA Large
6.7
AA
5.1
AA
2.3
Fail
—
White BG
2.6Fail
1.7Fail
2.2Fail
4.8AA
11.2AAA
Black BG
7.9AAA
12.6AAA
9.6AAA
4.3AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C034
E3E242
B7B745
6E6E45
37371A

Deuteranopia

C8D03A
E7EC4B
B7B84D
6D6B49
36341D

Tritanopia

EC474B
FC6168
B96167
665255
302426

Achromatopsia

979797
BFBFBF
A5A5A5
6B6B6B
363636

Shades & Tints Shades & Tints

#F2811B

Dark
Light

#FFBE1A

Dark
Light

#B9B421

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2811b;
  --color-2: #ffbe1a;
  --color-3: #b9b421;
  --color-4: #657934;
  --color-5: #2f410d;
}

SCSS

$color-1: #f2811b;
$color-2: #ffbe1a;
$color-3: #b9b421;
$color-4: #657934;
$color-5: #2f410d;

TAILWIND

colors: {
  'brand-1': '#f2811b',
  'brand-2': '#ffbe1a',
  'brand-3': '#b9b421',
  'brand-4': '#657934',
  'brand-5': '#2f410d',
}

RGB Array

[242, 129, 27], [255, 190, 26], [185, 180, 33], [101, 121, 52], [47, 65, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F2811B, #FFBE1A, #B9B421, #657934, #2F410D is ideal for: social media posters, mobile apps, e-commerce promos. 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: #f2811b; --color-2: #ffbe1a; --color-3: #b9b421; --color-4: #657934; --color-5: #2f410d. 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 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