← Back to Editor

#4087D0 · #3EBEE6 · #59E0E9 · #ADD8C7 · #FCDB8E

A 5-color palette 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

#4087D0

Azure · SteelBlue · Navy Blue

HEX
#4087D0
RGB
rgb(64, 135, 208)
HSL
hsl(210, 61%, 53%)
HSB
hsb(210, 69%, 82%)
CMYK
cmyk(69%, 35%, 0%, 18%)
Oklch
oklch(61.2% 0.132 251.4)

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

#3EBEE6

Lake Blue · MediumTurquoise · Lake Green

HEX
#3EBEE6
RGB
rgb(62, 190, 230)
HSL
hsl(194, 77%, 57%)
HSB
hsb(194, 73%, 90%)
CMYK
cmyk(73%, 17%, 0%, 10%)
Oklch
oklch(74.9% 0.122 223.2)

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

#59E0E9

Sky Blue · Turquoise · Lake Green

HEX
#59E0E9
RGB
rgb(89, 224, 233)
HSL
hsl(184, 77%, 63%)
HSB
hsb(184, 62%, 91%)
CMYK
cmyk(62%, 4%, 0%, 9%)
Oklch
oklch(83.7% 0.117 201.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#ADD8C7

Jade · LightSteelBlue · Apple Green

HEX
#ADD8C7
RGB
rgb(173, 216, 199)
HSL
hsl(156, 36%, 76%)
HSB
hsb(156, 20%, 85%)
CMYK
cmyk(20%, 0%, 8%, 15%)
Oklch
oklch(84.7% 0.051 169.0)

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

#FCDB8E

Goose Yellow · Khaki · Lemon Cream

HEX
#FCDB8E
RGB
rgb(252, 219, 142)
HSL
hsl(42, 95%, 77%)
HSB
hsb(42, 44%, 99%)
CMYK
cmyk(0%, 13%, 44%, 1%)
Oklch
oklch(90.2% 0.102 87.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4087D0
D0873E

Analogous

3ED0D0
4087D0
3E3ED0

Triadic

4087D0
D03E87
87D03E

Split-Comp.

4087D0
D03E3E
D0D03E

Tetradic

4087D0
D03ED0
D0873E
3ED03E

Contrast Matrix WCAG 2.1 Contrast

4087D0
3EBEE6
59E0E9
ADD8C7
FCDB8E
—
1.7
Fail
2.4
Fail
2.4
Fail
2.8
Fail
1.7
Fail
—
1.4
Fail
1.4
Fail
1.6
Fail
2.4
Fail
1.4
Fail
—
1.0
Fail
1.2
Fail
2.4
Fail
1.4
Fail
1.0
Fail
—
1.2
Fail
2.8
Fail
1.6
Fail
1.2
Fail
1.2
Fail
—
White BG
3.8AA Large
2.2Fail
1.6Fail
1.6Fail
1.3Fail
Black BG
5.6AA
9.7AAA
13.3AAA
13.4AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5FBE
7577DC
9395E7
C0C0CB
EEEDA1

Deuteranopia

5B55BA
6E64DA
8C82E6
BDBACC
F0F2A5

Tritanopia

44B0AD
44D5D3
60E5E5
AFCECF
FAAFB3

Achromatopsia

7A7A7A
9C9C9C
B9B9B9
C9C9C9
DCDCDC

Shades & Tints Shades & Tints

#4087D0

Dark
Light

#3EBEE6

Dark
Light

#59E0E9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4087d0;
  --color-2: #3ebee6;
  --color-3: #59e0e9;
  --color-4: #add8c7;
  --color-5: #fcdb8e;
}

SCSS

$color-1: #4087d0;
$color-2: #3ebee6;
$color-3: #59e0e9;
$color-4: #add8c7;
$color-5: #fcdb8e;

TAILWIND

colors: {
  'brand-1': '#4087d0',
  'brand-2': '#3ebee6',
  'brand-3': '#59e0e9',
  'brand-4': '#add8c7',
  'brand-5': '#fcdb8e',
}

RGB Array

[64, 135, 208], [62, 190, 230], [89, 224, 233], [173, 216, 199], [252, 219, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4087D0, #3EBEE6, #59E0E9, #ADD8C7, #FCDB8E 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: #4087d0; --color-2: #3ebee6; --color-3: #59e0e9; --color-4: #add8c7; --color-5: #fcdb8e. 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 general-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