← Back to Editor

#9C8553 · #D89858 · #E6C383 · #9A340C · #380F00

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 AppData Visualization

Color Details Color Details

#9C8553

Ochre · Gray · Honey Gold

HEX
#9C8553
RGB
rgb(156, 133, 83)
HSL
hsl(41, 31%, 47%)
HSB
hsb(41, 47%, 61%)
CMYK
cmyk(0%, 15%, 47%, 39%)
Oklch
oklch(62.6% 0.073 85.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#D89858

Ginger · SandyBrown · Warm Sun

HEX
#D89858
RGB
rgb(216, 152, 88)
HSL
hsl(30, 62%, 60%)
HSB
hsb(30, 59%, 85%)
CMYK
cmyk(0%, 30%, 59%, 15%)
Oklch
oklch(72.9% 0.112 64.5)

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

#E6C383

Goose Yellow · BurlyWood · Warm Sun

HEX
#E6C383
RGB
rgb(230, 195, 131)
HSL
hsl(39, 66%, 71%)
HSB
hsb(39, 43%, 90%)
CMYK
cmyk(0%, 15%, 43%, 10%)
Oklch
oklch(83.3% 0.091 82.0)

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

#9A340C

Tangerine · Brown · Amber Brown

HEX
#9A340C
RGB
rgb(154, 52, 12)
HSL
hsl(17, 86%, 33%)
HSB
hsb(17, 92%, 60%)
CMYK
cmyk(0%, 66%, 92%, 40%)
Oklch
oklch(46.9% 0.144 38.5)

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

#380F00

Tangerine · Black · Cinnamon

HEX
#380F00
RGB
rgb(56, 15, 0)
HSL
hsl(16, 100%, 11%)
HSB
hsb(16, 100%, 22%)
CMYK
cmyk(0%, 73%, 100%, 78%)
Oklch
oklch(23.5% 0.071 42.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C8553
536A9D

Analogous

9D6053
9C8553
8F9D53

Triadic

9C8553
539D85
85539D

Split-Comp.

9C8553
538F9D
60539D

Tetradic

9C8553
539D60
536A9D
9D538F

Contrast Matrix WCAG 2.1 Contrast

9C8553
D89858
E6C383
9A340C
380F00
—
1.5
Fail
2.1
Fail
2.1
Fail
4.8
AA
1.5
Fail
—
1.5
Fail
3.0
Fail
6.9
AA
2.1
Fail
1.5
Fail
—
4.4
AA Large
10.1
AAA
2.1
Fail
3.0
Fail
4.4
AA Large
—
2.3
Fail
4.8
AA
6.9
AA
10.1
AAA
2.3
Fail
—
White BG
3.6AA Large
2.5Fail
1.7Fail
7.3AAA
17.0AAA
Black BG
5.9AA
8.6AAA
12.5AAA
2.9Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

92925F
BCBC67
D7D792
6E6D16
262604

Deuteranopia

939562
C0C56B
D9DC96
747B18
292C05

Tritanopia

9B696B
D57476
E49FA1
951D1F
360607

Achromatopsia

868686
A4A4A4
C6C6C6
4E4E4E
1A1A1A

Shades & Tints Shades & Tints

#9C8553

Dark
Light

#D89858

Dark
Light

#E6C383

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c8553;
  --color-2: #d89858;
  --color-3: #e6c383;
  --color-4: #9a340c;
  --color-5: #380f00;
}

SCSS

$color-1: #9c8553;
$color-2: #d89858;
$color-3: #e6c383;
$color-4: #9a340c;
$color-5: #380f00;

TAILWIND

colors: {
  'brand-1': '#9c8553',
  'brand-2': '#d89858',
  'brand-3': '#e6c383',
  'brand-4': '#9a340c',
  'brand-5': '#380f00',
}

RGB Array

[156, 133, 83], [216, 152, 88], [230, 195, 131], [154, 52, 12], [56, 15, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #9C8553, #D89858, #E6C383, #9A340C, #380F00 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: #9c8553; --color-2: #d89858; --color-3: #e6c383; --color-4: #9a340c; --color-5: #380f00. 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