← Back to Editor

#557799 · #AAEEEE · #55BBDD · #208566 · #47C49F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#557799

Indigo · SlateGray · Navy Blue

HEX
#557799
RGB
rgb(85, 119, 153)
HSL
hsl(210, 29%, 47%)
HSB
hsb(210, 44%, 60%)
CMYK
cmyk(44%, 22%, 0%, 40%)
Oklch
oklch(55.7% 0.066 249.1)

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

#AAEEEE

Sky Blue · LightBlue · Glacier Blue

HEX
#AAEEEE
RGB
rgb(170, 238, 238)
HSL
hsl(180, 67%, 80%)
HSB
hsb(180, 29%, 93%)
CMYK
cmyk(29%, 0%, 0%, 7%)
Oklch
oklch(90.4% 0.068 196.0)

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

#55BBDD

Lake Blue · MediumTurquoise · Lake Green

HEX
#55BBDD
RGB
rgb(85, 187, 221)
HSL
hsl(195, 67%, 60%)
HSB
hsb(195, 62%, 87%)
CMYK
cmyk(62%, 15%, 0%, 13%)
Oklch
oklch(74.5% 0.106 223.0)

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

#208566

Mineral Blue · SeaGreen · Mint Ice

HEX
#208566
RGB
rgb(32, 133, 102)
HSL
hsl(162, 61%, 32%)
HSB
hsb(162, 76%, 52%)
CMYK
cmyk(76%, 0%, 23%, 48%)
Oklch
oklch(55.2% 0.102 167.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#47C49F

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#47C49F
RGB
rgb(71, 196, 159)
HSL
hsl(162, 51%, 52%)
HSB
hsb(162, 64%, 77%)
CMYK
cmyk(64%, 0%, 19%, 23%)
Oklch
oklch(74.1% 0.123 169.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

557799
9B7855

Analogous

559B9B
557799
55559B

Triadic

557799
9B5578
789B55

Split-Comp.

557799
9B5555
9B9B55

Tetradic

557799
9B559B
9B7855
559B55

Contrast Matrix WCAG 2.1 Contrast

557799
AAEEEE
55BBDD
208566
47C49F
—
3.6
AA Large
2.1
Fail
1.0
Fail
2.2
Fail
3.6
AA Large
—
1.7
Fail
3.5
AA Large
1.7
Fail
2.1
Fail
1.7
Fail
—
2.1
Fail
1.0
Fail
1.0
Fail
3.5
AA Large
2.1
Fail
—
2.1
Fail
2.2
Fail
1.7
Fail
1.0
Fail
2.1
Fail
—
White BG
4.7AA
1.3Fail
2.2Fail
4.6AA
2.2Fail
Black BG
4.5AA Large
16.2AAA
9.5AAA
4.6AA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646491
C7C8EE
8182D5
4C4D6E
7D7EA8

Deuteranopia

625F8F
C4BEEE
7B74D3
463E6F
766DAA

Tritanopia

578A89
ADEEEE
5ACECD
257375
4DAFB1

Achromatopsia

717171
DADADA
A0A0A0
636363
9A9A9A

Shades & Tints Shades & Tints

#557799

Dark
Light

#AAEEEE

Dark
Light

#55BBDD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #557799;
  --color-2: #aaeeee;
  --color-3: #55bbdd;
  --color-4: #208566;
  --color-5: #47c49f;
}

SCSS

$color-1: #557799;
$color-2: #aaeeee;
$color-3: #55bbdd;
$color-4: #208566;
$color-5: #47c49f;

TAILWIND

colors: {
  'brand-1': '#557799',
  'brand-2': '#aaeeee',
  'brand-3': '#55bbdd',
  'brand-4': '#208566',
  'brand-5': '#47c49f',
}

RGB Array

[85, 119, 153], [170, 238, 238], [85, 187, 221], [32, 133, 102], [71, 196, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #557799, #AAEEEE, #55BBDD, #208566, #47C49F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #557799; --color-2: #aaeeee; --color-3: #55bbdd; --color-4: #208566; --color-5: #47c49f. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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