#5F4F74 + #1F172C + #011100 + #1A2900 + #567235 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5F4F74

Deep Indigo · DimGray · Eggplant

HEX

#5F4F74

RGB

rgb(95, 79, 116)

HSL

hsl(266, 19%, 38%)

HSB

hsb(266, 32%, 45%)

CMYK

cmyk(18%, 32%, 0%, 55%)

Oklch

oklch(45.9% 0.062 303.9)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#1F172C

Deep Indigo · Black · Dark Purple

HEX

#1F172C

RGB

rgb(31, 23, 44)

HSL

hsl(263, 31%, 13%)

HSB

hsb(263, 48%, 17%)

CMYK

cmyk(30%, 48%, 0%, 83%)

Oklch

oklch(22.5% 0.041 300.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#011100

Pine Green · Black · Dark Green

HEX

#011100

RGB

rgb(1, 17, 0)

HSL

hsl(116, 100%, 3%)

HSB

hsb(116, 100%, 7%)

CMYK

cmyk(94%, 0%, 100%, 93%)

Oklch

oklch(15.5% 0.051 140.9)

Traditional「Pine Green」· Paint「Dark Green」· Creative Blush Sunrise

#1A2900

Grass Green · Black · Dark Green

HEX

#1A2900

RGB

rgb(26, 41, 0)

HSL

hsl(82, 100%, 8%)

HSB

hsb(82, 100%, 16%)

CMYK

cmyk(37%, 0%, 100%, 84%)

Oklch

oklch(25.8% 0.067 127.7)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#567235

Grass Green · DarkOliveGreen · Forest Green

HEX

#567235

RGB

rgb(86, 114, 53)

HSL

hsl(88, 37%, 33%)

HSB

hsb(88, 54%, 45%)

CMYK

cmyk(25%, 0%, 54%, 55%)

Oklch

oklch(51.5% 0.094 129.5)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F4F74

63734E

Analogous

4E5173

5F4F74

714E73

Triadic

5F4F74

735E4E

4E735E

Split-Comp.

5F4F74

73714E

51734E

Tetradic

5F4F74

734E51

63734E

4E7371

Contrast Matrix WCAG 2.1 Contrast

5F4F74	1F172C	011100	1A2900	567235
—	2.3 Fail	2.6 Fail	2.1 Fail	1.3 Fail
2.3 Fail	—	1.1 Fail	1.1 Fail	3.2 AA Large
2.6 Fail	1.1 Fail	—	1.3 Fail	3.6 AA Large
2.1 Fail	1.1 Fail	1.3 Fail	—	2.8 Fail
1.3 Fail	3.2 AA Large	3.6 AA Large	2.8 Fail	—

White BG

7.3AAA

17.3AAA

19.4AAA

15.4AAA

5.4AA

Black BG

2.9Fail

1.2Fail

1.1Fail

1.4Fail

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

58586B

1C1B27

080804

20210A

626244

Deuteranopia

595A69

1C1D26

070605

201F0C

615E47

Tritanopia

5E6462

1F2322

020708

1B1213

574F52

Achromatopsia

585858

1C1C1C

0A0A0A

202020

636363

Shades & Tints Shades & Tints

#5F4F74

Dark

Light

#1F172C

Dark

Light

#011100

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f4f74;
  --color-2: #1f172c;
  --color-3: #011100;
  --color-4: #1a2900;
  --color-5: #567235;
}

SCSS

$color-1: #5f4f74;
$color-2: #1f172c;
$color-3: #011100;
$color-4: #1a2900;
$color-5: #567235;

TAILWIND

colors: {
  'brand-1': '#5f4f74',
  'brand-2': '#1f172c',
  'brand-3': '#011100',
  'brand-4': '#1a2900',
  'brand-5': '#567235',
}

RGB Array

[95, 79, 116], [31, 23, 44], [1, 17, 0], [26, 41, 0], [86, 114, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F4F74, #1F172C, #011100, #1A2900, #567235 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: #5f4f74; --color-2: #1f172c; --color-3: #011100; --color-4: #1a2900; --color-5: #567235. 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