← Back to Editor

#76C1E9 · #1E7AAD · #044C7E · #063348 · #192B35

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#76C1E9

Sky Blue · SkyBlue · Cobalt Blue

HEX
#76C1E9
RGB
rgb(118, 193, 233)
HSL
hsl(201, 72%, 69%)
HSB
hsb(201, 49%, 91%)
CMYK
cmyk(49%, 17%, 0%, 9%)
Oklch
oklch(77.7% 0.094 233.1)

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

#1E7AAD

Lake Blue · SteelBlue · Prussian Blue

HEX
#1E7AAD
RGB
rgb(30, 122, 173)
HSL
hsl(201, 70%, 40%)
HSB
hsb(201, 83%, 68%)
CMYK
cmyk(83%, 29%, 0%, 32%)
Oklch
oklch(55.2% 0.114 239.1)

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

#044C7E

Lake Blue · Teal · Prussian Blue

HEX
#044C7E
RGB
rgb(4, 76, 126)
HSL
hsl(205, 94%, 25%)
HSB
hsb(205, 97%, 49%)
CMYK
cmyk(97%, 40%, 0%, 51%)
Oklch
oklch(40.5% 0.105 247.2)

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

#063348

Lake Blue · DarkSlateGray · Peacock Green

HEX
#063348
RGB
rgb(6, 51, 72)
HSL
hsl(199, 85%, 15%)
HSB
hsb(199, 92%, 28%)
CMYK
cmyk(92%, 29%, 0%, 72%)
Oklch
oklch(30.4% 0.059 234.6)

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

#192B35

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#192B35
RGB
rgb(25, 43, 53)
HSL
hsl(201, 36%, 15%)
HSB
hsb(201, 53%, 21%)
CMYK
cmyk(53%, 19%, 0%, 79%)
Oklch
oklch(27.8% 0.030 233.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76C1E9
E99F77

Analogous

77E9D8
76C1E9
7788E9

Triadic

76C1E9
E977C1
C1E977

Split-Comp.

76C1E9
E97788
E9D877

Tetradic

76C1E9
D877E9
E99F77
88E977

Contrast Matrix WCAG 2.1 Contrast

76C1E9
1E7AAD
044C7E
063348
192B35
—
2.4
Fail
4.5
AA
6.7
AA
7.4
AAA
2.4
Fail
—
1.9
Fail
2.8
Fail
3.1
AA Large
4.5
AA
1.9
Fail
—
1.5
Fail
1.6
Fail
6.7
AA
2.8
Fail
1.5
Fail
—
1.1
Fail
7.4
AAA
3.1
AA Large
1.6
Fail
1.1
Fail
—
White BG
2.0Fail
4.7AA
9.0AAA
13.3AAA
14.6AAA
Black BG
10.6AAA
4.4AA Large
2.3Fail
1.6Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9697DF
4647A1
232472
191A43
212133

Deuteranopia

928DDD
413A9E
1F1A6F
171442
201E32

Tritanopia

7AD8D6
239795
086866
083F3E
1A3130

Achromatopsia

AFAFAF
646464
3C3C3C
282828
272727

Shades & Tints Shades & Tints

#76C1E9

Dark
Light

#1E7AAD

Dark
Light

#044C7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76c1e9;
  --color-2: #1e7aad;
  --color-3: #044c7e;
  --color-4: #063348;
  --color-5: #192b35;
}

SCSS

$color-1: #76c1e9;
$color-2: #1e7aad;
$color-3: #044c7e;
$color-4: #063348;
$color-5: #192b35;

TAILWIND

colors: {
  'brand-1': '#76c1e9',
  'brand-2': '#1e7aad',
  'brand-3': '#044c7e',
  'brand-4': '#063348',
  'brand-5': '#192b35',
}

RGB Array

[118, 193, 233], [30, 122, 173], [4, 76, 126], [6, 51, 72], [25, 43, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #76C1E9, #1E7AAD, #044C7E, #063348, #192B35 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #76c1e9; --color-2: #1e7aad; --color-3: #044c7e; --color-4: #063348; --color-5: #192b35. 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 cool-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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