← Back to Editor

#FCB40B · #FC870B · #FC540B · #C6511E · #933D16

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

#FCB40B

Ginger · Orange · Sunflower

HEX
#FCB40B
RGB
rgb(252, 180, 11)
HSL
hsl(42, 98%, 52%)
HSB
hsb(42, 96%, 99%)
CMYK
cmyk(0%, 29%, 96%, 1%)
Oklch
oklch(81.7% 0.168 79.3)

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

#FC870B

Ginger · Orange · Warm Sun

HEX
#FC870B
RGB
rgb(252, 135, 11)
HSL
hsl(31, 98%, 52%)
HSB
hsb(31, 96%, 99%)
CMYK
cmyk(0%, 46%, 96%, 1%)
Oklch
oklch(73.9% 0.178 56.3)

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

#FC540B

Tangerine · OrangeRed · Warm Sun

HEX
#FC540B
RGB
rgb(252, 84, 11)
HSL
hsl(18, 98%, 52%)
HSB
hsb(18, 96%, 99%)
CMYK
cmyk(0%, 67%, 96%, 1%)
Oklch
oklch(67.0% 0.215 38.2)

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

#C6511E

Tangerine · Chocolate · Amber Brown

HEX
#C6511E
RGB
rgb(198, 81, 30)
HSL
hsl(18, 74%, 45%)
HSB
hsb(18, 85%, 78%)
CMYK
cmyk(0%, 59%, 85%, 22%)
Oklch
oklch(58.1% 0.162 41.1)

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

#933D16

Tangerine · Brown · Amber Brown

HEX
#933D16
RGB
rgb(147, 61, 22)
HSL
hsl(19, 74%, 33%)
HSB
hsb(19, 85%, 58%)
CMYK
cmyk(0%, 59%, 85%, 42%)
Oklch
oklch(47.1% 0.126 42.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCB40B
0D55FD

Analogous

FD3D0D
FCB40B
CDFD0D

Triadic

FCB40B
0DFDB5
B50DFD

Split-Comp.

FCB40B
0DCDFD
3D0DFD

Tetradic

FCB40B
0DFD3D
0D55FD
FD0DCD

Contrast Matrix WCAG 2.1 Contrast

FCB40B
FC870B
FC540B
C6511E
933D16
—
1.4
Fail
1.8
Fail
2.5
Fail
4.0
AA Large
1.4
Fail
—
1.3
Fail
1.9
Fail
2.9
Fail
1.8
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
2.5
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
4.0
AA Large
2.9
Fail
2.2
Fail
1.6
Fail
—
White BG
1.8Fail
2.4Fail
3.3AA Large
4.6AA
7.2AAA
Black BG
11.7AAA
8.6AAA
6.4AA
4.6AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDC34
C9C829
B3B21D
93922A
6E6D1F

Deuteranopia

E1E63E
D0D930
BDCA21
9AA32D
737922

Tritanopia

F8545B
F64146
F42B2E
C03436
8F2729

Achromatopsia

B6B6B6
9C9C9C
7E7E7E
6E6E6E
525252

Shades & Tints Shades & Tints

#FCB40B

Dark
Light

#FC870B

Dark
Light

#FC540B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcb40b;
  --color-2: #fc870b;
  --color-3: #fc540b;
  --color-4: #c6511e;
  --color-5: #933d16;
}

SCSS

$color-1: #fcb40b;
$color-2: #fc870b;
$color-3: #fc540b;
$color-4: #c6511e;
$color-5: #933d16;

TAILWIND

colors: {
  'brand-1': '#fcb40b',
  'brand-2': '#fc870b',
  'brand-3': '#fc540b',
  'brand-4': '#c6511e',
  'brand-5': '#933d16',
}

RGB Array

[252, 180, 11], [252, 135, 11], [252, 84, 11], [198, 81, 30], [147, 61, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FCB40B, #FC870B, #FC540B, #C6511E, #933D16 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: #fcb40b; --color-2: #fc870b; --color-3: #fc540b; --color-4: #c6511e; --color-5: #933d16. 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