← Back to Editor

#131428 · #4E5474 · #737E9C · #9094B9 · #C8D0F5

summer

A 5-color summer 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

#131428

Indigo · Black · Deep Sea Blue

HEX
#131428
RGB
rgb(19, 20, 40)
HSL
hsl(237, 36%, 12%)
HSB
hsb(237, 53%, 16%)
CMYK
cmyk(53%, 50%, 0%, 84%)
Oklch
oklch(20.2% 0.040 280.0)

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

#4E5474

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4E5474
RGB
rgb(78, 84, 116)
HSL
hsl(231, 20%, 38%)
HSB
hsb(231, 33%, 45%)
CMYK
cmyk(33%, 28%, 0%, 55%)
Oklch
oklch(45.4% 0.053 275.9)

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

#737E9C

Azure · LightSlateGray · Navy Blue

HEX
#737E9C
RGB
rgb(115, 126, 156)
HSL
hsl(224, 17%, 53%)
HSB
hsb(224, 26%, 61%)
CMYK
cmyk(26%, 19%, 0%, 39%)
Oklch
oklch(59.5% 0.048 269.2)

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

#9094B9

Azure · DarkGray · Cobalt Blue

HEX
#9094B9
RGB
rgb(144, 148, 185)
HSL
hsl(234, 23%, 65%)
HSB
hsb(234, 22%, 73%)
CMYK
cmyk(22%, 20%, 0%, 27%)
Oklch
oklch(67.6% 0.055 280.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C8D0F5

Azure · LightBlue · Sky Blue

HEX
#C8D0F5
RGB
rgb(200, 208, 245)
HSL
hsl(229, 69%, 87%)
HSB
hsb(229, 18%, 96%)
CMYK
cmyk(18%, 15%, 0%, 4%)
Oklch
oklch(86.3% 0.052 275.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

131428
2A2914

Analogous

14202A
131428
1D142A

Triadic

131428
2A1415
152A14

Split-Comp.

131428
2A1D14
202A14

Tetradic

131428
2A1420
2A2914
142A1D

Contrast Matrix WCAG 2.1 Contrast

131428
4E5474
737E9C
9094B9
C8D0F5
—
2.5
Fail
4.5
AA Large
6.1
AA
11.9
AAA
2.5
Fail
—
1.8
Fail
2.5
Fail
4.9
AA
4.5
AA Large
1.8
Fail
—
1.4
Fail
2.7
Fail
6.1
AA
2.5
Fail
1.4
Fail
—
1.9
Fail
11.9
AAA
4.9
AA
2.7
Fail
1.9
Fail
—
White BG
18.1AAA
7.4AAA
4.0AA Large
2.9Fail
1.5Fail
Black BG
1.2Fail
2.8Fail
5.2AA
7.1AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

131323
51516C
787895
9292B0
CBCCEC

Deuteranopia

131322
50506A
777693
9291AE
CBCAEA

Tritanopia

131F1F
4E6665
748F8E
90A9A7
C8E5E3

Achromatopsia

161616
565656
7E7E7E
979797
D2D2D2

Shades & Tints Shades & Tints

#131428

Dark
Light

#4E5474

Dark
Light

#737E9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #131428;
  --color-2: #4e5474;
  --color-3: #737e9c;
  --color-4: #9094b9;
  --color-5: #c8d0f5;
}

SCSS

$color-1: #131428;
$color-2: #4e5474;
$color-3: #737e9c;
$color-4: #9094b9;
$color-5: #c8d0f5;

TAILWIND

colors: {
  'brand-1': '#131428',
  'brand-2': '#4e5474',
  'brand-3': '#737e9c',
  'brand-4': '#9094b9',
  'brand-5': '#c8d0f5',
}

RGB Array

[19, 20, 40], [78, 84, 116], [115, 126, 156], [144, 148, 185], [200, 208, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #131428, #4E5474, #737E9C, #9094B9, #C8D0F5 is ideal for: 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: #131428; --color-2: #4e5474; --color-3: #737e9c; --color-4: #9094b9; --color-5: #c8d0f5. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 summer-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