#979B9E + #A7BDC8 + #E8ECF5 + #F9FADA + #F2F7D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#979B9E

Ash · DarkGray · Silver Sand

HEX

#979B9E

RGB

rgb(151, 155, 158)

HSL

hsl(206, 3%, 61%)

HSB

hsb(206, 4%, 62%)

CMYK

cmyk(4%, 2%, 0%, 38%)

Oklch

oklch(68.7% 0.006 239.9)

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

#A7BDC8

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#A7BDC8

RGB

rgb(167, 189, 200)

HSL

hsl(200, 23%, 72%)

HSB

hsb(200, 16%, 78%)

CMYK

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

Oklch

oklch(78.5% 0.029 229.3)

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

#E8ECF5

Azure · Lavender · Sky Blue

HEX

#E8ECF5

RGB

rgb(232, 236, 245)

HSL

hsl(222, 39%, 94%)

HSB

hsb(222, 5%, 96%)

CMYK

cmyk(5%, 4%, 0%, 4%)

Oklch

oklch(94.3% 0.013 266.7)

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

#F9FADA

Fresh Green · Beige · Lemon Cream

HEX

#F9FADA

RGB

rgb(249, 250, 218)

HSL

hsl(62, 76%, 92%)

HSB

hsb(62, 13%, 98%)

CMYK

cmyk(0%, 0%, 13%, 2%)

Oklch

oklch(97.6% 0.042 108.6)

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

#F2F7D9

Willow Green · Beige · Mint Green

HEX

#F2F7D9

RGB

rgb(242, 247, 217)

HSL

hsl(70, 65%, 91%)

HSB

hsb(70, 12%, 97%)

CMYK

cmyk(2%, 0%, 12%, 3%)

Oklch

oklch(96.5% 0.040 114.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

979B9E

9F9B99

Analogous

999F9E

979B9E

99999F

Triadic

979B9E

9F999C

9C9F99

Split-Comp.

979B9E

9F9999

9F9E99

Tetradic

979B9E

9E999F

9F9B99

999F99

Contrast Matrix WCAG 2.1 Contrast

979B9E	A7BDC8	E8ECF5	F9FADA	F2F7D9
—	1.4 Fail	2.4 Fail	2.6 Fail	2.5 Fail
1.4 Fail	—	1.7 Fail	1.8 Fail	1.8 Fail
2.4 Fail	1.7 Fail	—	1.1 Fail	1.1 Fail
2.6 Fail	1.8 Fail	1.1 Fail	—	1.0 Fail
2.5 Fail	1.8 Fail	1.1 Fail	1.0 Fail	—

White BG

2.8Fail

2.0Fail

1.2Fail

1.1Fail

Black BG

7.5AAA

10.8AAA

17.7AAA

19.7AAA

19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

99999D

B1B1C5

EAEAF3

F9F9E2

F4F4E0

Deuteranopia

99989D

AFAEC5

EAE9F2

F9F9E4

F4F3E2

Tritanopia

979D9D

A8C3C3

E8F1F1

F9E8E9

F2E6E7

Achromatopsia

9A9A9A

B8B8B8

ECECEC

F6F6F6

F2F2F2

Shades & Tints Shades & Tints

#979B9E

Dark

Light

#A7BDC8

Dark

Light

#E8ECF5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #979b9e;
  --color-2: #a7bdc8;
  --color-3: #e8ecf5;
  --color-4: #f9fada;
  --color-5: #f2f7d9;
}

SCSS

$color-1: #979b9e;
$color-2: #a7bdc8;
$color-3: #e8ecf5;
$color-4: #f9fada;
$color-5: #f2f7d9;

TAILWIND

colors: {
  'brand-1': '#979b9e',
  'brand-2': '#a7bdc8',
  'brand-3': '#e8ecf5',
  'brand-4': '#f9fada',
  'brand-5': '#f2f7d9',
}

RGB Array

[151, 155, 158], [167, 189, 200], [232, 236, 245], [249, 250, 218], [242, 247, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #979B9E, #A7BDC8, #E8ECF5, #F9FADA, #F2F7D9 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: #979b9e; --color-2: #a7bdc8; --color-3: #e8ecf5; --color-4: #f9fada; --color-5: #f2f7d9. 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