← Back to Editor

#87F3FB · #91E6D0 · #B5D6A1 · #DCB36D · #D64A00

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 App

Color Details Color Details

#87F3FB

Sky Blue · LightSkyBlue · Glacier Blue

HEX
#87F3FB
RGB
rgb(135, 243, 251)
HSL
hsl(184, 94%, 76%)
HSB
hsb(184, 46%, 98%)
CMYK
cmyk(46%, 3%, 0%, 2%)
Oklch
oklch(90.2% 0.100 201.8)

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

#91E6D0

Jade · SkyBlue · Lake Green

HEX
#91E6D0
RGB
rgb(145, 230, 208)
HSL
hsl(164, 63%, 74%)
HSB
hsb(164, 37%, 90%)
CMYK
cmyk(37%, 0%, 10%, 10%)
Oklch
oklch(86.5% 0.089 175.8)

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

#B5D6A1

Celadon · Silver · Apple Green

HEX
#B5D6A1
RGB
rgb(181, 214, 161)
HSL
hsl(97, 39%, 74%)
HSB
hsb(97, 25%, 84%)
CMYK
cmyk(15%, 0%, 25%, 16%)
Oklch
oklch(83.8% 0.080 133.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#DCB36D

Ginger · BurlyWood · Warm Sun

HEX
#DCB36D
RGB
rgb(220, 179, 109)
HSL
hsl(38, 61%, 65%)
HSB
hsb(38, 50%, 86%)
CMYK
cmyk(0%, 19%, 50%, 14%)
Oklch
oklch(78.8% 0.100 79.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D64A00

Tangerine · OrangeRed · Amber Brown

HEX
#D64A00
RGB
rgb(214, 74, 0)
HSL
hsl(21, 100%, 42%)
HSB
hsb(21, 100%, 84%)
CMYK
cmyk(0%, 65%, 100%, 16%)
Oklch
oklch(59.7% 0.187 40.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87F3FB
FB9088

Analogous

88FBC9
87F3FB
88BAFB

Triadic

87F3FB
FB88F4
F4FB88

Split-Comp.

87F3FB
FB88BA
FBC988

Tetradic

87F3FB
C988FB
FB9088
BAFB88

Contrast Matrix WCAG 2.1 Contrast

87F3FB
91E6D0
B5D6A1
DCB36D
D64A00
—
1.1
Fail
1.2
Fail
1.5
Fail
3.4
AA Large
1.1
Fail
—
1.1
Fail
1.3
Fail
3.0
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
2.2
Fail
3.4
AA Large
3.0
Fail
2.7
Fail
2.2
Fail
—
White BG
1.3Fail
1.5Fail
1.6Fail
2.0Fail
4.3AA Large
Black BG
16.2AAA
14.4AAA
13.1AAA
10.7AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B7F9
B6B7D5
C3C4AE
CACA7E
999812

Deuteranopia

B0A7F9
B1ABD7
C1BFB1
CDD082
A2AC16

Tritanopia

8CF8F7
95DADA
B7B8BA
DA8B8E
CF2023

Achromatopsia

D4D4D4
CACACA
C6C6C6
B7B7B7
6B6B6B

Shades & Tints Shades & Tints

#87F3FB

Dark
Light

#91E6D0

Dark
Light

#B5D6A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87f3fb;
  --color-2: #91e6d0;
  --color-3: #b5d6a1;
  --color-4: #dcb36d;
  --color-5: #d64a00;
}

SCSS

$color-1: #87f3fb;
$color-2: #91e6d0;
$color-3: #b5d6a1;
$color-4: #dcb36d;
$color-5: #d64a00;

TAILWIND

colors: {
  'brand-1': '#87f3fb',
  'brand-2': '#91e6d0',
  'brand-3': '#b5d6a1',
  'brand-4': '#dcb36d',
  'brand-5': '#d64a00',
}

RGB Array

[135, 243, 251], [145, 230, 208], [181, 214, 161], [220, 179, 109], [214, 74, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #87F3FB, #91E6D0, #B5D6A1, #DCB36D, #D64A00 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #87f3fb; --color-2: #91e6d0; --color-3: #b5d6a1; --color-4: #dcb36d; --color-5: #d64a00. 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. 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