← Back to Editor

#170A04 · #2E190E · #9C773D · #D1BFA3 · #607D8A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#170A04

Tangerine · Black · Cinnamon

HEX
#170A04
RGB
rgb(23, 10, 4)
HSL
hsl(19, 70%, 5%)
HSB
hsb(19, 83%, 9%)
CMYK
cmyk(0%, 57%, 83%, 91%)
Oklch
oklch(16.2% 0.027 50.3)

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

#2E190E

Tangerine · Black · Cinnamon

HEX
#2E190E
RGB
rgb(46, 25, 14)
HSL
hsl(21, 53%, 12%)
HSB
hsb(21, 70%, 18%)
CMYK
cmyk(0%, 46%, 70%, 82%)
Oklch
oklch(23.9% 0.039 47.9)

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

#9C773D

Ochre · Sienna · Amber Brown

HEX
#9C773D
RGB
rgb(156, 119, 61)
HSL
hsl(37, 44%, 43%)
HSB
hsb(37, 61%, 61%)
CMYK
cmyk(0%, 24%, 61%, 39%)
Oklch
oklch(59.3% 0.089 76.9)

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

#D1BFA3

Goose Yellow · Tan · Warm Sun

HEX
#D1BFA3
RGB
rgb(209, 191, 163)
HSL
hsl(37, 33%, 73%)
HSB
hsb(37, 22%, 82%)
CMYK
cmyk(0%, 9%, 22%, 18%)
Oklch
oklch(81.2% 0.043 78.9)

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

#607D8A

Slate Blue · SlateGray · Mint Ice

HEX
#607D8A
RGB
rgb(96, 125, 138)
HSL
hsl(199, 18%, 46%)
HSB
hsb(199, 30%, 54%)
CMYK
cmyk(30%, 9%, 0%, 46%)
Oklch
oklch(57.2% 0.039 227.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

170A04
041016

Analogous

160407
170A04
161204

Triadic

170A04
041609
090416

Split-Comp.

170A04
041612
040716

Tetradic

170A04
071604
041016
120416

Contrast Matrix WCAG 2.1 Contrast

170A04
2E190E
9C773D
D1BFA3
607D8A
—
1.2
Fail
4.7
AA
10.8
AAA
4.4
AA Large
1.2
Fail
—
4.1
AA Large
9.3
AAA
3.8
AA Large
4.7
AA
4.1
AA Large
—
2.3
Fail
1.1
Fail
10.8
AAA
9.3
AAA
2.3
Fail
—
2.4
Fail
4.4
AA Large
3.8
AA Large
1.1
Fail
2.4
Fail
—
White BG
19.4AAA
16.6AAA
4.1AA Large
1.8Fail
4.4AA Large
Black BG
1.1Fail
1.3Fail
5.1AA
11.7AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

111105
252511
8C8C4B
C9C9AA
6D6D87

Deuteranopia

121306
262811
8E914E
CACCAB
6B6986

Tritanopia

160707
2D1313
9A5659
D0AFB0
618484

Achromatopsia

0D0D0D
1E1E1E
7B7B7B
C1C1C1
767676

Shades & Tints Shades & Tints

#170A04

Dark
Light

#2E190E

Dark
Light

#9C773D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #170a04;
  --color-2: #2e190e;
  --color-3: #9c773d;
  --color-4: #d1bfa3;
  --color-5: #607d8a;
}

SCSS

$color-1: #170a04;
$color-2: #2e190e;
$color-3: #9c773d;
$color-4: #d1bfa3;
$color-5: #607d8a;

TAILWIND

colors: {
  'brand-1': '#170a04',
  'brand-2': '#2e190e',
  'brand-3': '#9c773d',
  'brand-4': '#d1bfa3',
  'brand-5': '#607d8a',
}

RGB Array

[23, 10, 4], [46, 25, 14], [156, 119, 61], [209, 191, 163], [96, 125, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #170A04, #2E190E, #9C773D, #D1BFA3, #607D8A 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: #170a04; --color-2: #2e190e; --color-3: #9c773d; --color-4: #d1bfa3; --color-5: #607d8a. 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