#172340 + #0D3682 + #5A6363 + #A3892C + #FD8507 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#172340

Indigo · MidnightBlue · Deep Sea Blue

HEX

#172340

RGB

rgb(23, 35, 64)

HSL

hsl(222, 47%, 17%)

HSB

hsb(222, 64%, 25%)

CMYK

cmyk(64%, 45%, 0%, 75%)

Oklch

oklch(26.2% 0.057 265.7)

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

#0D3682

Indigo · MidnightBlue · Prussian Blue

HEX

#0D3682

RGB

rgb(13, 54, 130)

HSL

hsl(219, 82%, 28%)

HSB

hsb(219, 90%, 51%)

CMYK

cmyk(90%, 58%, 0%, 49%)

Oklch

oklch(35.8% 0.136 261.5)

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

#5A6363

Ink Gray · DimGray · Charcoal

HEX

#5A6363

RGB

rgb(90, 99, 99)

HSL

hsl(180, 5%, 37%)

HSB

hsb(180, 9%, 39%)

CMYK

cmyk(9%, 0%, 0%, 61%)

Oklch

oklch(49.2% 0.011 196.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A3892C

Ochre · DarkGoldenRod · Honey Gold

HEX

#A3892C

RGB

rgb(163, 137, 44)

HSL

hsl(47, 57%, 41%)

HSB

hsb(47, 73%, 64%)

CMYK

cmyk(0%, 16%, 73%, 36%)

Oklch

oklch(63.7% 0.113 92.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FD8507

Ginger · Orange · Warm Sun

HEX

#FD8507

RGB

rgb(253, 133, 7)

HSL

hsl(31, 98%, 51%)

HSB

hsb(31, 97%, 99%)

CMYK

cmyk(0%, 47%, 97%, 1%)

Oklch

oklch(73.7% 0.180 55.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

172340

403317

Analogous

173840

172340

1F1740

Triadic

172340

401723

234017

Split-Comp.

172340

401F17

384017

Tetradic

172340

401738

403317

17401F

Contrast Matrix WCAG 2.1 Contrast

172340	0D3682	5A6363	A3892C	FD8507
—	1.4 Fail	2.5 Fail	4.6 AA	6.3 AA
1.4 Fail	—	1.8 Fail	3.3 AA Large	4.6 AA
2.5 Fail	1.8 Fail	—	1.8 Fail	2.5 Fail
4.6 AA	3.3 AA Large	1.8 Fail	—	1.4 Fail
6.3 AA	4.6 AA	2.5 Fail	1.4 Fail	—

White BG

15.5AAA

11.2AAA

6.2AA

3.4AA Large

2.5Fail

Black BG

1.4Fail

1.9Fail

3.4AA Large

6.2AA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C39

1F1F70

5E5E63

989843

C9C825

Deuteranopia

1C1B37

1C196B

5D5D63

999B48

D0D92D

Tritanopia

183332

0F615E

5A6363

A25458

F73E43

Achromatopsia

232323

323232

606060

868686

9B9B9B

Shades & Tints Shades & Tints

#172340

Dark

Light

#0D3682

Dark

Light

#5A6363

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #172340;
  --color-2: #0d3682;
  --color-3: #5a6363;
  --color-4: #a3892c;
  --color-5: #fd8507;
}

SCSS

$color-1: #172340;
$color-2: #0d3682;
$color-3: #5a6363;
$color-4: #a3892c;
$color-5: #fd8507;

TAILWIND

colors: {
  'brand-1': '#172340',
  'brand-2': '#0d3682',
  'brand-3': '#5a6363',
  'brand-4': '#a3892c',
  'brand-5': '#fd8507',
}

RGB Array

[23, 35, 64], [13, 54, 130], [90, 99, 99], [163, 137, 44], [253, 133, 7]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #172340, #0D3682, #5A6363, #A3892C, #FD8507 is ideal for: tech websites, dark mode UIs, game UIs. 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: #172340; --color-2: #0d3682; --color-3: #5a6363; --color-4: #a3892c; --color-5: #fd8507. 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. 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