#17172D + #F41C0E + #EDAC14 + #181725 + #322736 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#17172D

Deep Indigo · Black · Deep Sea Blue

HEX

#17172D

RGB

rgb(23, 23, 45)

HSL

hsl(240, 32%, 13%)

HSB

hsb(240, 49%, 18%)

CMYK

cmyk(49%, 49%, 0%, 82%)

Oklch

oklch(21.7% 0.043 282.3)

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

#F41C0E

Vermilion · Red · Passion Red

HEX

#F41C0E

RGB

rgb(244, 28, 14)

HSL

hsl(4, 91%, 51%)

HSB

hsb(4, 94%, 96%)

CMYK

cmyk(0%, 89%, 94%, 4%)

Oklch

oklch(61.5% 0.242 29.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#EDAC14

Ochre · GoldenRod · Honey Gold

HEX

#EDAC14

RGB

rgb(237, 172, 20)

HSL

hsl(42, 86%, 50%)

HSB

hsb(42, 92%, 93%)

CMYK

cmyk(0%, 27%, 92%, 7%)

Oklch

oklch(78.5% 0.159 80.6)

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

#181725

Deep Indigo · Black · Deep Sea Blue

HEX

#181725

RGB

rgb(24, 23, 37)

HSL

hsl(244, 23%, 12%)

HSB

hsb(244, 38%, 15%)

CMYK

cmyk(35%, 38%, 0%, 85%)

Oklch

oklch(21.3% 0.027 287.1)

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

#322736

Dark Plum · DarkSlateGray · Dark Purple

HEX

#322736

RGB

rgb(50, 39, 54)

HSL

hsl(284, 16%, 18%)

HSB

hsb(284, 28%, 21%)

CMYK

cmyk(7%, 28%, 0%, 79%)

Oklch

oklch(29.2% 0.031 316.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

17172D

2C2C17

Analogous

17212C

17172D

21172C

Triadic

17172D

2C1717

172C17

Split-Comp.

17172D

2C2117

212C17

Tetradic

17172D

2C1721

2C2C17

172C21

Contrast Matrix WCAG 2.1 Contrast

17172D	F41C0E	EDAC14	181725	322736
—	4.2 AA Large	8.8 AAA	1.0 Fail	1.2 Fail
4.2 AA Large	—	2.1 Fail	4.2 AA Large	3.4 AA Large
8.8 AAA	2.1 Fail	—	8.8 AAA	7.1 AAA
1.0 Fail	4.2 AA Large	8.8 AAA	—	1.2 Fail
1.2 Fail	3.4 AA Large	7.1 AAA	1.2 Fail	—

White BG

17.5AAA

4.2AA Large

2.0Fail

17.7AAA

14.2AAA

Black BG

1.2Fail

5.0AA

10.5AAA

1.2Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

171728

969511

D1D039

181822

2D2D32

Deuteranopia

171726

A3B312

D5D942

181821

2E2F32

Tritanopia

172323

E91415

EA565C

181F1E

31302F

Achromatopsia

1A1A1A

5B5B5B

AEAEAE

191919

2C2C2C

Shades & Tints Shades & Tints

#17172D

Dark

Light

#F41C0E

Dark

Light

#EDAC14

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #17172d;
  --color-2: #f41c0e;
  --color-3: #edac14;
  --color-4: #181725;
  --color-5: #322736;
}

SCSS

$color-1: #17172d;
$color-2: #f41c0e;
$color-3: #edac14;
$color-4: #181725;
$color-5: #322736;

TAILWIND

colors: {
  'brand-1': '#17172d',
  'brand-2': '#f41c0e',
  'brand-3': '#edac14',
  'brand-4': '#181725',
  'brand-5': '#322736',
}

RGB Array

[23, 23, 45], [244, 28, 14], [237, 172, 20], [24, 23, 37], [50, 39, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #17172D, #F41C0E, #EDAC14, #181725, #322736 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: #17172d; --color-2: #f41c0e; --color-3: #edac14; --color-4: #181725; --color-5: #322736. 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