#98A3A6 + #A4C5DB + #BEE4E4 + #D3F5EE + #8A9199 · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#98A3A6

Ash · DarkGray · Silver Sand

HEX

#98A3A6

RGB

rgb(152, 163, 166)

HSL

hsl(193, 7%, 62%)

HSB

hsb(193, 8%, 65%)

CMYK

cmyk(8%, 2%, 0%, 35%)

Oklch

oklch(70.8% 0.013 215.9)

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

#A4C5DB

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A4C5DB

RGB

rgb(164, 197, 219)

HSL

hsl(204, 43%, 75%)

HSB

hsb(204, 25%, 86%)

CMYK

cmyk(25%, 10%, 0%, 14%)

Oklch

oklch(80.6% 0.047 237.4)

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

#BEE4E4

Sky Blue · LightBlue · Glacier Blue

HEX

#BEE4E4

RGB

rgb(190, 228, 228)

HSL

hsl(180, 41%, 82%)

HSB

hsb(180, 17%, 89%)

CMYK

cmyk(17%, 0%, 0%, 11%)

Oklch

oklch(89.2% 0.040 196.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D3F5EE

Jade · Lavender · Glacier Blue

HEX

#D3F5EE

RGB

rgb(211, 245, 238)

HSL

hsl(168, 63%, 89%)

HSB

hsb(168, 14%, 96%)

CMYK

cmyk(14%, 0%, 3%, 4%)

Oklch

oklch(94.4% 0.036 181.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#8A9199

Ash · LightSlateGray · Silver Sand

HEX

#8A9199

RGB

rgb(138, 145, 153)

HSL

hsl(212, 7%, 57%)

HSB

hsb(212, 10%, 60%)

CMYK

cmyk(10%, 5%, 0%, 40%)

Oklch

oklch(65.3% 0.014 251.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98A3A6

A59A97

Analogous

97A5A1

98A3A6

979BA5

Triadic

98A3A6

A597A2

A2A597

Split-Comp.

98A3A6

A5979B

A5A197

Tetradic

98A3A6

A197A5

A59A97

9BA597

Contrast Matrix WCAG 2.1 Contrast

98A3A6	A4C5DB	BEE4E4	D3F5EE	8A9199
—	1.4 Fail	1.9 Fail	2.2 Fail	1.2 Fail
1.4 Fail	—	1.3 Fail	1.6 Fail	1.8 Fail
1.9 Fail	1.3 Fail	—	1.2 Fail	2.3 Fail
2.2 Fail	1.6 Fail	1.2 Fail	—	2.7 Fail
1.2 Fail	1.8 Fail	2.3 Fail	2.7 Fail	—

White BG

2.6Fail

1.8Fail

1.4Fail

1.2Fail

3.2AA Large

Black BG

8.1AAA

11.6AAA

15.4AAA

18.1AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DA5

B2B3D6

CECFE4

E2E2F0

8D8D97

Deuteranopia

9C9BA5

B0AED4

CCC9E4

E0DDF0

8D8C97

Tritanopia

99A5A5

A6D1D1

C0E4E4

D5F1F1

8A9695

Achromatopsia

A0A0A0

BEBEBE

D9D9D9

EAEAEA

909090

Shades & Tints Shades & Tints

#98A3A6

Dark

Light

#A4C5DB

Dark

Light

#BEE4E4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98a3a6;
  --color-2: #a4c5db;
  --color-3: #bee4e4;
  --color-4: #d3f5ee;
  --color-5: #8a9199;
}

SCSS

$color-1: #98a3a6;
$color-2: #a4c5db;
$color-3: #bee4e4;
$color-4: #d3f5ee;
$color-5: #8a9199;

TAILWIND

colors: {
  'brand-1': '#98a3a6',
  'brand-2': '#a4c5db',
  'brand-3': '#bee4e4',
  'brand-4': '#d3f5ee',
  'brand-5': '#8a9199',
}

RGB Array

[152, 163, 166], [164, 197, 219], [190, 228, 228], [211, 245, 238], [138, 145, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #98A3A6, #A4C5DB, #BEE4E4, #D3F5EE, #8A9199 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: #98a3a6; --color-2: #a4c5db; --color-3: #bee4e4; --color-4: #d3f5ee; --color-5: #8a9199. 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 bright-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