← Back to Editor

#3985AA · #4BD3DF · #AAF4E9 · #D7F5DD · #F1E9CF

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 AppData Visualization

Color Details Color Details

#3985AA

Slate Blue · SteelBlue · Navy Blue

HEX
#3985AA
RGB
rgb(57, 133, 170)
HSL
hsl(200, 50%, 45%)
HSB
hsb(200, 66%, 67%)
CMYK
cmyk(66%, 22%, 0%, 33%)
Oklch
oklch(58.5% 0.093 232.7)

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

#4BD3DF

Lake Blue · MediumTurquoise · Lake Green

HEX
#4BD3DF
RGB
rgb(75, 211, 223)
HSL
hsl(185, 70%, 58%)
HSB
hsb(185, 66%, 87%)
CMYK
cmyk(66%, 5%, 0%, 13%)
Oklch
oklch(79.9% 0.116 203.5)

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

#AAF4E9

Jade · LightBlue · Glacier Blue

HEX
#AAF4E9
RGB
rgb(170, 244, 233)
HSL
hsl(171, 77%, 81%)
HSB
hsb(171, 30%, 96%)
CMYK
cmyk(30%, 0%, 5%, 4%)
Oklch
oklch(91.6% 0.075 184.4)

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

#D7F5DD

Emerald · Beige · Mint Green

HEX
#D7F5DD
RGB
rgb(215, 245, 221)
HSL
hsl(132, 60%, 90%)
HSB
hsb(132, 12%, 96%)
CMYK
cmyk(12%, 0%, 10%, 4%)
Oklch
oklch(94.2% 0.045 151.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#F1E9CF

Goose Yellow · Beige · Lemon Cream

HEX
#F1E9CF
RGB
rgb(241, 233, 207)
HSL
hsl(46, 55%, 88%)
HSB
hsb(46, 14%, 95%)
CMYK
cmyk(0%, 3%, 14%, 5%)
Oklch
oklch(93.4% 0.035 92.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3985AA
AC6039

Analogous

39AC99
3985AA
394CAC

Triadic

3985AA
AC3986
86AC39

Split-Comp.

3985AA
AC394D
AC9939

Tetradic

3985AA
9939AC
AC6039
4DAC39

Contrast Matrix WCAG 2.1 Contrast

3985AA
4BD3DF
AAF4E9
D7F5DD
F1E9CF
—
2.3
Fail
3.3
AA Large
3.5
AA Large
3.4
AA Large
2.3
Fail
—
1.4
Fail
1.5
Fail
1.5
Fail
3.3
AA Large
1.4
Fail
—
1.1
Fail
1.0
Fail
3.5
AA Large
1.5
Fail
1.1
Fail
—
1.0
Fail
3.4
AA Large
1.5
Fail
1.0
Fail
1.0
Fail
—
White BG
4.1AA Large
1.8Fail
1.2Fail
1.2Fail
1.2Fail
Black BG
5.1AA
11.7AAA
16.8AAA
18.0AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5BA1
8687DC
CACBEC
E4E4E3
EEEDD5

Deuteranopia

56509F
7E74DB
C6C0EC
E2E0E4
EEEFD7

Tritanopia

3D9A98
52DAD9
AEEEEE
D9E7E8
F1DADB

Achromatopsia

727272
ACACAC
DDDDDD
E9E9E9
E8E8E8

Shades & Tints Shades & Tints

#3985AA

Dark
Light

#4BD3DF

Dark
Light

#AAF4E9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3985aa;
  --color-2: #4bd3df;
  --color-3: #aaf4e9;
  --color-4: #d7f5dd;
  --color-5: #f1e9cf;
}

SCSS

$color-1: #3985aa;
$color-2: #4bd3df;
$color-3: #aaf4e9;
$color-4: #d7f5dd;
$color-5: #f1e9cf;

TAILWIND

colors: {
  'brand-1': '#3985aa',
  'brand-2': '#4bd3df',
  'brand-3': '#aaf4e9',
  'brand-4': '#d7f5dd',
  'brand-5': '#f1e9cf',
}

RGB Array

[57, 133, 170], [75, 211, 223], [170, 244, 233], [215, 245, 221], [241, 233, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3985AA, #4BD3DF, #AAF4E9, #D7F5DD, #F1E9CF 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: #3985aa; --color-2: #4bd3df; --color-3: #aaf4e9; --color-4: #d7f5dd; --color-5: #f1e9cf. 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 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