← Back to Editor

#150D51 · #535C83 · #F3E6DD · #3D1F2B · #2A3467

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

#150D51

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#150D51
RGB
rgb(21, 13, 81)
HSL
hsl(247, 72%, 18%)
HSB
hsb(247, 84%, 32%)
CMYK
cmyk(74%, 84%, 0%, 68%)
Oklch
oklch(23.0% 0.116 277.5)

Traditional「Deep Indigo」· Paint「Deep Sea 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

#F3E6DD

Apricot · Beige · Peach Orange

HEX
#F3E6DD
RGB
rgb(243, 230, 221)
HSL
hsl(25, 48%, 91%)
HSB
hsb(25, 9%, 95%)
CMYK
cmyk(0%, 5%, 9%, 5%)
Oklch
oklch(93.3% 0.019 57.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#3D1F2B

Dark Violet · DarkSlateGray · Raspberry

HEX
#3D1F2B
RGB
rgb(61, 31, 43)
HSL
hsl(336, 33%, 18%)
HSB
hsb(336, 49%, 24%)
CMYK
cmyk(0%, 49%, 30%, 76%)
Oklch
oklch(28.4% 0.050 355.3)

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

#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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

150D51
474F0D

Analogous

0D264F
150D51
360D4F

Triadic

150D51
4F150D
0D4F15

Split-Comp.

150D51
4F360D
264F0D

Tetradic

150D51
4F0D26
474F0D
0D4F36

Contrast Matrix WCAG 2.1 Contrast

150D51
535C83
F3E6DD
3D1F2B
2A3467
—
2.7
Fail
14.2
AAA
1.2
Fail
1.5
Fail
2.7
Fail
—
5.3
AA
2.3
Fail
1.8
Fail
14.2
AAA
5.3
AA
—
12.0
AAA
9.6
AAA
1.2
Fail
2.3
Fail
12.0
AAA
—
1.2
Fail
1.5
Fail
1.8
Fail
9.6
AAA
1.2
Fail
—
White BG
17.4AAA
6.5AA
1.2Fail
14.7AAA
11.8AAA
Black BG
1.2Fail
3.2AA Large
17.2AAA
1.4Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

121141
57577A
EDEDDF
303028
2E2E5B

Deuteranopia

12133D
565677
EEEFE0
323427
2E2D58

Tritanopia

153431
537270
F2E1E1
3B2625
2B514F

Achromatopsia

171717
5E5E5E
E9E9E9
292929
373737

Shades & Tints Shades & Tints

#150D51

Dark
Light

#535C83

Dark
Light

#F3E6DD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #150d51;
  --color-2: #535c83;
  --color-3: #f3e6dd;
  --color-4: #3d1f2b;
  --color-5: #2a3467;
}

SCSS

$color-1: #150d51;
$color-2: #535c83;
$color-3: #f3e6dd;
$color-4: #3d1f2b;
$color-5: #2a3467;

TAILWIND

colors: {
  'brand-1': '#150d51',
  'brand-2': '#535c83',
  'brand-3': '#f3e6dd',
  'brand-4': '#3d1f2b',
  'brand-5': '#2a3467',
}

RGB Array

[21, 13, 81], [83, 92, 131], [243, 230, 221], [61, 31, 43], [42, 52, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #150D51, #535C83, #F3E6DD, #3D1F2B, #2A3467 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: #150d51; --color-2: #535c83; --color-3: #f3e6dd; --color-4: #3d1f2b; --color-5: #2a3467. 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