← Back to Editor

#2A3467 · #535C83 · #E4D3C1 · #D0A273 · #491A30

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

#2A3467

Indigo · MidnightBlue · Prussian Blue

HEX
#2A3467
RGB
rgb(42, 52, 103)
HSL
hsl(230, 42%, 28%)
HSB
hsb(230, 59%, 40%)
CMYK
cmyk(59%, 50%, 0%, 60%)
Oklch
oklch(34.5% 0.089 272.5)

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

#535C83

Indigo · DarkSlateBlue · Navy Blue

HEX
#535C83
RGB
rgb(83, 92, 131)
HSL
hsl(229, 22%, 42%)
HSB
hsb(229, 37%, 51%)
CMYK
cmyk(37%, 30%, 0%, 49%)
Oklch
oklch(48.3% 0.064 273.8)

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

#E4D3C1

Goose Yellow · Wheat · Peach Orange

HEX
#E4D3C1
RGB
rgb(228, 211, 193)
HSL
hsl(31, 39%, 83%)
HSB
hsb(31, 15%, 89%)
CMYK
cmyk(0%, 7%, 15%, 11%)
Oklch
oklch(87.6% 0.031 69.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D0A273

Ginger · DarkSalmon · Warm Sun

HEX
#D0A273
RGB
rgb(208, 162, 115)
HSL
hsl(30, 50%, 63%)
HSB
hsb(30, 45%, 82%)
CMYK
cmyk(0%, 22%, 45%, 18%)
Oklch
oklch(74.4% 0.083 66.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#491A30

Dark Violet · DarkSlateGray · Raspberry

HEX
#491A30
RGB
rgb(73, 26, 48)
HSL
hsl(332, 47%, 19%)
HSB
hsb(332, 64%, 29%)
CMYK
cmyk(0%, 64%, 34%, 71%)
Oklch
oklch(29.7% 0.077 353.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A3467
655B29

Analogous

295165
2A3467
3D2965

Triadic

2A3467
652933
336529

Split-Comp.

2A3467
653D29
516529

Tetradic

2A3467
652951
655B29
29653D

Contrast Matrix WCAG 2.1 Contrast

2A3467
535C83
E4D3C1
D0A273
491A30
—
1.8
Fail
8.1
AAA
5.1
AA
1.2
Fail
1.8
Fail
—
4.5
AA Large
2.8
Fail
2.2
Fail
8.1
AAA
4.5
AA Large
—
1.6
Fail
9.8
AAA
5.1
AA
2.8
Fail
1.6
Fail
—
6.2
AA
1.2
Fail
2.2
Fail
9.8
AAA
6.2
AA
—
White BG
11.8AAA
6.5AA
1.5Fail
2.3Fail
14.2AAA
Black BG
1.8Fail
3.2AA Large
14.4AAA
9.1AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E5B
57577A
DDDCC5
BCBC7E
35342B

Deuteranopia

2E2D58
565677
DEDFC6
BFC281
373B29

Tritanopia

2B514F
537270
E3C9CA
CE8789
472626

Achromatopsia

373737
5E5E5E
D6D6D6
AAAAAA
2B2B2B

Shades & Tints Shades & Tints

#2A3467

Dark
Light

#535C83

Dark
Light

#E4D3C1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a3467;
  --color-2: #535c83;
  --color-3: #e4d3c1;
  --color-4: #d0a273;
  --color-5: #491a30;
}

SCSS

$color-1: #2a3467;
$color-2: #535c83;
$color-3: #e4d3c1;
$color-4: #d0a273;
$color-5: #491a30;

TAILWIND

colors: {
  'brand-1': '#2a3467',
  'brand-2': '#535c83',
  'brand-3': '#e4d3c1',
  'brand-4': '#d0a273',
  'brand-5': '#491a30',
}

RGB Array

[42, 52, 103], [83, 92, 131], [228, 211, 193], [208, 162, 115], [73, 26, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A3467, #535C83, #E4D3C1, #D0A273, #491A30 is ideal for: 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: #2a3467; --color-2: #535c83; --color-3: #e4d3c1; --color-4: #d0a273; --color-5: #491a30. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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