#371A55 + #312F68 + #3A5075 + #4A6D8D + #87B0B6 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#371A55

Deep Indigo · MidnightBlue · Eggplant

HEX

#371A55

RGB

rgb(55, 26, 85)

HSL

hsl(269, 53%, 22%)

HSB

hsb(269, 69%, 33%)

CMYK

cmyk(35%, 69%, 0%, 67%)

Oklch

oklch(29.2% 0.103 303.1)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#312F68

Deep Indigo · MidnightBlue · Prussian Blue

HEX

#312F68

RGB

rgb(49, 47, 104)

HSL

hsl(242, 38%, 30%)

HSB

hsb(242, 55%, 41%)

CMYK

cmyk(53%, 55%, 0%, 59%)

Oklch

oklch(34.0% 0.097 281.5)

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

#3A5075

Indigo · DarkSlateBlue · Prussian Blue

HEX

#3A5075

RGB

rgb(58, 80, 117)

HSL

hsl(218, 34%, 34%)

HSB

hsb(218, 50%, 46%)

CMYK

cmyk(50%, 32%, 0%, 54%)

Oklch

oklch(43.0% 0.068 260.5)

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

#4A6D8D

Slate Blue · SlateGray · Navy Blue

HEX

#4A6D8D

RGB

rgb(74, 109, 141)

HSL

hsl(209, 31%, 42%)

HSB

hsb(209, 48%, 55%)

CMYK

cmyk(48%, 23%, 0%, 45%)

Oklch

oklch(52.2% 0.065 247.0)

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

#87B0B6

Sky Blue · DarkGray · Lake Green

HEX

#87B0B6

RGB

rgb(135, 176, 182)

HSL

hsl(188, 24%, 62%)

HSB

hsb(188, 26%, 71%)

CMYK

cmyk(26%, 3%, 0%, 29%)

Oklch

oklch(73.0% 0.045 207.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

371A55

39561A

Analogous

1A1B56

371A55

551A56

Triadic

371A55

56371A

1A5637

Split-Comp.

371A55

56551A

1B561A

Tetradic

371A55

561A1B

39561A

1A5655

Contrast Matrix WCAG 2.1 Contrast

371A55	312F68	3A5075	4A6D8D	87B0B6
—	1.2 Fail	1.8 Fail	2.7 Fail	6.2 AA
1.2 Fail	—	1.5 Fail	2.2 Fail	5.1 AA
1.8 Fail	1.5 Fail	—	1.5 Fail	3.5 AA Large
2.7 Fail	2.2 Fail	1.5 Fail	—	2.3 Fail
6.2 AA	5.1 AA	3.5 AA Large	2.3 Fail	—

White BG

14.6AAA

12.1AAA

8.1AAA

5.4AA

2.4Fail

Black BG

1.4Fail

1.7Fail

2.6Fail

3.9AA Large

8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A47

30305A

44446C

595985

9999B5

Deuteranopia

2C2E43

303057

42416A

575583

9693B4

Tritanopia

363B39

314F4D

3B6563

4C7F7E

89B3B3

Achromatopsia

292929

363636

4E4E4E

666666

A4A4A4

Shades & Tints Shades & Tints

#371A55

Dark

Light

#312F68

Dark

Light

#3A5075

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #371a55;
  --color-2: #312f68;
  --color-3: #3a5075;
  --color-4: #4a6d8d;
  --color-5: #87b0b6;
}

SCSS

$color-1: #371a55;
$color-2: #312f68;
$color-3: #3a5075;
$color-4: #4a6d8d;
$color-5: #87b0b6;

TAILWIND

colors: {
  'brand-1': '#371a55',
  'brand-2': '#312f68',
  'brand-3': '#3a5075',
  'brand-4': '#4a6d8d',
  'brand-5': '#87b0b6',
}

RGB Array

[55, 26, 85], [49, 47, 104], [58, 80, 117], [74, 109, 141], [135, 176, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #371A55, #312F68, #3A5075, #4A6D8D, #87B0B6 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: #371a55; --color-2: #312f68; --color-3: #3a5075; --color-4: #4a6d8d; --color-5: #87b0b6. 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 sunset-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