← Back to Editor

#1F1F37 · #373064 · #316B93 · #7EA89E · #F9E4AF

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1F1F37

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1F1F37
RGB
rgb(31, 31, 55)
HSL
hsl(240, 28%, 17%)
HSB
hsb(240, 44%, 22%)
CMYK
cmyk(44%, 44%, 0%, 78%)
Oklch
oklch(25.2% 0.045 282.7)

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

#373064

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#373064
RGB
rgb(55, 48, 100)
HSL
hsl(248, 35%, 29%)
HSB
hsb(248, 52%, 39%)
CMYK
cmyk(45%, 52%, 0%, 61%)
Oklch
oklch(34.5% 0.088 287.0)

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

#316B93

Slate Blue · SteelBlue · Prussian Blue

HEX
#316B93
RGB
rgb(49, 107, 147)
HSL
hsl(204, 50%, 38%)
HSB
hsb(204, 67%, 58%)
CMYK
cmyk(67%, 27%, 0%, 42%)
Oklch
oklch(50.7% 0.088 241.5)

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

#7EA89E

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#7EA89E
RGB
rgb(126, 168, 158)
HSL
hsl(166, 19%, 58%)
HSB
hsb(166, 25%, 66%)
CMYK
cmyk(25%, 0%, 6%, 34%)
Oklch
oklch(69.8% 0.048 178.5)

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

#F9E4AF

Goose Yellow · Wheat · Lemon Cream

HEX
#F9E4AF
RGB
rgb(249, 228, 175)
HSL
hsl(43, 86%, 83%)
HSB
hsb(43, 30%, 98%)
CMYK
cmyk(0%, 8%, 30%, 2%)
Oklch
oklch(92.3% 0.072 88.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F1F37
37371F

Analogous

1F2B37
1F1F37
2B1F37

Triadic

1F1F37
371F1F
1F371F

Split-Comp.

1F1F37
372B1F
2B371F

Tetradic

1F1F37
371F2B
37371F
1F372B

Contrast Matrix WCAG 2.1 Contrast

1F1F37
373064
316B93
7EA89E
F9E4AF
—
1.4
Fail
2.8
Fail
6.1
AA
12.8
AAA
1.4
Fail
—
2.1
Fail
4.5
AA
9.5
AAA
2.8
Fail
2.1
Fail
—
2.2
Fail
4.6
AA
6.1
AA
4.5
AA
2.2
Fail
—
2.1
Fail
12.8
AAA
9.5
AAA
4.6
AA
2.1
Fail
—
White BG
16.0AAA
11.9AAA
5.7AA
2.6Fail
1.3Fail
Black BG
1.3Fail
1.8Fail
3.7AA Large
8.0AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F31
343457
4A4B89
9091A0
F0F0BC

Deuteranopia

1F1F30
343554
474287
8E8BA1
F1F3BF

Tritanopia

1F2D2C
374D4B
348280
80A2A3
F8C6C8

Achromatopsia

222222
383838
5E5E5E
9A9A9A
E4E4E4

Shades & Tints Shades & Tints

#1F1F37

Dark
Light

#373064

Dark
Light

#316B93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f1f37;
  --color-2: #373064;
  --color-3: #316b93;
  --color-4: #7ea89e;
  --color-5: #f9e4af;
}

SCSS

$color-1: #1f1f37;
$color-2: #373064;
$color-3: #316b93;
$color-4: #7ea89e;
$color-5: #f9e4af;

TAILWIND

colors: {
  'brand-1': '#1f1f37',
  'brand-2': '#373064',
  'brand-3': '#316b93',
  'brand-4': '#7ea89e',
  'brand-5': '#f9e4af',
}

RGB Array

[31, 31, 55], [55, 48, 100], [49, 107, 147], [126, 168, 158], [249, 228, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #1F1F37, #373064, #316B93, #7EA89E, #F9E4AF 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: #1f1f37; --color-2: #373064; --color-3: #316b93; --color-4: #7ea89e; --color-5: #f9e4af. 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