← Back to Editor

#02174C · #0E2666 · #094456 · #04B7BB · #CAFFEC

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

#02174C

Indigo · MidnightBlue · Deep Sea Blue

HEX
#02174C
RGB
rgb(2, 23, 76)
HSL
hsl(223, 95%, 15%)
HSB
hsb(223, 97%, 30%)
CMYK
cmyk(97%, 70%, 0%, 70%)
Oklch
oklch(23.2% 0.102 262.7)

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

#0E2666

Indigo · MidnightBlue · Prussian Blue

HEX
#0E2666
RGB
rgb(14, 38, 102)
HSL
hsl(224, 76%, 23%)
HSB
hsb(224, 86%, 40%)
CMYK
cmyk(86%, 63%, 0%, 60%)
Oklch
oklch(29.6% 0.117 264.5)

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

#094456

Lake Blue · DarkSlateGray · Peacock Green

HEX
#094456
RGB
rgb(9, 68, 86)
HSL
hsl(194, 81%, 19%)
HSB
hsb(194, 90%, 34%)
CMYK
cmyk(90%, 21%, 0%, 66%)
Oklch
oklch(36.1% 0.064 224.3)

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

#04B7BB

Lake Blue · DarkTurquoise · Mint Ice

HEX
#04B7BB
RGB
rgb(4, 183, 187)
HSL
hsl(181, 96%, 37%)
HSB
hsb(181, 98%, 73%)
CMYK
cmyk(98%, 2%, 0%, 27%)
Oklch
oklch(70.7% 0.120 197.6)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#CAFFEC

Jade · Lavender · Mint Green

HEX
#CAFFEC
RGB
rgb(202, 255, 236)
HSL
hsl(158, 100%, 90%)
HSB
hsb(158, 21%, 100%)
CMYK
cmyk(21%, 0%, 7%, 0%)
Oklch
oklch(95.8% 0.059 171.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

02174C
4B3602

Analogous

023B4B
02174C
12024B

Triadic

02174C
4B0217
174B02

Split-Comp.

02174C
4B1202
3B4B02

Tetradic

02174C
4B023B
4B3602
024B12

Contrast Matrix WCAG 2.1 Contrast

02174C
0E2666
094456
04B7BB
CAFFEC
—
1.2
Fail
1.6
Fail
6.9
AA
15.5
AAA
1.2
Fail
—
1.3
Fail
5.7
AA
12.8
AAA
1.6
Fail
1.3
Fail
—
4.3
AA Large
9.6
AAA
6.9
AA
5.7
AA
4.3
AA Large
—
2.2
Fail
15.5
AAA
12.8
AAA
9.6
AAA
2.2
Fail
—
White BG
17.1AAA
14.1AAA
10.6AAA
2.5Fail
1.1Fail
Black BG
1.2Fail
1.5Fail
2.0Fail
8.5AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0B0B3F
181957
232352
5253BA
E1E1F1

Deuteranopia

0A083C
171553
1F1B51
473ABA
DEDAF2

Tritanopia

033533
0F4A48
0C4E4D
0DB9B9
CDF4F5

Achromatopsia

171717
262626
343434
828282
EDEDED

Shades & Tints Shades & Tints

#02174C

Dark
Light

#0E2666

Dark
Light

#094456

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #02174c;
  --color-2: #0e2666;
  --color-3: #094456;
  --color-4: #04b7bb;
  --color-5: #caffec;
}

SCSS

$color-1: #02174c;
$color-2: #0e2666;
$color-3: #094456;
$color-4: #04b7bb;
$color-5: #caffec;

TAILWIND

colors: {
  'brand-1': '#02174c',
  'brand-2': '#0e2666',
  'brand-3': '#094456',
  'brand-4': '#04b7bb',
  'brand-5': '#caffec',
}

RGB Array

[2, 23, 76], [14, 38, 102], [9, 68, 86], [4, 183, 187], [202, 255, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #02174C, #0E2666, #094456, #04B7BB, #CAFFEC 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: #02174c; --color-2: #0e2666; --color-3: #094456; --color-4: #04b7bb; --color-5: #caffec. 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