← Back to Editor

#281F34 · #56717C · #1A042B · #56293E · #C49C57

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#281F34

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#281F34
RGB
rgb(40, 31, 52)
HSL
hsl(266, 25%, 16%)
HSB
hsb(266, 40%, 20%)
CMYK
cmyk(23%, 40%, 0%, 80%)
Oklch
oklch(26.0% 0.040 303.4)

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

#56717C

Slate Blue · DimGray · Mint Ice

HEX
#56717C
RGB
rgb(86, 113, 124)
HSL
hsl(197, 18%, 41%)
HSB
hsb(197, 31%, 49%)
CMYK
cmyk(31%, 9%, 0%, 51%)
Oklch
oklch(53.1% 0.036 224.8)

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

#1A042B

Royal Purple · Black · Dark Purple

HEX
#1A042B
RGB
rgb(26, 4, 43)
HSL
hsl(274, 83%, 9%)
HSB
hsb(274, 91%, 17%)
CMYK
cmyk(40%, 91%, 0%, 83%)
Oklch
oklch(17.9% 0.077 306.3)

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

#56293E

Dark Violet · DarkSlateGray · Raspberry

HEX
#56293E
RGB
rgb(86, 41, 62)
HSL
hsl(332, 35%, 25%)
HSB
hsb(332, 52%, 34%)
CMYK
cmyk(0%, 52%, 28%, 66%)
Oklch
oklch(34.9% 0.072 352.1)

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

#C49C57

Ginger · SandyBrown · Warm Sun

HEX
#C49C57
RGB
rgb(196, 156, 87)
HSL
hsl(38, 48%, 55%)
HSB
hsb(38, 56%, 77%)
CMYK
cmyk(0%, 20%, 56%, 23%)
Oklch
oklch(71.5% 0.099 79.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281F34
2A331F

Analogous

1F2033
281F34
321F33

Triadic

281F34
33271F
1F3327

Split-Comp.

281F34
33321F
20331F

Tetradic

281F34
331F20
2A331F
1F3332

Contrast Matrix WCAG 2.1 Contrast

281F34
56717C
1A042B
56293E
C49C57
—
3.0
AA Large
1.2
Fail
1.3
Fail
6.2
AA
3.0
AA Large
—
3.7
AA Large
2.3
Fail
2.0
Fail
1.2
Fail
3.7
AA Large
—
1.6
Fail
7.5
AAA
1.3
Fail
2.3
Fail
1.6
Fail
—
4.6
AA
6.2
AA
2.0
Fail
7.5
AAA
4.6
AA
—
White BG
15.7AAA
5.2AA
19.2AAA
11.8AAA
2.5Fail
Black BG
1.3Fail
4.0AA Large
1.1Fail
1.8Fail
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

24242F
626279
101022
434239
B3B268

Deuteranopia

25252E
605E79
12131F
454938
B5B86C

Tritanopia

282B2A
577777
191A18
543534
C27578

Achromatopsia

242424
6A6A6A
0F0F0F
393939
A0A0A0

Shades & Tints Shades & Tints

#281F34

Dark
Light

#56717C

Dark
Light

#1A042B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281f34;
  --color-2: #56717c;
  --color-3: #1a042b;
  --color-4: #56293e;
  --color-5: #c49c57;
}

SCSS

$color-1: #281f34;
$color-2: #56717c;
$color-3: #1a042b;
$color-4: #56293e;
$color-5: #c49c57;

TAILWIND

colors: {
  'brand-1': '#281f34',
  'brand-2': '#56717c',
  'brand-3': '#1a042b',
  'brand-4': '#56293e',
  'brand-5': '#c49c57',
}

RGB Array

[40, 31, 52], [86, 113, 124], [26, 4, 43], [86, 41, 62], [196, 156, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281F34, #56717C, #1A042B, #56293E, #C49C57 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #281f34; --color-2: #56717c; --color-3: #1a042b; --color-4: #56293e; --color-5: #c49c57. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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