← Back to Editor

#1B4959 · #577C8A · #A9C2C1 · #E9F2F2 · #D1CDBC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1B4959

Lake Blue · DarkSlateGray · Peacock Green

HEX
#1B4959
RGB
rgb(27, 73, 89)
HSL
hsl(195, 53%, 23%)
HSB
hsb(195, 70%, 35%)
CMYK
cmyk(70%, 18%, 0%, 65%)
Oklch
oklch(38.1% 0.056 224.3)

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

#577C8A

Slate Blue · SlateGray · Mint Ice

HEX
#577C8A
RGB
rgb(87, 124, 138)
HSL
hsl(196, 23%, 44%)
HSB
hsb(196, 37%, 54%)
CMYK
cmyk(37%, 10%, 0%, 46%)
Oklch
oklch(56.4% 0.047 223.5)

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

#A9C2C1

Jade · Silver · Lake Green

HEX
#A9C2C1
RGB
rgb(169, 194, 193)
HSL
hsl(178, 17%, 71%)
HSB
hsb(178, 13%, 76%)
CMYK
cmyk(13%, 0%, 1%, 24%)
Oklch
oklch(79.5% 0.027 193.7)

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

#E9F2F2

Sky Blue · Lavender · Glacier Blue

HEX
#E9F2F2
RGB
rgb(233, 242, 242)
HSL
hsl(180, 26%, 93%)
HSB
hsb(180, 4%, 95%)
CMYK
cmyk(4%, 0%, 0%, 5%)
Oklch
oklch(95.4% 0.010 197.0)

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

#D1CDBC

Goose Yellow · Silver · Lemon Cream

HEX
#D1CDBC
RGB
rgb(209, 205, 188)
HSL
hsl(49, 19%, 78%)
HSB
hsb(49, 10%, 82%)
CMYK
cmyk(0%, 2%, 10%, 18%)
Oklch
oklch(84.7% 0.024 96.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B4959
5A2B1C

Analogous

1C5A4A
1B4959
1C2B5A

Triadic

1B4959
5A1C4A
4A5A1C

Split-Comp.

1B4959
5A1C2B
5A4A1C

Tetradic

1B4959
4A1C5A
5A2B1C
2B5A1C

Contrast Matrix WCAG 2.1 Contrast

1B4959
577C8A
A9C2C1
E9F2F2
D1CDBC
—
2.2
Fail
5.2
AA
8.6
AAA
6.1
AA
2.2
Fail
—
2.4
Fail
4.0
AA Large
2.8
Fail
5.2
AA
2.4
Fail
—
1.7
Fail
1.2
Fail
8.6
AAA
4.0
AA Large
1.7
Fail
—
1.4
Fail
6.1
AA
2.8
Fail
1.2
Fail
1.4
Fail
—
White BG
9.8AAA
4.5AA
1.9Fail
1.1Fail
1.6Fail
Black BG
2.1Fail
4.7AA
11.2AAA
18.4AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F55
676787
B4B4C1
EDEDF2
CFCFC0

Deuteranopia

2C2954
656286
B2B1C1
ECECF2
D0D0C1

Tritanopia

1D5251
598483
AAC1C1
E9F2F2
D1C3C4

Achromatopsia

3D3D3D
737373
BABABA
EFEFEF
CCCCCC

Shades & Tints Shades & Tints

#1B4959

Dark
Light

#577C8A

Dark
Light

#A9C2C1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b4959;
  --color-2: #577c8a;
  --color-3: #a9c2c1;
  --color-4: #e9f2f2;
  --color-5: #d1cdbc;
}

SCSS

$color-1: #1b4959;
$color-2: #577c8a;
$color-3: #a9c2c1;
$color-4: #e9f2f2;
$color-5: #d1cdbc;

TAILWIND

colors: {
  'brand-1': '#1b4959',
  'brand-2': '#577c8a',
  'brand-3': '#a9c2c1',
  'brand-4': '#e9f2f2',
  'brand-5': '#d1cdbc',
}

RGB Array

[27, 73, 89], [87, 124, 138], [169, 194, 193], [233, 242, 242], [209, 205, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1B4959, #577C8A, #A9C2C1, #E9F2F2, #D1CDBC is ideal for: brand design, premium product pages, magazine layouts, 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: #1b4959; --color-2: #577c8a; --color-3: #a9c2c1; --color-4: #e9f2f2; --color-5: #d1cdbc. 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. 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