#887D0B + #0C0D0F + #320E38 + #591246 + #A31435 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#887D0B

Autumn Sage · Olive · Honey Gold

HEX

#887D0B

RGB

rgb(136, 125, 11)

HSL

hsl(55, 85%, 29%)

HSB

hsb(55, 92%, 53%)

CMYK

cmyk(0%, 8%, 92%, 47%)

Oklch

oklch(58.2% 0.119 103.1)

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

#0C0D0F

Indigo · Black · Deep Sea Blue

HEX

#0C0D0F

RGB

rgb(12, 13, 15)

HSL

hsl(220, 11%, 5%)

HSB

hsb(220, 20%, 6%)

CMYK

cmyk(20%, 13%, 0%, 94%)

Oklch

oklch(15.9% 0.005 264.4)

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

#320E38

Royal Purple · MidnightBlue · Dark Purple

HEX

#320E38

RGB

rgb(50, 14, 56)

HSL

hsl(291, 60%, 14%)

HSB

hsb(291, 75%, 22%)

CMYK

cmyk(11%, 75%, 0%, 78%)

Oklch

oklch(24.5% 0.085 321.7)

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

#591246

Rose Purple · Purple · Eggplant

HEX

#591246

RGB

rgb(89, 18, 70)

HSL

hsl(316, 66%, 21%)

HSB

hsb(316, 80%, 35%)

CMYK

cmyk(0%, 80%, 21%, 65%)

Oklch

oklch(32.6% 0.118 341.0)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#A31435

Vermilion · Brown · Wine Red

HEX

#A31435

RGB

rgb(163, 20, 53)

HSL

hsl(346, 78%, 36%)

HSB

hsb(346, 88%, 64%)

CMYK

cmyk(0%, 88%, 67%, 36%)

Oklch

oklch(46.2% 0.173 16.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887D0B

0B1689

Analogous

893F0B

887D0B

54890B

Triadic

887D0B

0B897E

7E0B89

Split-Comp.

887D0B

0B5489

3F0B89

Tetradic

887D0B

0B893F

0B1689

890B54

Contrast Matrix WCAG 2.1 Contrast

887D0B	0C0D0F	320E38	591246	A31435
—	4.6 AA	4.0 AA Large	3.1 AA Large	1.8 Fail
4.6 AA	—	1.2 Fail	1.5 Fail	2.5 Fail
4.0 AA Large	1.2 Fail	—	1.3 Fail	2.2 Fail
3.1 AA Large	1.5 Fail	1.3 Fail	—	1.7 Fail
1.8 Fail	2.5 Fail	2.2 Fail	1.7 Fail	—

White BG

4.2AA Large

19.4AAA

16.7AAA

13.1AAA

7.8AAA

Black BG

5.0AA

1.1Fail

1.3Fail

1.6Fail

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

838327

0C0C0F

22222E

3A3A39

65642D

Deuteranopia

84852D

0C0C0E

25272B

3E4436

6D782B

Tritanopia

873C41

0C0E0E

302624

552F2D

9C2725

Achromatopsia

737373

0D0D0D

1E1E1E

2D2D2D

434343

Shades & Tints Shades & Tints

#887D0B

Dark

Light

#0C0D0F

Dark

Light

#320E38

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887d0b;
  --color-2: #0c0d0f;
  --color-3: #320e38;
  --color-4: #591246;
  --color-5: #a31435;
}

SCSS

$color-1: #887d0b;
$color-2: #0c0d0f;
$color-3: #320e38;
$color-4: #591246;
$color-5: #a31435;

TAILWIND

colors: {
  'brand-1': '#887d0b',
  'brand-2': '#0c0d0f',
  'brand-3': '#320e38',
  'brand-4': '#591246',
  'brand-5': '#a31435',
}

RGB Array

[136, 125, 11], [12, 13, 15], [50, 14, 56], [89, 18, 70], [163, 20, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #887D0B, #0C0D0F, #320E38, #591246, #A31435 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: #887d0b; --color-2: #0c0d0f; --color-3: #320e38; --color-4: #591246; --color-5: #a31435. 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