← Back to Editor

#A2E6F2 · #48AFC2 · #071012 · #FC5A14 · #FFF3ED

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

#A2E6F2

Sky Blue · LightBlue · Glacier Blue

HEX
#A2E6F2
RGB
rgb(162, 230, 242)
HSL
hsl(189, 75%, 79%)
HSB
hsb(189, 33%, 95%)
CMYK
cmyk(33%, 5%, 0%, 5%)
Oklch
oklch(88.4% 0.070 209.7)

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

#48AFC2

Slate Blue · MediumTurquoise · Lake Green

HEX
#48AFC2
RGB
rgb(72, 175, 194)
HSL
hsl(189, 50%, 52%)
HSB
hsb(189, 63%, 76%)
CMYK
cmyk(63%, 10%, 0%, 24%)
Oklch
oklch(70.2% 0.098 211.8)

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

#071012

Slate Blue · Black · Peacock Green

HEX
#071012
RGB
rgb(7, 16, 18)
HSL
hsl(191, 44%, 5%)
HSB
hsb(191, 61%, 7%)
CMYK
cmyk(61%, 11%, 0%, 93%)
Oklch
oklch(16.5% 0.015 212.6)

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

#FC5A14

Tangerine · OrangeRed · Warm Sun

HEX
#FC5A14
RGB
rgb(252, 90, 20)
HSL
hsl(18, 97%, 53%)
HSB
hsb(18, 92%, 99%)
CMYK
cmyk(0%, 64%, 92%, 1%)
Oklch
oklch(67.7% 0.209 39.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FFF3ED

Apricot · SeaShell · Peach Orange

HEX
#FFF3ED
RGB
rgb(255, 243, 237)
HSL
hsl(20, 100%, 96%)
HSB
hsb(20, 7%, 100%)
CMYK
cmyk(0%, 5%, 7%, 0%)
Oklch
oklch(97.2% 0.015 48.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2E6F2
F2ADA1

Analogous

A1F2D5
A2E6F2
A1BDF2

Triadic

A2E6F2
F2A1E6
E6F2A1

Split-Comp.

A2E6F2
F2A1BD
F2D5A1

Tetradic

A2E6F2
D5A1F2
F2ADA1
BDF2A1

Contrast Matrix WCAG 2.1 Contrast

A2E6F2
48AFC2
071012
FC5A14
FFF3ED
—
1.8
Fail
13.9
AAA
2.3
Fail
1.3
Fail
1.8
Fail
—
7.5
AAA
1.2
Fail
2.4
Fail
13.9
AAA
7.5
AAA
—
6.1
AA
17.7
AAA
2.3
Fail
1.2
Fail
6.1
AA
—
2.9
Fail
1.3
Fail
2.4
Fail
17.7
AAA
2.9
Fail
—
White BG
1.4Fail
2.6Fail
19.2AAA
3.2AA Large
1.1Fail
Black BG
15.1AAA
8.2AAA
1.1Fail
6.6AA
19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFC0EF
7576BD
0B0B12
B6B425
FAFAEE

Deuteranopia

BCB6EE
6F67BC
0A0A11
BFCB29
FBFBEF

Tritanopia

A5EDEC
4DBAB9
071111
F43235
FEF0F0

Achromatopsia

D3D3D3
929292
0E0E0E
828282
F6F6F6

Shades & Tints Shades & Tints

#A2E6F2

Dark
Light

#48AFC2

Dark
Light

#071012

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2e6f2;
  --color-2: #48afc2;
  --color-3: #071012;
  --color-4: #fc5a14;
  --color-5: #fff3ed;
}

SCSS

$color-1: #a2e6f2;
$color-2: #48afc2;
$color-3: #071012;
$color-4: #fc5a14;
$color-5: #fff3ed;

TAILWIND

colors: {
  'brand-1': '#a2e6f2',
  'brand-2': '#48afc2',
  'brand-3': '#071012',
  'brand-4': '#fc5a14',
  'brand-5': '#fff3ed',
}

RGB Array

[162, 230, 242], [72, 175, 194], [7, 16, 18], [252, 90, 20], [255, 243, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A2E6F2, #48AFC2, #071012, #FC5A14, #FFF3ED 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: #a2e6f2; --color-2: #48afc2; --color-3: #071012; --color-4: #fc5a14; --color-5: #fff3ed. 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