← Back to Editor

#5A839E · #61ADAB · #A3A9C2 · #CCB1BE · #BFC9AF

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 Library

Color Details Color Details

#5A839E

Slate Blue · SlateGray · Navy Blue

HEX
#5A839E
RGB
rgb(90, 131, 158)
HSL
hsl(204, 27%, 49%)
HSB
hsb(204, 43%, 62%)
CMYK
cmyk(43%, 17%, 0%, 38%)
Oklch
oklch(59.0% 0.062 238.0)

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

#61ADAB

Mineral Blue · CadetBlue · Lake Green

HEX
#61ADAB
RGB
rgb(97, 173, 171)
HSL
hsl(178, 32%, 53%)
HSB
hsb(178, 44%, 68%)
CMYK
cmyk(44%, 0%, 1%, 32%)
Oklch
oklch(69.8% 0.076 193.4)

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

#A3A9C2

Azure · DarkGray · Cobalt Blue

HEX
#A3A9C2
RGB
rgb(163, 169, 194)
HSL
hsl(228, 20%, 70%)
HSB
hsb(228, 16%, 76%)
CMYK
cmyk(16%, 13%, 0%, 24%)
Oklch
oklch(73.8% 0.037 274.8)

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

#CCB1BE

Rouge · Silver · Rose Pink

HEX
#CCB1BE
RGB
rgb(204, 177, 190)
HSL
hsl(331, 21%, 75%)
HSB
hsb(331, 13%, 80%)
CMYK
cmyk(0%, 13%, 7%, 20%)
Oklch
oklch(78.8% 0.036 347.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#BFC9AF

Willow Green · Silver · Apple Green

HEX
#BFC9AF
RGB
rgb(191, 201, 175)
HSL
hsl(83, 19%, 74%)
HSB
hsb(83, 13%, 79%)
CMYK
cmyk(5%, 0%, 13%, 21%)
Oklch
oklch(82.1% 0.037 124.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A839E
9F765B

Analogous

5B9F98
5A839E
5B629F

Triadic

5A839E
9F5B84
849F5B

Split-Comp.

5A839E
9F5B62
9F985B

Tetradic

5A839E
985B9F
9F765B
629F5B

Contrast Matrix WCAG 2.1 Contrast

5A839E
61ADAB
A3A9C2
CCB1BE
BFC9AF
—
1.6
Fail
1.7
Fail
2.0
Fail
2.4
Fail
1.6
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.7
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
2.4
Fail
1.5
Fail
1.4
Fail
1.1
Fail
—
White BG
4.1AA Large
2.6Fail
2.3Fail
2.0Fail
1.7Fail
Black BG
5.2AA
8.1AAA
9.0AAA
10.6AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C97
8283AB
A6A6BC
C0C0BB
C3C3B5

Deuteranopia

696696
7E78AC
A5A5BA
C2C4BA
C3C2B7

Tritanopia

5C9291
65ACAC
A3B7B6
CBB8B8
C0BABB

Achromatopsia

7A7A7A
969696
AAAAAA
BBBBBB
C3C3C3

Shades & Tints Shades & Tints

#5A839E

Dark
Light

#61ADAB

Dark
Light

#A3A9C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a839e;
  --color-2: #61adab;
  --color-3: #a3a9c2;
  --color-4: #ccb1be;
  --color-5: #bfc9af;
}

SCSS

$color-1: #5a839e;
$color-2: #61adab;
$color-3: #a3a9c2;
$color-4: #ccb1be;
$color-5: #bfc9af;

TAILWIND

colors: {
  'brand-1': '#5a839e',
  'brand-2': '#61adab',
  'brand-3': '#a3a9c2',
  'brand-4': '#ccb1be',
  'brand-5': '#bfc9af',
}

RGB Array

[90, 131, 158], [97, 173, 171], [163, 169, 194], [204, 177, 190], [191, 201, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A839E, #61ADAB, #A3A9C2, #CCB1BE, #BFC9AF is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #5a839e; --color-2: #61adab; --color-3: #a3a9c2; --color-4: #ccb1be; --color-5: #bfc9af. 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. 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