← Back to Editor

#FBC072 · #C93C0F · #82783B · #F8B71B · #172734

warm

A 5-color warm 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

#FBC072

Goose Yellow · LightSalmon · Warm Sun

HEX
#FBC072
RGB
rgb(251, 192, 114)
HSL
hsl(34, 94%, 72%)
HSB
hsb(34, 55%, 98%)
CMYK
cmyk(0%, 24%, 55%, 2%)
Oklch
oklch(84.5% 0.117 72.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C93C0F

Tangerine · FireBrick · Amber Brown

HEX
#C93C0F
RGB
rgb(201, 60, 15)
HSL
hsl(15, 86%, 42%)
HSB
hsb(15, 93%, 79%)
CMYK
cmyk(0%, 70%, 93%, 21%)
Oklch
oklch(56.0% 0.185 35.9)

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

#82783B

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#82783B
RGB
rgb(130, 120, 59)
HSL
hsl(52, 38%, 37%)
HSB
hsb(52, 55%, 51%)
CMYK
cmyk(0%, 8%, 55%, 49%)
Oklch
oklch(56.8% 0.083 100.2)

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

#F8B71B

Ginger · Orange · Sunflower

HEX
#F8B71B
RGB
rgb(248, 183, 27)
HSL
hsl(42, 94%, 54%)
HSB
hsb(42, 89%, 97%)
CMYK
cmyk(0%, 26%, 89%, 3%)
Oklch
oklch(81.8% 0.164 81.8)

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

#172734

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#172734
RGB
rgb(23, 39, 52)
HSL
hsl(207, 39%, 15%)
HSB
hsb(207, 56%, 20%)
CMYK
cmyk(56%, 25%, 0%, 80%)
Oklch
oklch(26.5% 0.033 244.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBC072
74AFFB

Analogous

FB7D74
FBC072
F2FB74

Triadic

FBC072
74FBC1
C174FB

Split-Comp.

FBC072
74F2FB
7D74FB

Tetradic

FBC072
74FB7D
74AFFB
FB74F2

Contrast Matrix WCAG 2.1 Contrast

FBC072
C93C0F
82783B
F8B71B
172734
—
3.1
AA Large
2.7
Fail
1.1
Fail
9.4
AAA
3.1
AA Large
—
1.1
Fail
2.8
Fail
3.0
AA Large
2.7
Fail
1.1
Fail
—
2.5
Fail
3.4
AA Large
1.1
Fail
2.8
Fail
2.5
Fail
—
8.6
AAA
9.4
AAA
3.0
AA Large
3.4
AA Large
8.6
AAA
—
White BG
1.6Fail
5.1AA
4.5AA Large
1.8Fail
15.3AAA
Black BG
12.9AAA
4.1AA Large
4.7AA
11.8AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E185
8C8B1A
7E7E4A
DCDB41
1E1E31

Deuteranopia

E5E989
949F1D
7E7F4D
E0E54A
1D1C30

Tritanopia

F89497
C22224
825558
F55F65
182E2E

Achromatopsia

C9C9C9
616161
747474
B9B9B9
242424

Shades & Tints Shades & Tints

#FBC072

Dark
Light

#C93C0F

Dark
Light

#82783B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbc072;
  --color-2: #c93c0f;
  --color-3: #82783b;
  --color-4: #f8b71b;
  --color-5: #172734;
}

SCSS

$color-1: #fbc072;
$color-2: #c93c0f;
$color-3: #82783b;
$color-4: #f8b71b;
$color-5: #172734;

TAILWIND

colors: {
  'brand-1': '#fbc072',
  'brand-2': '#c93c0f',
  'brand-3': '#82783b',
  'brand-4': '#f8b71b',
  'brand-5': '#172734',
}

RGB Array

[251, 192, 114], [201, 60, 15], [130, 120, 59], [248, 183, 27], [23, 39, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FBC072, #C93C0F, #82783B, #F8B71B, #172734 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: #fbc072; --color-2: #c93c0f; --color-3: #82783b; --color-4: #f8b71b; --color-5: #172734. 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 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