#1693A5 + #3A709A + #5D4D8F + #812A83 + #A40778 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1693A5

Lake Blue · LightSeaGreen · Mint Ice

HEX

#1693A5

RGB

rgb(22, 147, 165)

HSL

hsl(188, 76%, 37%)

HSB

hsb(188, 87%, 65%)

CMYK

cmyk(87%, 11%, 0%, 35%)

Oklch

oklch(61.0% 0.102 210.5)

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

#3A709A

Slate Blue · SteelBlue · Navy Blue

HEX

#3A709A

RGB

rgb(58, 112, 154)

HSL

hsl(206, 45%, 42%)

HSB

hsb(206, 62%, 60%)

CMYK

cmyk(62%, 27%, 0%, 40%)

Oklch

oklch(52.7% 0.088 244.1)

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

#5D4D8F

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5D4D8F

RGB

rgb(93, 77, 143)

HSL

hsl(255, 30%, 43%)

HSB

hsb(255, 46%, 56%)

CMYK

cmyk(35%, 46%, 0%, 44%)

Oklch

oklch(46.7% 0.105 293.1)

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

#812A83

Royal Purple · Purple · Eggplant

HEX

#812A83

RGB

rgb(129, 42, 131)

HSL

hsl(299, 51%, 34%)

HSB

hsb(299, 68%, 51%)

CMYK

cmyk(2%, 68%, 0%, 49%)

Oklch

oklch(45.1% 0.161 326.9)

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

#A40778

Rose Purple · DarkMagenta · Eggplant

HEX

#A40778

RGB

rgb(164, 7, 120)

HSL

hsl(317, 92%, 34%)

HSB

hsb(317, 96%, 64%)

CMYK

cmyk(0%, 96%, 27%, 36%)

Oklch

oklch(48.2% 0.202 344.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1693A5

A62A17

Analogous

17A671

1693A5

174BA6

Triadic

1693A5

A61793

93A617

Split-Comp.

1693A5

A6174B

A67117

Tetradic

1693A5

7117A6

A62A17

4BA617

Contrast Matrix WCAG 2.1 Contrast

1693A5	3A709A	5D4D8F	812A83	A40778
—	1.5 Fail	2.0 Fail	2.2 Fail	2.0 Fail
1.5 Fail	—	1.4 Fail	1.5 Fail	1.4 Fail
2.0 Fail	1.4 Fail	—	1.1 Fail	1.0 Fail
2.2 Fail	1.5 Fail	1.1 Fail	—	1.1 Fail
2.0 Fail	1.4 Fail	1.0 Fail	1.1 Fail	—

White BG

3.7AA Large

5.3AA

7.2AAA

8.1AAA

7.3AAA

Black BG

5.8AA

4.0AA Large

2.9Fail

2.6Fail

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4DA1

515290

56567F

5B5B6D

605F5D

Deuteranopia

453CA0

4E4A8D

57587B

606768

697556

Tritanopia

1C9D9C

3D8886

5C7270

7D5C59

9C4742

Achromatopsia

707070

656565

595959

4E4E4E

434343

Shades & Tints Shades & Tints

#1693A5

Dark

Light

#3A709A

Dark

Light

#5D4D8F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1693a5;
  --color-2: #3a709a;
  --color-3: #5d4d8f;
  --color-4: #812a83;
  --color-5: #a40778;
}

SCSS

$color-1: #1693a5;
$color-2: #3a709a;
$color-3: #5d4d8f;
$color-4: #812a83;
$color-5: #a40778;

TAILWIND

colors: {
  'brand-1': '#1693a5',
  'brand-2': '#3a709a',
  'brand-3': '#5d4d8f',
  'brand-4': '#812a83',
  'brand-5': '#a40778',
}

RGB Array

[22, 147, 165], [58, 112, 154], [93, 77, 143], [129, 42, 131], [164, 7, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #1693A5, #3A709A, #5D4D8F, #812A83, #A40778 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: #1693a5; --color-2: #3a709a; --color-3: #5d4d8f; --color-4: #812a83; --color-5: #a40778. 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 dark-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