← Back to Editor

#170D20 · #2E2376 · #196E65 · #8C991E · #F5A21E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#170D20

Dark Plum · Black · Dark Purple

HEX
#170D20
RGB
rgb(23, 13, 32)
HSL
hsl(272, 42%, 9%)
HSB
hsb(272, 59%, 13%)
CMYK
cmyk(28%, 59%, 0%, 87%)
Oklch
oklch(18.3% 0.040 307.1)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#2E2376

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#2E2376
RGB
rgb(46, 35, 118)
HSL
hsl(248, 54%, 30%)
HSB
hsb(248, 70%, 46%)
CMYK
cmyk(61%, 70%, 0%, 54%)
Oklch
oklch(32.7% 0.135 281.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#196E65

Mineral Blue · SeaGreen · Mint Ice

HEX
#196E65
RGB
rgb(25, 110, 101)
HSL
hsl(174, 63%, 26%)
HSB
hsb(174, 77%, 43%)
CMYK
cmyk(77%, 0%, 8%, 57%)
Oklch
oklch(48.8% 0.079 184.4)

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

#8C991E

Autumn Sage · Olive · Honey Gold

HEX
#8C991E
RGB
rgb(140, 153, 30)
HSL
hsl(66, 67%, 36%)
HSB
hsb(66, 80%, 60%)
CMYK
cmyk(8%, 0%, 80%, 40%)
Oklch
oklch(65.1% 0.139 115.8)

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

#F5A21E

Ginger · GoldenRod · Warm Sun

HEX
#F5A21E
RGB
rgb(245, 162, 30)
HSL
hsl(37, 91%, 54%)
HSB
hsb(37, 88%, 96%)
CMYK
cmyk(0%, 34%, 88%, 4%)
Oklch
oklch(77.6% 0.160 71.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

170D20
16210D

Analogous

0E0D21
170D20
210D20

Triadic

170D20
21180D
0D2118

Split-Comp.

170D20
20210D
0D210E

Tetradic

170D20
210E0D
16210D
0D2021

Contrast Matrix WCAG 2.1 Contrast

170D20
2E2376
196E65
8C991E
F5A21E
—
1.5
Fail
3.1
AA Large
6.0
AA
9.0
AAA
1.5
Fail
—
2.1
Fail
4.1
AA Large
6.2
AA
3.1
AA Large
2.1
Fail
—
1.9
Fail
2.9
Fail
6.0
AA
4.1
AA Large
1.9
Fail
—
1.5
Fail
9.0
AAA
6.2
AA
2.9
Fail
1.5
Fail
—
White BG
18.8AAA
13.0AAA
6.1AA
3.1AA Large
2.1Fail
Black BG
1.1Fail
1.6Fail
3.5AA Large
6.7AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

13131B
292962
3E3F67
92923C
D1D03E

Deuteranopia

13141A
2A2B5D
393368
919043
D6DC46

Tritanopia

161817
2D524F
1D6969
8D5358
F1575D

Achromatopsia

121212
303030
545454
878787
ACACAC

Shades & Tints Shades & Tints

#170D20

Dark
Light

#2E2376

Dark
Light

#196E65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #170d20;
  --color-2: #2e2376;
  --color-3: #196e65;
  --color-4: #8c991e;
  --color-5: #f5a21e;
}

SCSS

$color-1: #170d20;
$color-2: #2e2376;
$color-3: #196e65;
$color-4: #8c991e;
$color-5: #f5a21e;

TAILWIND

colors: {
  'brand-1': '#170d20',
  'brand-2': '#2e2376',
  'brand-3': '#196e65',
  'brand-4': '#8c991e',
  'brand-5': '#f5a21e',
}

RGB Array

[23, 13, 32], [46, 35, 118], [25, 110, 101], [140, 153, 30], [245, 162, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #170D20, #2E2376, #196E65, #8C991E, #F5A21E is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #170d20; --color-2: #2e2376; --color-3: #196e65; --color-4: #8c991e; --color-5: #f5a21e. 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 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