← Back to Editor

#C8F2F4 · #02C2E1 · #6CAEBD · #F1562B · #766C38

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#C8F2F4

Sky Blue · Lavender · Glacier Blue

HEX
#C8F2F4
RGB
rgb(200, 242, 244)
HSL
hsl(183, 67%, 87%)
HSB
hsb(183, 18%, 96%)
CMYK
cmyk(18%, 1%, 0%, 4%)
Oklch
oklch(93.2% 0.043 200.0)

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

#02C2E1

Lake Blue · DarkTurquoise · Mint Ice

HEX
#02C2E1
RGB
rgb(2, 194, 225)
HSL
hsl(188, 98%, 45%)
HSB
hsb(188, 99%, 88%)
CMYK
cmyk(99%, 14%, 0%, 12%)
Oklch
oklch(74.9% 0.132 214.7)

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

#6CAEBD

Slate Blue · CadetBlue · Lake Green

HEX
#6CAEBD
RGB
rgb(108, 174, 189)
HSL
hsl(191, 38%, 58%)
HSB
hsb(191, 43%, 74%)
CMYK
cmyk(43%, 8%, 0%, 26%)
Oklch
oklch(71.2% 0.071 213.8)

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

#F1562B

Vermilion · Tomato · Passion Red

HEX
#F1562B
RGB
rgb(241, 86, 43)
HSL
hsl(13, 88%, 56%)
HSB
hsb(13, 82%, 95%)
CMYK
cmyk(0%, 64%, 82%, 5%)
Oklch
oklch(65.6% 0.198 35.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#766C38

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#766C38
RGB
rgb(118, 108, 56)
HSL
hsl(50, 36%, 34%)
HSB
hsb(50, 53%, 46%)
CMYK
cmyk(0%, 8%, 53%, 54%)
Oklch
oklch(52.8% 0.073 98.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8F2F4
F4CAC8

Analogous

C8F4E0
C8F2F4
C8DCF4

Triadic

C8F2F4
F4C8F2
F2F4C8

Split-Comp.

C8F2F4
F4C8DC
F4E0C8

Tetradic

C8F2F4
E0C8F4
F4CAC8
DCF4C8

Contrast Matrix WCAG 2.1 Contrast

C8F2F4
02C2E1
6CAEBD
F1562B
766C38
—
1.8
Fail
2.1
Fail
2.9
Fail
4.4
AA Large
1.8
Fail
—
1.2
Fail
1.6
Fail
2.5
Fail
2.1
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
2.9
Fail
1.6
Fail
1.4
Fail
—
1.5
Fail
4.4
AA Large
2.5
Fail
2.1
Fail
1.5
Fail
—
White BG
1.2Fail
2.1Fail
2.5Fail
3.4AA Large
5.3AA
Black BG
17.5AAA
9.8AAA
8.4AAA
6.1AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADBF4
5557D9
8989B9
AEAC35
727245

Deuteranopia

D8D5F3
4A3CD8
8580B8
B7C338
727348

Tritanopia

CAF3F3
0CD4D2
6FB7B6
E93E3F
764F51

Achromatopsia

E6E6E6
8C8C8C
9C9C9C
7F7F7F
696969

Shades & Tints Shades & Tints

#C8F2F4

Dark
Light

#02C2E1

Dark
Light

#6CAEBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8f2f4;
  --color-2: #02c2e1;
  --color-3: #6caebd;
  --color-4: #f1562b;
  --color-5: #766c38;
}

SCSS

$color-1: #c8f2f4;
$color-2: #02c2e1;
$color-3: #6caebd;
$color-4: #f1562b;
$color-5: #766c38;

TAILWIND

colors: {
  'brand-1': '#c8f2f4',
  'brand-2': '#02c2e1',
  'brand-3': '#6caebd',
  'brand-4': '#f1562b',
  'brand-5': '#766c38',
}

RGB Array

[200, 242, 244], [2, 194, 225], [108, 174, 189], [241, 86, 43], [118, 108, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #C8F2F4, #02C2E1, #6CAEBD, #F1562B, #766C38 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #c8f2f4; --color-2: #02c2e1; --color-3: #6caebd; --color-4: #f1562b; --color-5: #766c38. 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 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