← Back to Editor

#7E838E · #535E76 · #2E4069 · #23195F · #180A2C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#7E838E

Ash · LightSlateGray · Warm Gray

HEX
#7E838E
RGB
rgb(126, 131, 142)
HSL
hsl(221, 7%, 53%)
HSB
hsb(221, 11%, 56%)
CMYK
cmyk(11%, 8%, 0%, 44%)
Oklch
oklch(60.9% 0.018 266.2)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#535E76

Indigo · DimGray · Prussian Blue

HEX
#535E76
RGB
rgb(83, 94, 118)
HSL
hsl(221, 17%, 39%)
HSB
hsb(221, 30%, 46%)
CMYK
cmyk(30%, 20%, 0%, 54%)
Oklch
oklch(48.2% 0.041 265.6)

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

#2E4069

Indigo · DarkSlateGray · Prussian Blue

HEX
#2E4069
RGB
rgb(46, 64, 105)
HSL
hsl(222, 39%, 30%)
HSB
hsb(222, 56%, 41%)
CMYK
cmyk(56%, 39%, 0%, 59%)
Oklch
oklch(37.7% 0.074 265.1)

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

#23195F

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#23195F
RGB
rgb(35, 25, 95)
HSL
hsl(249, 58%, 24%)
HSB
hsb(249, 74%, 37%)
CMYK
cmyk(63%, 74%, 0%, 63%)
Oklch
oklch(27.7% 0.118 282.0)

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

#180A2C

Deep Indigo · Black · Dark Purple

HEX
#180A2C
RGB
rgb(24, 10, 44)
HSL
hsl(265, 63%, 11%)
HSB
hsb(265, 77%, 17%)
CMYK
cmyk(45%, 77%, 0%, 83%)
Oklch
oklch(18.8% 0.066 298.9)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E838E
908A7F

Analogous

7F8C90
7E838E
827F90

Triadic

7E838E
907F84
84907F

Split-Comp.

7E838E
90827F
8C907F

Tetradic

7E838E
907F8C
908A7F
7F9082

Contrast Matrix WCAG 2.1 Contrast

7E838E
535E76
2E4069
23195F
180A2C
—
1.7
Fail
2.7
Fail
4.0
AA Large
4.9
AA
1.7
Fail
—
1.6
Fail
2.3
Fail
2.9
Fail
2.7
Fail
1.6
Fail
—
1.5
Fail
1.8
Fail
4.0
AA Large
2.3
Fail
1.5
Fail
—
1.2
Fail
4.9
AA
2.9
Fail
1.8
Fail
1.2
Fail
—
White BG
3.8AA Large
6.5AA
10.2AAA
15.3AAA
18.8AAA
Black BG
5.5AA
3.2AA Large
2.1Fail
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

80808B
585870
36365F
1F1F4E
121224

Deuteranopia

807F8B
57566F
35335D
1F204A
131422

Tritanopia

7E8989
546C6B
2F5756
23413E
171D1C

Achromatopsia

838383
5D5D5D
3F3F3F
242424
121212

Shades & Tints Shades & Tints

#7E838E

Dark
Light

#535E76

Dark
Light

#2E4069

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e838e;
  --color-2: #535e76;
  --color-3: #2e4069;
  --color-4: #23195f;
  --color-5: #180a2c;
}

SCSS

$color-1: #7e838e;
$color-2: #535e76;
$color-3: #2e4069;
$color-4: #23195f;
$color-5: #180a2c;

TAILWIND

colors: {
  'brand-1': '#7e838e',
  'brand-2': '#535e76',
  'brand-3': '#2e4069',
  'brand-4': '#23195f',
  'brand-5': '#180a2c',
}

RGB Array

[126, 131, 142], [83, 94, 118], [46, 64, 105], [35, 25, 95], [24, 10, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7E838E, #535E76, #2E4069, #23195F, #180A2C 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: #7e838e; --color-2: #535e76; --color-3: #2e4069; --color-4: #23195f; --color-5: #180a2c. 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