#637C7D + #5BA7D4 + #99B9D5 + #D6CBD5 + #FAAA93 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#637C7D

Slate Blue · SlateGray · Mint Ice

HEX

#637C7D

RGB

rgb(99, 124, 125)

HSL

hsl(182, 12%, 44%)

HSB

hsb(182, 21%, 49%)

CMYK

cmyk(21%, 1%, 0%, 51%)

Oklch

oklch(56.7% 0.029 199.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5BA7D4

Lake Blue · CornflowerBlue · Navy Blue

HEX

#5BA7D4

RGB

rgb(91, 167, 212)

HSL

hsl(202, 58%, 59%)

HSB

hsb(202, 57%, 83%)

CMYK

cmyk(57%, 21%, 0%, 17%)

Oklch

oklch(69.7% 0.100 236.6)

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

#99B9D5

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#99B9D5

RGB

rgb(153, 185, 213)

HSL

hsl(208, 42%, 72%)

HSB

hsb(208, 28%, 84%)

CMYK

cmyk(28%, 13%, 0%, 16%)

Oklch

oklch(77.2% 0.053 245.0)

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

#D6CBD5

Mauve · LightGray · Lavender

HEX

#D6CBD5

RGB

rgb(214, 203, 213)

HSL

hsl(305, 12%, 82%)

HSB

hsb(305, 5%, 84%)

CMYK

cmyk(0%, 5%, 0%, 16%)

Oklch

oklch(85.4% 0.018 328.5)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#FAAA93

Peach Pink · LightSalmon · Coral Red

HEX

#FAAA93

RGB

rgb(250, 170, 147)

HSL

hsl(13, 91%, 78%)

HSB

hsb(13, 41%, 98%)

CMYK

cmyk(0%, 32%, 41%, 2%)

Oklch

oklch(81.0% 0.100 36.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

637C7D

7E6463

Analogous

637E71

637C7D

636F7E

Triadic

637C7D

7E637D

7D7E63

Split-Comp.

637C7D

7E636F

7E7163

Tetradic

637C7D

71637E

7E6463

6F7E63

Contrast Matrix WCAG 2.1 Contrast

637C7D	5BA7D4	99B9D5	D6CBD5	FAAA93
—	1.7 Fail	2.2 Fail	2.8 Fail	2.4 Fail
1.7 Fail	—	1.3 Fail	1.7 Fail	1.4 Fail
2.2 Fail	1.3 Fail	—	1.3 Fail	1.1 Fail
2.8 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.4 Fail	1.1 Fail	1.2 Fail	—

White BG

4.5AA Large

2.7Fail

2.0Fail

1.6Fail

1.9Fail

Black BG

4.7AA

7.9AAA

10.3AAA

13.4AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E7D

7C7DC9

A7A7CE

D1D1D3

D7D799

Deuteranopia

6C6B7D

7872C6

A5A3CD

D2D3D2

DCE29A

Tritanopia

647D7D

5FC1BF

9BC9C8

D5D1D0

F69D9E

Achromatopsia

757575

959595

B3B3B3

CFCFCF

BFBFBF

Shades & Tints Shades & Tints

#637C7D

Dark

Light

#5BA7D4

Dark

Light

#99B9D5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #637c7d;
  --color-2: #5ba7d4;
  --color-3: #99b9d5;
  --color-4: #d6cbd5;
  --color-5: #faaa93;
}

SCSS

$color-1: #637c7d;
$color-2: #5ba7d4;
$color-3: #99b9d5;
$color-4: #d6cbd5;
$color-5: #faaa93;

TAILWIND

colors: {
  'brand-1': '#637c7d',
  'brand-2': '#5ba7d4',
  'brand-3': '#99b9d5',
  'brand-4': '#d6cbd5',
  'brand-5': '#faaa93',
}

RGB Array

[99, 124, 125], [91, 167, 212], [153, 185, 213], [214, 203, 213], [250, 170, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #637C7D, #5BA7D4, #99B9D5, #D6CBD5, #FAAA93 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #637c7d; --color-2: #5ba7d4; --color-3: #99b9d5; --color-4: #d6cbd5; --color-5: #faaa93. 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 tech, SaaS, healthcare, eco industries. 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