← Back to Editor

#5C160A · #DAB98C · #F5DCA3 · #BB461B · #823312

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

#5C160A

Vermilion · Maroon · Deep Berry

HEX
#5C160A
RGB
rgb(92, 22, 10)
HSL
hsl(9, 80%, 20%)
HSB
hsb(9, 89%, 36%)
CMYK
cmyk(0%, 76%, 89%, 64%)
Oklch
oklch(31.8% 0.104 32.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#DAB98C

Ginger · BurlyWood · Warm Sun

HEX
#DAB98C
RGB
rgb(218, 185, 140)
HSL
hsl(35, 51%, 70%)
HSB
hsb(35, 36%, 85%)
CMYK
cmyk(0%, 15%, 36%, 15%)
Oklch
oklch(80.4% 0.071 75.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F5DCA3

Goose Yellow · Wheat · Lemon Cream

HEX
#F5DCA3
RGB
rgb(245, 220, 163)
HSL
hsl(42, 80%, 80%)
HSB
hsb(42, 33%, 96%)
CMYK
cmyk(0%, 10%, 33%, 4%)
Oklch
oklch(90.2% 0.078 87.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#BB461B

Tangerine · Sienna · Amber Brown

HEX
#BB461B
RGB
rgb(187, 70, 27)
HSL
hsl(16, 75%, 42%)
HSB
hsb(16, 86%, 73%)
CMYK
cmyk(0%, 63%, 86%, 27%)
Oklch
oklch(54.9% 0.160 38.7)

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

#823312

Tangerine · Brown · Amber Brown

HEX
#823312
RGB
rgb(130, 51, 18)
HSL
hsl(18, 76%, 29%)
HSB
hsb(18, 86%, 51%)
CMYK
cmyk(0%, 61%, 86%, 49%)
Oklch
oklch(42.7% 0.118 40.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C160A
0A505C

Analogous

5C0A27
5C160A
5C3F0A

Triadic

5C160A
0A5C16
160A5C

Split-Comp.

5C160A
0A5C3F
0A275C

Tetradic

5C160A
275C0A
0A505C
3F0A5C

Contrast Matrix WCAG 2.1 Contrast

5C160A
DAB98C
F5DCA3
BB461B
823312
—
7.2
AAA
9.9
AAA
2.5
Fail
1.5
Fail
7.2
AAA
—
1.4
Fail
2.8
Fail
4.6
AA
9.9
AAA
1.4
Fail
—
3.9
AA Large
6.4
AA
2.5
Fail
2.8
Fail
3.9
AA Large
—
1.6
Fail
1.5
Fail
4.6
AA
6.4
AA
1.6
Fail
—
White BG
13.3AAA
1.9Fail
1.3Fail
5.2AA
8.6AAA
Black BG
1.6Fail
11.3AAA
15.6AAA
4.0AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3D0D
CCCB97
EAEAB1
888725
605F1A

Deuteranopia

42470E
CED09A
ECEEB4
8F9828
646A1C

Tritanopia

580F10
D89FA1
F4BCBE
B52E2F
7E2022

Achromatopsia

2A2A2A
BEBEBE
DDDDDD
646464
474747

Shades & Tints Shades & Tints

#5C160A

Dark
Light

#DAB98C

Dark
Light

#F5DCA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c160a;
  --color-2: #dab98c;
  --color-3: #f5dca3;
  --color-4: #bb461b;
  --color-5: #823312;
}

SCSS

$color-1: #5c160a;
$color-2: #dab98c;
$color-3: #f5dca3;
$color-4: #bb461b;
$color-5: #823312;

TAILWIND

colors: {
  'brand-1': '#5c160a',
  'brand-2': '#dab98c',
  'brand-3': '#f5dca3',
  'brand-4': '#bb461b',
  'brand-5': '#823312',
}

RGB Array

[92, 22, 10], [218, 185, 140], [245, 220, 163], [187, 70, 27], [130, 51, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C160A, #DAB98C, #F5DCA3, #BB461B, #823312 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: #5c160a; --color-2: #dab98c; --color-3: #f5dca3; --color-4: #bb461b; --color-5: #823312. 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