← Back to Editor

#131F2C · #263F5D · #2B688E · #6EA9C3 · #B8D2DD

cool

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

#131F2C

Indigo · Black · Deep Sea Blue

HEX
#131F2C
RGB
rgb(19, 31, 44)
HSL
hsl(211, 40%, 12%)
HSB
hsb(211, 57%, 17%)
CMYK
cmyk(57%, 30%, 0%, 83%)
Oklch
oklch(23.5% 0.030 251.1)

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

#263F5D

Indigo · DarkSlateGray · Prussian Blue

HEX
#263F5D
RGB
rgb(38, 63, 93)
HSL
hsl(213, 42%, 26%)
HSB
hsb(213, 59%, 36%)
CMYK
cmyk(59%, 32%, 0%, 64%)
Oklch
oklch(36.2% 0.061 253.8)

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

#2B688E

Lake Blue · Teal · Prussian Blue

HEX
#2B688E
RGB
rgb(43, 104, 142)
HSL
hsl(203, 54%, 36%)
HSB
hsb(203, 70%, 56%)
CMYK
cmyk(70%, 27%, 0%, 44%)
Oklch
oklch(49.5% 0.087 239.4)

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

#6EA9C3

Slate Blue · CadetBlue · Lake Green

HEX
#6EA9C3
RGB
rgb(110, 169, 195)
HSL
hsl(198, 41%, 60%)
HSB
hsb(198, 44%, 76%)
CMYK
cmyk(44%, 13%, 0%, 24%)
Oklch
oklch(70.4% 0.072 227.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#B8D2DD

Sky Blue · LightBlue · Glacier Blue

HEX
#B8D2DD
RGB
rgb(184, 210, 221)
HSL
hsl(198, 35%, 79%)
HSB
hsb(198, 17%, 87%)
CMYK
cmyk(17%, 5%, 0%, 13%)
Oklch
oklch(84.8% 0.032 225.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

131F2C
2B1F12

Analogous

122A2B
131F2C
13122B

Triadic

131F2C
2B121E
1E2B12

Split-Comp.

131F2C
2B1312
2A2B12

Tetradic

131F2C
2B122A
2B1F12
122B13

Contrast Matrix WCAG 2.1 Contrast

131F2C
263F5D
2B688E
6EA9C3
B8D2DD
—
1.5
Fail
2.8
Fail
6.4
AA
10.6
AAA
1.5
Fail
—
1.8
Fail
4.2
AA Large
6.8
AA
2.8
Fail
1.8
Fail
—
2.3
Fail
3.8
AA Large
6.4
AA
4.2
AA Large
2.3
Fail
—
1.6
Fail
10.6
AAA
6.8
AA
3.8
AA Large
1.6
Fail
—
White BG
16.7AAA
10.8AAA
6.0AA
2.6Fail
1.6Fail
Black BG
1.3Fail
2.0Fail
3.5AA Large
8.1AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

181829
313156
454685
8888BD
C3C3DA

Deuteranopia

181728
2F2E54
423D83
8480BB
C2C0DA

Tritanopia

142626
27504F
2E7E7C
71B8B7
B9D8D8

Achromatopsia

1D1D1D
3B3B3B
5A5A5A
9A9A9A
CBCBCB

Shades & Tints Shades & Tints

#131F2C

Dark
Light

#263F5D

Dark
Light

#2B688E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #131f2c;
  --color-2: #263f5d;
  --color-3: #2b688e;
  --color-4: #6ea9c3;
  --color-5: #b8d2dd;
}

SCSS

$color-1: #131f2c;
$color-2: #263f5d;
$color-3: #2b688e;
$color-4: #6ea9c3;
$color-5: #b8d2dd;

TAILWIND

colors: {
  'brand-1': '#131f2c',
  'brand-2': '#263f5d',
  'brand-3': '#2b688e',
  'brand-4': '#6ea9c3',
  'brand-5': '#b8d2dd',
}

RGB Array

[19, 31, 44], [38, 63, 93], [43, 104, 142], [110, 169, 195], [184, 210, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #131F2C, #263F5D, #2B688E, #6EA9C3, #B8D2DD 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: #131f2c; --color-2: #263f5d; --color-3: #2b688e; --color-4: #6ea9c3; --color-5: #b8d2dd. 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 cool-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