← Back to Editor

#FF7060 · #FFCFAD · #9FD5EB · #688BB9 · #FFFFFF

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

#FF7060

Peach Pink · Coral · Coral Red

HEX
#FF7060
RGB
rgb(255, 112, 96)
HSL
hsl(6, 100%, 69%)
HSB
hsb(6, 62%, 100%)
CMYK
cmyk(0%, 56%, 62%, 0%)
Oklch
oklch(71.6% 0.178 28.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FFCFAD

Apricot · Wheat · Peach Orange

HEX
#FFCFAD
RGB
rgb(255, 207, 173)
HSL
hsl(25, 100%, 84%)
HSB
hsb(25, 32%, 100%)
CMYK
cmyk(0%, 19%, 32%, 0%)
Oklch
oklch(88.8% 0.071 57.0)

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

#9FD5EB

Sky Blue · LightBlue · Glacier Blue

HEX
#9FD5EB
RGB
rgb(159, 213, 235)
HSL
hsl(197, 66%, 77%)
HSB
hsb(197, 32%, 92%)
CMYK
cmyk(32%, 9%, 0%, 8%)
Oklch
oklch(84.3% 0.064 225.0)

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

#688BB9

Azure · CadetBlue · Navy Blue

HEX
#688BB9
RGB
rgb(104, 139, 185)
HSL
hsl(214, 37%, 57%)
HSB
hsb(214, 44%, 73%)
CMYK
cmyk(44%, 25%, 0%, 27%)
Oklch
oklch(62.9% 0.080 255.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF7060
61EFFF

Analogous

FF61A0
FF7060
FFC061

Triadic

FF7060
61FF71
7161FF

Split-Comp.

FF7060
61FFC0
61A0FF

Tetradic

FF7060
A0FF61
61EFFF
C061FF

Contrast Matrix WCAG 2.1 Contrast

FF7060
FFCFAD
9FD5EB
688BB9
FFFFFF
—
1.9
Fail
1.7
Fail
1.3
Fail
2.7
Fail
1.9
Fail
—
1.1
Fail
2.5
Fail
1.4
Fail
1.7
Fail
1.1
Fail
—
2.2
Fail
1.6
Fail
1.3
Fail
2.5
Fail
2.2
Fail
—
3.5
AA Large
2.7
Fail
1.4
Fail
1.6
Fail
3.5
AA Large
—
White BG
2.7Fail
1.4Fail
1.6Fail
3.5AA Large
1.0Fail
Black BG
7.7AAA
14.8AAA
13.2AAA
6.0AA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C064
EAEAB5
B6B7E6
7777AE
FFFFFF

Deuteranopia

C9D465
EDF1B7
B3AFE4
7573AB
FFFFFF

Tritanopia

F86768
FDBCBD
A2E1E1
6AA5A3
FFFFFF

Achromatopsia

999999
D9D9D9
C7C7C7
868686
FFFFFF

Shades & Tints Shades & Tints

#FF7060

Dark
Light

#FFCFAD

Dark
Light

#9FD5EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff7060;
  --color-2: #ffcfad;
  --color-3: #9fd5eb;
  --color-4: #688bb9;
  --color-5: #ffffff;
}

SCSS

$color-1: #ff7060;
$color-2: #ffcfad;
$color-3: #9fd5eb;
$color-4: #688bb9;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#ff7060',
  'brand-2': '#ffcfad',
  'brand-3': '#9fd5eb',
  'brand-4': '#688bb9',
  'brand-5': '#ffffff',
}

RGB Array

[255, 112, 96], [255, 207, 173], [159, 213, 235], [104, 139, 185], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FF7060, #FFCFAD, #9FD5EB, #688BB9, #FFFFFF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #ff7060; --color-2: #ffcfad; --color-3: #9fd5eb; --color-4: #688bb9; --color-5: #ffffff. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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