#7700D1 + #5B476B + #181430 + #383445 + #697496 · 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

#7700D1

Royal Purple · DarkViolet · Violet

HEX

#7700D1

RGB

rgb(119, 0, 209)

HSL

hsl(274, 100%, 41%)

HSB

hsb(274, 100%, 82%)

CMYK

cmyk(43%, 100%, 0%, 18%)

Oklch

oklch(47.5% 0.254 299.9)

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

#5B476B

Dark Plum · DimGray · Eggplant

HEX

#5B476B

RGB

rgb(91, 71, 107)

HSL

hsl(273, 20%, 35%)

HSB

hsb(273, 34%, 42%)

CMYK

cmyk(15%, 34%, 0%, 58%)

Oklch

oklch(43.4% 0.063 309.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#181430

Deep Indigo · Black · Deep Sea Blue

HEX

#181430

RGB

rgb(24, 20, 48)

HSL

hsl(249, 41%, 13%)

HSB

hsb(249, 58%, 19%)

CMYK

cmyk(50%, 58%, 0%, 81%)

Oklch

oklch(21.3% 0.054 287.5)

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

#383445

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#383445

RGB

rgb(56, 52, 69)

HSL

hsl(254, 14%, 24%)

HSB

hsb(254, 25%, 27%)

CMYK

cmyk(19%, 25%, 0%, 73%)

Oklch

oklch(33.6% 0.030 295.5)

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

#697496

Indigo · SlateGray · Navy Blue

HEX

#697496

RGB

rgb(105, 116, 150)

HSL

hsl(225, 18%, 50%)

HSB

hsb(225, 30%, 59%)

CMYK

cmyk(30%, 23%, 0%, 41%)

Oklch

oklch(56.3% 0.054 270.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7700D1

5BD100

Analogous

0E00D1

7700D1

D100C3

Triadic

7700D1

D17600

00D176

Split-Comp.

7700D1

C3D100

00D10E

Tetradic

7700D1

D10E00

5BD100

00C3D1

Contrast Matrix WCAG 2.1 Contrast

7700D1	5B476B	181430	383445	697496
—	1.1 Fail	2.3 Fail	1.5 Fail	1.7 Fail
1.1 Fail	—	2.2 Fail	1.5 Fail	1.8 Fail
2.3 Fail	2.2 Fail	—	1.5 Fail	3.8 AA Large
1.5 Fail	1.5 Fail	1.5 Fail	—	2.6 Fail
1.7 Fail	1.8 Fail	3.8 AA Large	2.6 Fail	—

White BG

7.8AAA

8.2AAA

17.8AAA

12.0AAA

4.6AA

Black BG

2.7Fail

2.6Fail

1.2Fail

1.7Fail

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43429E

525262

161629

363641

6E6E8E

Deuteranopia

4A5392

545560

171728

373740

6D6C8C

Tritanopia

71776E

5A5B5A

182423

383E3D

6A8786

Achromatopsia

3B3B3B

515151

181818

373737

757575

Shades & Tints Shades & Tints

#7700D1

Dark

Light

#5B476B

Dark

Light

#181430

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7700d1;
  --color-2: #5b476b;
  --color-3: #181430;
  --color-4: #383445;
  --color-5: #697496;
}

SCSS

$color-1: #7700d1;
$color-2: #5b476b;
$color-3: #181430;
$color-4: #383445;
$color-5: #697496;

TAILWIND

colors: {
  'brand-1': '#7700d1',
  'brand-2': '#5b476b',
  'brand-3': '#181430',
  'brand-4': '#383445',
  'brand-5': '#697496',
}

RGB Array

[119, 0, 209], [91, 71, 107], [24, 20, 48], [56, 52, 69], [105, 116, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #7700D1, #5B476B, #181430, #383445, #697496 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: #7700d1; --color-2: #5b476b; --color-3: #181430; --color-4: #383445; --color-5: #697496. 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