#51867C + #241210 + #881109 + #D4A316 + #323E4C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#51867C

Mineral Blue · SlateGray · Mint Ice

HEX

#51867C

RGB

rgb(81, 134, 124)

HSL

hsl(169, 25%, 42%)

HSB

hsb(169, 40%, 53%)

CMYK

cmyk(40%, 0%, 7%, 47%)

Oklch

oklch(58.0% 0.059 180.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#241210

Crimson · Black · Deep Berry

HEX

#241210

RGB

rgb(36, 18, 16)

HSL

hsl(6, 38%, 10%)

HSB

hsb(6, 56%, 14%)

CMYK

cmyk(0%, 50%, 56%, 86%)

Oklch

oklch(20.7% 0.031 26.8)

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

#881109

Vermilion · DarkRed · Wine Red

HEX

#881109

RGB

rgb(136, 17, 9)

HSL

hsl(4, 88%, 28%)

HSB

hsb(4, 93%, 53%)

CMYK

cmyk(0%, 88%, 93%, 47%)

Oklch

oklch(40.2% 0.153 29.6)

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

#D4A316

Ochre · GoldenRod · Honey Gold

HEX

#D4A316

RGB

rgb(212, 163, 22)

HSL

hsl(45, 81%, 46%)

HSB

hsb(45, 90%, 83%)

CMYK

cmyk(0%, 23%, 90%, 17%)

Oklch

oklch(74.1% 0.147 86.1)

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

#323E4C

Indigo · DarkSlateGray · Prussian Blue

HEX

#323E4C

RGB

rgb(50, 62, 76)

HSL

hsl(212, 21%, 25%)

HSB

hsb(212, 34%, 30%)

CMYK

cmyk(34%, 18%, 0%, 70%)

Oklch

oklch(35.9% 0.029 252.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51867C

86505A

Analogous

508661

51867C

507586

Triadic

51867C

7C5086

867C50

Split-Comp.

51867C

865075

866150

Tetradic

51867C

615086

86505A

758650

Contrast Matrix WCAG 2.1 Contrast

51867C	241210	881109	D4A316	323E4C
—	4.3 AA Large	2.4 Fail	1.8 Fail	2.6 Fail
4.3 AA Large	—	1.8 Fail	7.7 AAA	1.7 Fail
2.4 Fail	1.8 Fail	—	4.2 AA Large	1.1 Fail
1.8 Fail	7.7 AAA	4.2 AA Large	—	4.7 AA
2.6 Fail	1.7 Fail	1.1 Fail	4.7 AA	—

White BG

4.2AA Large

18.0AAA

9.9AAA

2.3Fail

10.9AAA

Black BG

5.1AA

1.2Fail

2.1Fail

9.0AAA

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

68687E

1C1C10

54530B

BFBE38

373749

Deuteranopia

65617F

1D1F11

5B640B

C2C540

373648

Tritanopia

548081

231111

820C0D

D25359

334645

Achromatopsia

757575

171717

343434

A2A2A2

3C3C3C

Shades & Tints Shades & Tints

#51867C

Dark

Light

#241210

Dark

Light

#881109

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51867c;
  --color-2: #241210;
  --color-3: #881109;
  --color-4: #d4a316;
  --color-5: #323e4c;
}

SCSS

$color-1: #51867c;
$color-2: #241210;
$color-3: #881109;
$color-4: #d4a316;
$color-5: #323e4c;

TAILWIND

colors: {
  'brand-1': '#51867c',
  'brand-2': '#241210',
  'brand-3': '#881109',
  'brand-4': '#d4a316',
  'brand-5': '#323e4c',
}

RGB Array

[81, 134, 124], [36, 18, 16], [136, 17, 9], [212, 163, 22], [50, 62, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51867C, #241210, #881109, #D4A316, #323E4C 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: #51867c; --color-2: #241210; --color-3: #881109; --color-4: #d4a316; --color-5: #323e4c. 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