← Back to Editor

#637383 · #8595A5 · #AEB7C0 · #C2C8C6 · #D6D8CB

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

WorkspaceReading

Color Details Color Details

#637383

Indigo · SlateGray · Navy Blue

HEX
#637383
RGB
rgb(99, 115, 131)
HSL
hsl(210, 14%, 45%)
HSB
hsb(210, 24%, 51%)
CMYK
cmyk(24%, 12%, 0%, 49%)
Oklch
oklch(54.8% 0.032 248.4)

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

#8595A5

Azure · LightSlateGray · Navy Blue

HEX
#8595A5
RGB
rgb(133, 149, 165)
HSL
hsl(210, 15%, 58%)
HSB
hsb(210, 19%, 65%)
CMYK
cmyk(19%, 10%, 0%, 35%)
Oklch
oklch(66.3% 0.030 248.3)

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

#AEB7C0

Azure · Silver · Cobalt Blue

HEX
#AEB7C0
RGB
rgb(174, 183, 192)
HSL
hsl(210, 12%, 72%)
HSB
hsb(210, 9%, 75%)
CMYK
cmyk(9%, 5%, 0%, 25%)
Oklch
oklch(77.5% 0.016 248.0)

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

#C2C8C6

Silver Gray · Silver · Pearl Gray

HEX
#C2C8C6
RGB
rgb(194, 200, 198)
HSL
hsl(160, 5%, 77%)
HSB
hsb(160, 3%, 78%)
CMYK
cmyk(3%, 0%, 1%, 22%)
Oklch
oklch(82.8% 0.007 174.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D6D8CB

Fresh Green · LightGray · Lemon Cream

HEX
#D6D8CB
RGB
rgb(214, 216, 203)
HSL
hsl(69, 14%, 82%)
HSB
hsb(69, 6%, 85%)
CMYK
cmyk(1%, 0%, 6%, 15%)
Oklch
oklch(87.7% 0.018 113.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

637383
837363

Analogous

638383
637383
636383

Triadic

637383
836373
738363

Split-Comp.

637383
836363
838363

Tetradic

637383
836383
837363
638363

Contrast Matrix WCAG 2.1 Contrast

637383
8595A5
AEB7C0
C2C8C6
D6D8CB
—
1.6
Fail
2.4
Fail
2.9
Fail
3.4
AA Large
1.6
Fail
—
1.5
Fail
1.8
Fail
2.1
Fail
2.4
Fail
1.5
Fail
—
1.2
Fail
1.4
Fail
2.9
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
3.4
AA Large
2.1
Fail
1.4
Fail
1.2
Fail
—
White BG
4.9AA
3.1AA Large
2.0Fail
1.7Fail
1.4Fail
Black BG
4.3AA Large
6.8AA
10.3AAA
12.4AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A7F
8C8CA1
B2B2BE
C5C5C6
D7D7CE

Deuteranopia

69687E
8B8AA0
B1B1BD
C4C4C7
D7D7CF

Tritanopia

647C7B
869E9D
AEBCBC
C2C7C7
D6D1D1

Achromatopsia

707070
929292
B5B5B5
C6C6C6
D6D6D6

Shades & Tints Shades & Tints

#637383

Dark
Light

#8595A5

Dark
Light

#AEB7C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #637383;
  --color-2: #8595a5;
  --color-3: #aeb7c0;
  --color-4: #c2c8c6;
  --color-5: #d6d8cb;
}

SCSS

$color-1: #637383;
$color-2: #8595a5;
$color-3: #aeb7c0;
$color-4: #c2c8c6;
$color-5: #d6d8cb;

TAILWIND

colors: {
  'brand-1': '#637383',
  'brand-2': '#8595a5',
  'brand-3': '#aeb7c0',
  'brand-4': '#c2c8c6',
  'brand-5': '#d6d8cb',
}

RGB Array

[99, 115, 131], [133, 149, 165], [174, 183, 192], [194, 200, 198], [214, 216, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #637383, #8595A5, #AEB7C0, #C2C8C6, #D6D8CB is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #637383; --color-2: #8595a5; --color-3: #aeb7c0; --color-4: #c2c8c6; --color-5: #d6d8cb. 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. 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