← Back to Editor

#A3C1BF · #4CACF6 · #71A177 · #757F8B · #51605D

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 Library

Color Details Color Details

#A3C1BF

Jade · Silver · Lake Green

HEX
#A3C1BF
RGB
rgb(163, 193, 191)
HSL
hsl(176, 19%, 70%)
HSB
hsb(176, 16%, 76%)
CMYK
cmyk(16%, 0%, 1%, 24%)
Oklch
oklch(78.8% 0.033 191.6)

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

#4CACF6

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#4CACF6
RGB
rgb(76, 172, 246)
HSL
hsl(206, 90%, 63%)
HSB
hsb(206, 69%, 96%)
CMYK
cmyk(69%, 30%, 0%, 4%)
Oklch
oklch(71.9% 0.141 245.0)

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

#71A177

Celadon · Gray · Olive Green

HEX
#71A177
RGB
rgb(113, 161, 119)
HSL
hsl(128, 20%, 54%)
HSB
hsb(128, 30%, 63%)
CMYK
cmyk(30%, 0%, 26%, 37%)
Oklch
oklch(66.3% 0.080 147.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#757F8B

Indigo · SlateGray · Warm Gray

HEX
#757F8B
RGB
rgb(117, 127, 139)
HSL
hsl(213, 9%, 50%)
HSB
hsb(213, 16%, 55%)
CMYK
cmyk(16%, 9%, 0%, 45%)
Oklch
oklch(59.2% 0.022 253.0)

Traditional「Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#51605D

Mineral Blue · DimGray · Charcoal

HEX
#51605D
RGB
rgb(81, 96, 93)
HSL
hsl(168, 8%, 35%)
HSB
hsb(168, 16%, 38%)
CMYK
cmyk(16%, 0%, 3%, 62%)
Oklch
oklch(47.5% 0.019 182.1)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3C1BF
C1A4A6

Analogous

A4C1B1
A3C1BF
A4B4C1

Triadic

A3C1BF
BFA4C1
C1BFA4

Split-Comp.

A3C1BF
C1A4B4
C1B1A4

Tetradic

A3C1BF
B1A4C1
C1A4A6
B4C1A4

Contrast Matrix WCAG 2.1 Contrast

A3C1BF
4CACF6
71A177
757F8B
51605D
—
1.3
Fail
1.5
Fail
2.1
Fail
3.4
AA Large
1.3
Fail
—
1.2
Fail
1.7
Fail
2.7
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
2.2
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
1.6
Fail
3.4
AA Large
2.7
Fail
2.2
Fail
1.6
Fail
—
White BG
1.9Fail
2.5Fail
3.0Fail
4.1AA Large
6.6AA
Black BG
10.9AAA
8.5AAA
7.1AAA
5.2AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0BF
7676E4
868681
797988
57585E

Deuteranopia

AEACC0
7069E0
837F84
797887
57565E

Tritanopia

A5C0C0
51D6D3
73898B
758685
525E5E

Achromatopsia

B8B8B8
989898
8E8E8E
7D7D7D
5B5B5B

Shades & Tints Shades & Tints

#A3C1BF

Dark
Light

#4CACF6

Dark
Light

#71A177

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3c1bf;
  --color-2: #4cacf6;
  --color-3: #71a177;
  --color-4: #757f8b;
  --color-5: #51605d;
}

SCSS

$color-1: #a3c1bf;
$color-2: #4cacf6;
$color-3: #71a177;
$color-4: #757f8b;
$color-5: #51605d;

TAILWIND

colors: {
  'brand-1': '#a3c1bf',
  'brand-2': '#4cacf6',
  'brand-3': '#71a177',
  'brand-4': '#757f8b',
  'brand-5': '#51605d',
}

RGB Array

[163, 193, 191], [76, 172, 246], [113, 161, 119], [117, 127, 139], [81, 96, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3C1BF, #4CACF6, #71A177, #757F8B, #51605D 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: #a3c1bf; --color-2: #4cacf6; --color-3: #71a177; --color-4: #757f8b; --color-5: #51605d. 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