← Back to Editor

#FB9C0E · #97B67D · #C47700 · #D86C00 · #A4912B

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

#FB9C0E

Ginger · Orange · Warm Sun

HEX
#FB9C0E
RGB
rgb(251, 156, 14)
HSL
hsl(36, 97%, 52%)
HSB
hsb(36, 94%, 98%)
CMYK
cmyk(0%, 38%, 94%, 2%)
Oklch
oklch(77.2% 0.169 66.8)

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

#97B67D

Celadon · DarkSeaGreen · Olive Green

HEX
#97B67D
RGB
rgb(151, 182, 125)
HSL
hsl(93, 28%, 60%)
HSB
hsb(93, 31%, 71%)
CMYK
cmyk(17%, 0%, 31%, 29%)
Oklch
oklch(73.9% 0.086 131.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#C47700

Ochre · DarkGoldenRod · Amber Brown

HEX
#C47700
RGB
rgb(196, 119, 0)
HSL
hsl(36, 100%, 38%)
HSB
hsb(36, 100%, 77%)
CMYK
cmyk(0%, 39%, 100%, 23%)
Oklch
oklch(63.8% 0.142 66.2)

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

#D86C00

Ochre · Chocolate · Amber Brown

HEX
#D86C00
RGB
rgb(216, 108, 0)
HSL
hsl(30, 100%, 42%)
HSB
hsb(30, 100%, 85%)
CMYK
cmyk(0%, 50%, 100%, 15%)
Oklch
oklch(64.7% 0.164 53.3)

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

#A4912B

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A4912B
RGB
rgb(164, 145, 43)
HSL
hsl(51, 58%, 41%)
HSB
hsb(51, 74%, 64%)
CMYK
cmyk(0%, 12%, 74%, 36%)
Oklch
oklch(65.5% 0.120 98.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FB9C0E
0E6DFB

Analogous

FB260E
FB9C0E
E4FB0E

Triadic

FB9C0E
0EFB9C
9C0EFB

Split-Comp.

FB9C0E
0EE4FB
260EFB

Tetradic

FB9C0E
0EFB26
0E6DFB
FB0EE4

Contrast Matrix WCAG 2.1 Contrast

FB9C0E
97B67D
C47700
D86C00
A4912B
—
1.1
Fail
1.6
Fail
1.6
Fail
1.5
Fail
1.1
Fail
—
1.6
Fail
1.5
Fail
1.4
Fail
1.6
Fail
1.6
Fail
—
1.0
Fail
1.1
Fail
1.6
Fail
1.5
Fail
1.0
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
2.1Fail
2.3Fail
3.5AA Large
3.5AA Large
3.2AA Large
Black BG
9.9AAA
9.3AAA
6.0AA
6.1AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D130
A4A58B
A3A21D
A9A81A
9C9C44

Deuteranopia

D7DF39
A3A08E
A7AD24
B0B820
9D9E4A

Tritanopia

F64B51
999698
C03439
D32F33
A3575B

Achromatopsia

A8A8A8
A6A6A6
808080
808080
8B8B8B

Shades & Tints Shades & Tints

#FB9C0E

Dark
Light

#97B67D

Dark
Light

#C47700

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fb9c0e;
  --color-2: #97b67d;
  --color-3: #c47700;
  --color-4: #d86c00;
  --color-5: #a4912b;
}

SCSS

$color-1: #fb9c0e;
$color-2: #97b67d;
$color-3: #c47700;
$color-4: #d86c00;
$color-5: #a4912b;

TAILWIND

colors: {
  'brand-1': '#fb9c0e',
  'brand-2': '#97b67d',
  'brand-3': '#c47700',
  'brand-4': '#d86c00',
  'brand-5': '#a4912b',
}

RGB Array

[251, 156, 14], [151, 182, 125], [196, 119, 0], [216, 108, 0], [164, 145, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FB9C0E, #97B67D, #C47700, #D86C00, #A4912B 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: #fb9c0e; --color-2: #97b67d; --color-3: #c47700; --color-4: #d86c00; --color-5: #a4912b. 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