#171213 + #261A1D + #5E3541 + #8C2D48 + #F20045 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#171213

Crimson · Black · Deep Berry

HEX

#171213

RGB

rgb(23, 18, 19)

HSL

hsl(348, 12%, 8%)

HSB

hsb(348, 22%, 9%)

CMYK

cmyk(0%, 22%, 17%, 91%)

Oklch

oklch(18.9% 0.008 4.4)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#261A1D

Crimson · Black · Deep Berry

HEX

#261A1D

RGB

rgb(38, 26, 29)

HSL

hsl(345, 19%, 13%)

HSB

hsb(345, 32%, 15%)

CMYK

cmyk(0%, 32%, 24%, 85%)

Oklch

oklch(23.4% 0.020 2.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#5E3541

Dark Violet · DarkSlateGray · Camellia

HEX

#5E3541

RGB

rgb(94, 53, 65)

HSL

hsl(342, 28%, 29%)

HSB

hsb(342, 44%, 37%)

CMYK

cmyk(0%, 44%, 31%, 63%)

Oklch

oklch(38.4% 0.061 1.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#8C2D48

Dark Violet · Brown · Camellia

HEX

#8C2D48

RGB

rgb(140, 45, 72)

HSL

hsl(343, 51%, 36%)

HSB

hsb(343, 68%, 55%)

CMYK

cmyk(0%, 68%, 49%, 45%)

Oklch

oklch(44.6% 0.130 6.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F20045

Dark Violet · Crimson · Camellia

HEX

#F20045

RGB

rgb(242, 0, 69)

HSL

hsl(343, 100%, 47%)

HSB

hsb(343, 100%, 95%)

CMYK

cmyk(0%, 100%, 71%, 5%)

Oklch

oklch(60.9% 0.244 18.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

171213

121716

Analogous

171215

171213

171312

Triadic

171213

131712

121317

Split-Comp.

171213

121713

121517

Tetradic

171213

151712

121716

131217

Contrast Matrix WCAG 2.1 Contrast

171213	261A1D	5E3541	8C2D48	F20045
—	1.1 Fail	1.8 Fail	2.3 Fail	4.3 AA Large
1.1 Fail	—	1.7 Fail	2.1 Fail	3.9 AA Large
1.8 Fail	1.7 Fail	—	1.3 Fail	2.4 Fail
2.3 Fail	2.1 Fail	1.3 Fail	—	1.9 Fail
4.3 AA Large	3.9 AA Large	2.4 Fail	1.9 Fail	—

White BG

18.5AAA

16.8AAA

10.2AAA

8.1AAA

4.3AA Large

Black BG

1.1Fail

1.2Fail

2.1Fail

2.6Fail

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151513

21211C

4C4C3E

636241

898734

Deuteranopia

151513

22221C

4F523D

687040

97A930

Tritanopia

171313

251C1C

5C3C3B

873C3B

E62724

Achromatopsia

141414

1E1E1E

434343

4C4C4C

505050

Shades & Tints Shades & Tints

#171213

Dark

Light

#261A1D

Dark

Light

#5E3541

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #171213;
  --color-2: #261a1d;
  --color-3: #5e3541;
  --color-4: #8c2d48;
  --color-5: #f20045;
}

SCSS

$color-1: #171213;
$color-2: #261a1d;
$color-3: #5e3541;
$color-4: #8c2d48;
$color-5: #f20045;

TAILWIND

colors: {
  'brand-1': '#171213',
  'brand-2': '#261a1d',
  'brand-3': '#5e3541',
  'brand-4': '#8c2d48',
  'brand-5': '#f20045',
}

RGB Array

[23, 18, 19], [38, 26, 29], [94, 53, 65], [140, 45, 72], [242, 0, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #171213, #261A1D, #5E3541, #8C2D48, #F20045 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: #171213; --color-2: #261a1d; --color-3: #5e3541; --color-4: #8c2d48; --color-5: #f20045. 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