← Back to Editor

#637B9D · #7297CC · #9AAFC4 · #B2B3B5 · #BEB7B1

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

#637B9D

Indigo · SlateGray · Navy Blue

HEX
#637B9D
RGB
rgb(99, 123, 157)
HSL
hsl(215, 23%, 50%)
HSB
hsb(215, 37%, 62%)
CMYK
cmyk(37%, 22%, 0%, 38%)
Oklch
oklch(57.7% 0.060 257.1)

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

#7297CC

Azure · CornflowerBlue · Cobalt Blue

HEX
#7297CC
RGB
rgb(114, 151, 204)
HSL
hsl(215, 47%, 62%)
HSB
hsb(215, 44%, 80%)
CMYK
cmyk(44%, 26%, 0%, 20%)
Oklch
oklch(67.0% 0.089 257.4)

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

#9AAFC4

Azure · DarkGray · Cobalt Blue

HEX
#9AAFC4
RGB
rgb(154, 175, 196)
HSL
hsl(210, 26%, 69%)
HSB
hsb(210, 21%, 77%)
CMYK
cmyk(21%, 11%, 0%, 23%)
Oklch
oklch(74.5% 0.038 248.3)

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

#B2B3B5

Ash · DarkGray · Silver Sand

HEX
#B2B3B5
RGB
rgb(178, 179, 181)
HSL
hsl(220, 2%, 70%)
HSB
hsb(220, 2%, 71%)
CMYK
cmyk(2%, 1%, 0%, 29%)
Oklch
oklch(76.7% 0.003 264.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BEB7B1

Apricot · Silver · Pearl Gray

HEX
#BEB7B1
RGB
rgb(190, 183, 177)
HSL
hsl(28, 9%, 72%)
HSB
hsb(28, 7%, 75%)
CMYK
cmyk(0%, 4%, 7%, 25%)
Oklch
oklch(78.3% 0.012 63.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

637B9D
9D8462

Analogous

62989D
637B9D
67629D

Triadic

637B9D
9D627B
7B9D62

Split-Comp.

637B9D
9D6762
989D62

Tetradic

637B9D
9D6298
9D8462
629D67

Contrast Matrix WCAG 2.1 Contrast

637B9D
7297CC
9AAFC4
B2B3B5
BEB7B1
—
1.4
Fail
1.9
Fail
2.1
Fail
2.2
Fail
1.4
Fail
—
1.3
Fail
1.4
Fail
1.5
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
2.1
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
2.2
Fail
1.5
Fail
1.1
Fail
1.1
Fail
—
White BG
4.3AA Large
3.0Fail
2.3Fail
2.1Fail
2.0Fail
Black BG
4.9AA
7.0AAA
9.3AAA
10.0AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6E95
8282BF
A3A3BF
B2B2B5
BBBBB2

Deuteranopia

6C6A93
807DBC
A2A0BE
B2B2B4
BBBCB3

Tritanopia

648E8D
74B5B3
9BBBBA
B2B4B4
BEB4B4

Achromatopsia

787878
929292
ABABAB
B3B3B3
B8B8B8

Shades & Tints Shades & Tints

#637B9D

Dark
Light

#7297CC

Dark
Light

#9AAFC4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #637b9d;
  --color-2: #7297cc;
  --color-3: #9aafc4;
  --color-4: #b2b3b5;
  --color-5: #beb7b1;
}

SCSS

$color-1: #637b9d;
$color-2: #7297cc;
$color-3: #9aafc4;
$color-4: #b2b3b5;
$color-5: #beb7b1;

TAILWIND

colors: {
  'brand-1': '#637b9d',
  'brand-2': '#7297cc',
  'brand-3': '#9aafc4',
  'brand-4': '#b2b3b5',
  'brand-5': '#beb7b1',
}

RGB Array

[99, 123, 157], [114, 151, 204], [154, 175, 196], [178, 179, 181], [190, 183, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #637B9D, #7297CC, #9AAFC4, #B2B3B5, #BEB7B1 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: #637b9d; --color-2: #7297cc; --color-3: #9aafc4; --color-4: #b2b3b5; --color-5: #beb7b1. 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