← Back to Editor

#19170B · #57553C · #B17F20 · #AA3D04 · #E5C74F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#19170B

Autumn Sage · Black · Amber Gold

HEX
#19170B
RGB
rgb(25, 23, 11)
HSL
hsl(51, 39%, 7%)
HSB
hsb(51, 56%, 10%)
CMYK
cmyk(0%, 8%, 56%, 90%)
Oklch
oklch(20.3% 0.022 99.9)

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

#57553C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#57553C
RGB
rgb(87, 85, 60)
HSL
hsl(56, 18%, 29%)
HSB
hsb(56, 31%, 34%)
CMYK
cmyk(0%, 2%, 31%, 66%)
Oklch
oklch(44.4% 0.039 104.0)

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

#B17F20

Ochre · DarkGoldenRod · Amber Brown

HEX
#B17F20
RGB
rgb(177, 127, 32)
HSL
hsl(39, 69%, 41%)
HSB
hsb(39, 82%, 69%)
CMYK
cmyk(0%, 28%, 82%, 31%)
Oklch
oklch(63.1% 0.121 78.2)

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

#AA3D04

Tangerine · FireBrick · Amber Brown

HEX
#AA3D04
RGB
rgb(170, 61, 4)
HSL
hsl(21, 95%, 34%)
HSB
hsb(21, 98%, 67%)
CMYK
cmyk(0%, 64%, 98%, 33%)
Oklch
oklch(50.8% 0.154 41.1)

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

#E5C74F

Ginger · SandyBrown · Sunflower

HEX
#E5C74F
RGB
rgb(229, 199, 79)
HSL
hsl(48, 74%, 60%)
HSB
hsb(48, 66%, 90%)
CMYK
cmyk(0%, 13%, 66%, 10%)
Oklch
oklch(83.3% 0.141 95.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

19170B
0B0D19

Analogous

19100B
19170B
14190B

Triadic

19170B
0B1917
170B19

Split-Comp.

19170B
0B1419
100B19

Tetradic

19170B
0B1910
0B0D19
190B14

Contrast Matrix WCAG 2.1 Contrast

19170B
57553C
B17F20
AA3D04
E5C74F
—
2.4
Fail
5.1
AA
2.9
Fail
10.8
AAA
2.4
Fail
—
2.1
Fail
1.2
Fail
4.6
AA
5.1
AA
2.1
Fail
—
1.8
Fail
2.1
Fail
2.9
Fail
1.2
Fail
1.8
Fail
—
3.7
AA Large
10.8
AAA
4.6
AA
2.1
Fail
3.7
AA Large
—
White BG
18.0AAA
7.6AAA
3.5AA Large
6.2AA
1.7Fail
Black BG
1.2Fail
2.8Fail
5.9AA
3.4AA Large
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

18180E
565642
9B9B37
7B7A12
D8D86C

Deuteranopia

18180F
565644
9EA23D
818915
DADC73

Tritanopia

191011
574748
AF494D
A51D1F
E38388

Achromatopsia

161616
535353
838383
575757
C2C2C2

Shades & Tints Shades & Tints

#19170B

Dark
Light

#57553C

Dark
Light

#B17F20

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #19170b;
  --color-2: #57553c;
  --color-3: #b17f20;
  --color-4: #aa3d04;
  --color-5: #e5c74f;
}

SCSS

$color-1: #19170b;
$color-2: #57553c;
$color-3: #b17f20;
$color-4: #aa3d04;
$color-5: #e5c74f;

TAILWIND

colors: {
  'brand-1': '#19170b',
  'brand-2': '#57553c',
  'brand-3': '#b17f20',
  'brand-4': '#aa3d04',
  'brand-5': '#e5c74f',
}

RGB Array

[25, 23, 11], [87, 85, 60], [177, 127, 32], [170, 61, 4], [229, 199, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #19170B, #57553C, #B17F20, #AA3D04, #E5C74F is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #19170b; --color-2: #57553c; --color-3: #b17f20; --color-4: #aa3d04; --color-5: #e5c74f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 tech, SaaS, healthcare, eco industries. 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