← Back to Editor

#C3C7B5 · #A5B8AB · #8CAAAB · #839BA8 · #807980

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

#C3C7B5

Willow Green · Silver · Apple Green

HEX
#C3C7B5
RGB
rgb(195, 199, 181)
HSL
hsl(73, 14%, 75%)
HSB
hsb(73, 9%, 78%)
CMYK
cmyk(2%, 0%, 9%, 22%)
Oklch
oklch(82.2% 0.025 117.1)

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

#A5B8AB

Celadon · DarkGray · Apple Green

HEX
#A5B8AB
RGB
rgb(165, 184, 171)
HSL
hsl(139, 12%, 68%)
HSB
hsb(139, 10%, 72%)
CMYK
cmyk(10%, 0%, 7%, 28%)
Oklch
oklch(76.4% 0.028 155.8)

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

#8CAAAB

Sky Blue · DarkGray · Lake Green

HEX
#8CAAAB
RGB
rgb(140, 170, 171)
HSL
hsl(182, 16%, 61%)
HSB
hsb(182, 18%, 67%)
CMYK
cmyk(18%, 1%, 0%, 33%)
Oklch
oklch(71.6% 0.033 198.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#839BA8

Slate Blue · LightSlateGray · Navy Blue

HEX
#839BA8
RGB
rgb(131, 155, 168)
HSL
hsl(201, 18%, 59%)
HSB
hsb(201, 22%, 66%)
CMYK
cmyk(22%, 8%, 0%, 34%)
Oklch
oklch(67.5% 0.033 231.6)

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

#807980

Ink Gray · Gray · Warm Gray

HEX
#807980
RGB
rgb(128, 121, 128)
HSL
hsl(300, 3%, 49%)
HSB
hsb(300, 5%, 50%)
CMYK
cmyk(0%, 5%, 0%, 50%)
Oklch
oklch(58.5% 0.013 325.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3C7B5
BAB6C8

Analogous

C8C3B6
C3C7B5
BBC8B6

Triadic

C3C7B5
B6C4C8
C8B6C4

Split-Comp.

C3C7B5
B6BBC8
C3B6C8

Tetradic

C3C7B5
B6C8C3
BAB6C8
C8B6BB

Contrast Matrix WCAG 2.1 Contrast

C3C7B5
A5B8AB
8CAAAB
839BA8
807980
—
1.2
Fail
1.4
Fail
1.7
Fail
2.4
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.5
Fail
2.4
Fail
2.0
Fail
1.7
Fail
1.5
Fail
—
White BG
1.7Fail
2.1Fail
2.5Fail
2.9Fail
4.2AA Large
Black BG
12.2AAA
10.0AAA
8.5AAA
7.2AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5B9
ADADAE
9999AB
8D8EA5
7D7D7E

Deuteranopia

C5C4BA
ACABAF
9795AB
8C8AA4
7D7E7E

Tritanopia

C3BDBE
A6B1B1
8EABAB
84A2A2
807D7D

Achromatopsia

C4C4C4
B1B1B1
A1A1A1
959595
7C7C7C

Shades & Tints Shades & Tints

#C3C7B5

Dark
Light

#A5B8AB

Dark
Light

#8CAAAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3c7b5;
  --color-2: #a5b8ab;
  --color-3: #8caaab;
  --color-4: #839ba8;
  --color-5: #807980;
}

SCSS

$color-1: #c3c7b5;
$color-2: #a5b8ab;
$color-3: #8caaab;
$color-4: #839ba8;
$color-5: #807980;

TAILWIND

colors: {
  'brand-1': '#c3c7b5',
  'brand-2': '#a5b8ab',
  'brand-3': '#8caaab',
  'brand-4': '#839ba8',
  'brand-5': '#807980',
}

RGB Array

[195, 199, 181], [165, 184, 171], [140, 170, 171], [131, 155, 168], [128, 121, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3C7B5, #A5B8AB, #8CAAAB, #839BA8, #807980 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: #c3c7b5; --color-2: #a5b8ab; --color-3: #8caaab; --color-4: #839ba8; --color-5: #807980. 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