← Back to Editor

#9C580F · #C5B22F · #D5B978 · #E6C4A9 · #D56C7A

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

#9C580F

Ochre · Sienna · Amber Brown

HEX
#9C580F
RGB
rgb(156, 88, 15)
HSL
hsl(31, 82%, 34%)
HSB
hsb(31, 90%, 61%)
CMYK
cmyk(0%, 44%, 90%, 39%)
Oklch
oklch(52.9% 0.118 59.9)

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

#C5B22F

Autumn Sage · GoldenRod · Honey Gold

HEX
#C5B22F
RGB
rgb(197, 178, 47)
HSL
hsl(52, 61%, 48%)
HSB
hsb(52, 76%, 77%)
CMYK
cmyk(0%, 10%, 76%, 23%)
Oklch
oklch(75.8% 0.144 100.6)

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

#D5B978

Ginger · BurlyWood · Sunflower

HEX
#D5B978
RGB
rgb(213, 185, 120)
HSL
hsl(42, 53%, 65%)
HSB
hsb(42, 44%, 84%)
CMYK
cmyk(0%, 13%, 44%, 16%)
Oklch
oklch(79.5% 0.089 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E6C4A9

Apricot · Wheat · Peach Orange

HEX
#E6C4A9
RGB
rgb(230, 196, 169)
HSL
hsl(27, 55%, 78%)
HSB
hsb(27, 27%, 90%)
CMYK
cmyk(0%, 15%, 27%, 10%)
Oklch
oklch(84.3% 0.053 60.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D56C7A

Peach Pink · LightCoral · Coral Red

HEX
#D56C7A
RGB
rgb(213, 108, 122)
HSL
hsl(352, 56%, 63%)
HSB
hsb(352, 49%, 84%)
CMYK
cmyk(0%, 49%, 43%, 16%)
Oklch
oklch(65.7% 0.132 13.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C580F
10549E

Analogous

9E1210
9C580F
9B9E10

Triadic

9C580F
109E59
59109E

Split-Comp.

9C580F
109B9E
12109E

Tetradic

9C580F
109E12
10549E
9E109B

Contrast Matrix WCAG 2.1 Contrast

9C580F
C5B22F
D5B978
E6C4A9
D56C7A
—
2.6
Fail
2.9
Fail
3.4
AA Large
1.6
Fail
2.6
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
2.9
Fail
1.1
Fail
—
1.2
Fail
1.8
Fail
3.4
AA Large
1.3
Fail
1.2
Fail
—
2.1
Fail
1.6
Fail
1.6
Fail
1.8
Fail
2.1
Fail
—
White BG
5.5AA
2.1Fail
1.9Fail
1.6Fail
3.4AA Large
Black BG
3.8AA Large
9.8AAA
11.0AAA
12.8AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7E21
BDBD4F
C9C988
D7D7B0
A8A777

Deuteranopia

838825
BEBF56
CBCD8C
D9DCB1
AEB676

Tritanopia

992F32
C4686D
D49497
E4B5B6
D07473

Achromatopsia

646464
A9A9A9
BABABA
CBCBCB
8D8D8D

Shades & Tints Shades & Tints

#9C580F

Dark
Light

#C5B22F

Dark
Light

#D5B978

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c580f;
  --color-2: #c5b22f;
  --color-3: #d5b978;
  --color-4: #e6c4a9;
  --color-5: #d56c7a;
}

SCSS

$color-1: #9c580f;
$color-2: #c5b22f;
$color-3: #d5b978;
$color-4: #e6c4a9;
$color-5: #d56c7a;

TAILWIND

colors: {
  'brand-1': '#9c580f',
  'brand-2': '#c5b22f',
  'brand-3': '#d5b978',
  'brand-4': '#e6c4a9',
  'brand-5': '#d56c7a',
}

RGB Array

[156, 88, 15], [197, 178, 47], [213, 185, 120], [230, 196, 169], [213, 108, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C580F, #C5B22F, #D5B978, #E6C4A9, #D56C7A 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: #9c580f; --color-2: #c5b22f; --color-3: #d5b978; --color-4: #e6c4a9; --color-5: #d56c7a. 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 general-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