← Back to Editor

#555C71 · #75A0A7 · #ABE4E0 · #C1E4E4 · #E2E3E9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#555C71

Indigo · DimGray · Prussian Blue

HEX
#555C71
RGB
rgb(85, 92, 113)
HSL
hsl(225, 14%, 39%)
HSB
hsb(225, 25%, 44%)
CMYK
cmyk(25%, 19%, 0%, 56%)
Oklch
oklch(47.7% 0.035 270.6)

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

#75A0A7

Slate Blue · CadetBlue · Lake Green

HEX
#75A0A7
RGB
rgb(117, 160, 167)
HSL
hsl(188, 22%, 56%)
HSB
hsb(188, 30%, 65%)
CMYK
cmyk(30%, 4%, 0%, 35%)
Oklch
oklch(67.7% 0.048 208.6)

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

#ABE4E0

Jade · LightBlue · Glacier Blue

HEX
#ABE4E0
RGB
rgb(171, 228, 224)
HSL
hsl(176, 51%, 78%)
HSB
hsb(176, 25%, 89%)
CMYK
cmyk(25%, 0%, 2%, 11%)
Oklch
oklch(87.9% 0.058 190.8)

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

#C1E4E4

Sky Blue · LightBlue · Glacier Blue

HEX
#C1E4E4
RGB
rgb(193, 228, 228)
HSL
hsl(180, 39%, 83%)
HSB
hsb(180, 15%, 89%)
CMYK
cmyk(15%, 0%, 0%, 11%)
Oklch
oklch(89.4% 0.037 196.5)

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

#E2E3E9

Azure · Lavender · Sky Blue

HEX
#E2E3E9
RGB
rgb(226, 227, 233)
HSL
hsl(231, 14%, 90%)
HSB
hsb(231, 3%, 91%)
CMYK
cmyk(3%, 3%, 0%, 9%)
Oklch
oklch(91.7% 0.008 278.6)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

555C71
716A56

Analogous

566A71
555C71
5C5671

Triadic

555C71
71565C
5C7156

Split-Comp.

555C71
715C56
6A7156

Tetradic

555C71
71566A
716A56
56715C

Contrast Matrix WCAG 2.1 Contrast

555C71
75A0A7
ABE4E0
C1E4E4
E2E3E9
—
2.3
Fail
4.7
AA
4.9
AA
5.2
AA
2.3
Fail
—
2.0
Fail
2.1
Fail
2.2
Fail
4.7
AA
2.0
Fail
—
1.0
Fail
1.1
Fail
4.9
AA
2.1
Fail
1.0
Fail
—
1.1
Fail
5.2
AA
2.2
Fail
1.1
Fail
1.1
Fail
—
White BG
6.7AA
2.9Fail
1.4Fail
1.4Fail
1.3Fail
Black BG
3.2AA Large
7.3AAA
14.9AAA
15.5AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58586C
8888A5
C4C4E1
D0D0E4
E2E2E8

Deuteranopia

58576B
8582A5
C0BCE1
CECCE4
E2E2E7

Tritanopia

556867
77A4A4
AEE2E2
C3E4E4
E2E6E6

Achromatopsia

5C5C5C
949494
D3D3D3
DADADA
E3E3E3

Shades & Tints Shades & Tints

#555C71

Dark
Light

#75A0A7

Dark
Light

#ABE4E0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #555c71;
  --color-2: #75a0a7;
  --color-3: #abe4e0;
  --color-4: #c1e4e4;
  --color-5: #e2e3e9;
}

SCSS

$color-1: #555c71;
$color-2: #75a0a7;
$color-3: #abe4e0;
$color-4: #c1e4e4;
$color-5: #e2e3e9;

TAILWIND

colors: {
  'brand-1': '#555c71',
  'brand-2': '#75a0a7',
  'brand-3': '#abe4e0',
  'brand-4': '#c1e4e4',
  'brand-5': '#e2e3e9',
}

RGB Array

[85, 92, 113], [117, 160, 167], [171, 228, 224], [193, 228, 228], [226, 227, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #555C71, #75A0A7, #ABE4E0, #C1E4E4, #E2E3E9 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #555c71; --color-2: #75a0a7; --color-3: #abe4e0; --color-4: #c1e4e4; --color-5: #e2e3e9. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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