#312A32 + #A91B49 + #671C54 + #1A1B1C + #BA8F08 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#312A32

Dark Plum · DarkSlateGray · Dark Stone

HEX

#312A32

RGB

rgb(49, 42, 50)

HSL

hsl(293, 9%, 18%)

HSB

hsb(293, 16%, 20%)

CMYK

cmyk(2%, 16%, 0%, 80%)

Oklch

oklch(29.6% 0.017 322.0)

Traditional「Dark Plum」· Paint「Dark Stone」· Creative Midnight Shadow

#A91B49

Dark Violet · Brown · Camellia

HEX

#A91B49

RGB

rgb(169, 27, 73)

HSL

hsl(341, 72%, 38%)

HSB

hsb(341, 84%, 66%)

CMYK

cmyk(0%, 84%, 57%, 34%)

Oklch

oklch(48.2% 0.176 9.0)

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

#671C54

Rose Purple · Purple · Eggplant

HEX

#671C54

RGB

rgb(103, 28, 84)

HSL

hsl(315, 57%, 26%)

HSB

hsb(315, 73%, 40%)

CMYK

cmyk(0%, 73%, 18%, 60%)

Oklch

oklch(36.8% 0.125 339.6)

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

#1A1B1C

Ink Black · Black · Dark Stone

HEX

#1A1B1C

RGB

rgb(26, 27, 28)

HSL

hsl(210, 4%, 11%)

HSB

hsb(210, 7%, 11%)

CMYK

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

Oklch

oklch(22.1% 0.002 247.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#BA8F08

Ochre · DarkGoldenRod · Honey Gold

HEX

#BA8F08

RGB

rgb(186, 143, 8)

HSL

hsl(46, 92%, 38%)

HSB

hsb(46, 96%, 73%)

CMYK

cmyk(0%, 23%, 96%, 27%)

Oklch

oklch(67.2% 0.136 86.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312A32

2B322A

Analogous

2D2A32

312A32

322A2F

Triadic

312A32

32312A

2A3231

Split-Comp.

312A32

2F322A

2A322D

Tetradic

312A32

322D2A

2B322A

2A2F32

Contrast Matrix WCAG 2.1 Contrast

312A32	A91B49	671C54	1A1B1C	BA8F08
—	1.9 Fail	1.2 Fail	1.2 Fail	4.7 AA
1.9 Fail	—	1.6 Fail	2.4 Fail	2.4 Fail
1.2 Fail	1.6 Fail	—	1.5 Fail	3.8 AA Large
1.2 Fail	2.4 Fail	1.5 Fail	—	5.8 AA
4.7 AA	2.4 Fail	3.8 AA Large	5.8 AA	—

White BG

13.9AAA

7.1AAA

11.2AAA

17.2AAA

3.0Fail

Black BG

1.5Fail

2.9Fail

1.9Fail

1.2Fail

7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E30

6C6A3E

474646

1A1A1C

A7A729

Deuteranopia

2E2F30

747E3B

4B5143

1A1A1C

AAAD31

Tritanopia

312F2E

A23533

633C39

1A1C1C

B84248

Achromatopsia

2D2D2D

4B4B4B

393939

1B1B1B

8C8C8C

Shades & Tints Shades & Tints

#312A32

Dark

Light

#A91B49

Dark

Light

#671C54

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312a32;
  --color-2: #a91b49;
  --color-3: #671c54;
  --color-4: #1a1b1c;
  --color-5: #ba8f08;
}

SCSS

$color-1: #312a32;
$color-2: #a91b49;
$color-3: #671c54;
$color-4: #1a1b1c;
$color-5: #ba8f08;

TAILWIND

colors: {
  'brand-1': '#312a32',
  'brand-2': '#a91b49',
  'brand-3': '#671c54',
  'brand-4': '#1a1b1c',
  'brand-5': '#ba8f08',
}

RGB Array

[49, 42, 50], [169, 27, 73], [103, 28, 84], [26, 27, 28], [186, 143, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #312A32, #A91B49, #671C54, #1A1B1C, #BA8F08 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: #312a32; --color-2: #a91b49; --color-3: #671c54; --color-4: #1a1b1c; --color-5: #ba8f08. 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