#98BEC1 + #8EA19D + #C0C6BA + #EACEC3 + #FADCD2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#98BEC1

Sky Blue · DarkGray · Lake Green

HEX

#98BEC1

RGB

rgb(152, 190, 193)

HSL

hsl(184, 25%, 68%)

HSB

hsb(184, 21%, 76%)

CMYK

cmyk(21%, 2%, 0%, 24%)

Oklch

oklch(77.5% 0.041 202.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8EA19D

Mineral Blue · DarkSeaGreen · Silver Sand

HEX

#8EA19D

RGB

rgb(142, 161, 157)

HSL

hsl(167, 9%, 59%)

HSB

hsb(167, 12%, 63%)

CMYK

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

Oklch

oklch(69.3% 0.022 181.6)

Traditional「Mineral Blue」· Paint「Silver Sand」· Creative Urban Concrete

#C0C6BA

Celadon · Silver · Apple Green

HEX

#C0C6BA

RGB

rgb(192, 198, 186)

HSL

hsl(90, 10%, 75%)

HSB

hsb(90, 6%, 78%)

CMYK

cmyk(3%, 0%, 6%, 22%)

Oklch

oklch(81.8% 0.018 128.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#EACEC3

Apricot · Wheat · Peach Orange

HEX

#EACEC3

RGB

rgb(234, 206, 195)

HSL

hsl(17, 48%, 84%)

HSB

hsb(17, 17%, 92%)

CMYK

cmyk(0%, 12%, 17%, 8%)

Oklch

oklch(87.2% 0.035 42.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FADCD2

Apricot · Bisque · Peach Orange

HEX

#FADCD2

RGB

rgb(250, 220, 210)

HSL

hsl(15, 80%, 90%)

HSB

hsb(15, 16%, 98%)

CMYK

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

Oklch

oklch(91.7% 0.036 39.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98BEC1

C29C99

Analogous

99C2B0

98BEC1

99ABC2

Triadic

98BEC1

C299BF

BFC299

Split-Comp.

98BEC1

C299AB

C2B099

Tetradic

98BEC1

B099C2

C29C99

ABC299

Contrast Matrix WCAG 2.1 Contrast

98BEC1	8EA19D	C0C6BA	EACEC3	FADCD2
—	1.4 Fail	1.1 Fail	1.3 Fail	1.6 Fail
1.4 Fail	—	1.6 Fail	1.8 Fail	2.1 Fail
1.1 Fail	1.6 Fail	—	1.2 Fail	1.3 Fail
1.3 Fail	1.8 Fail	1.2 Fail	—	1.2 Fail
1.6 Fail	2.1 Fail	1.3 Fail	1.2 Fail	—

White BG

2.0Fail

2.7Fail

1.7Fail

1.5Fail

1.3Fail

Black BG

10.5AAA

7.7AAA

12.0AAA

14.1AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A9C0

96969E

C3C3BD

DEDEC6

EDEDD4

Deuteranopia

A6A3C0

95949E

C2C2BE

E0E2C6

EFF1D5

Tritanopia

9AC0C0

8F9F9F

C0BFC0

E9C8C8

F9D6D7

Achromatopsia

B3B3B3

9B9B9B

C3C3C3

D5D5D5

E4E4E4

Shades & Tints Shades & Tints

#98BEC1

Dark

Light

#8EA19D

Dark

Light

#C0C6BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98bec1;
  --color-2: #8ea19d;
  --color-3: #c0c6ba;
  --color-4: #eacec3;
  --color-5: #fadcd2;
}

SCSS

$color-1: #98bec1;
$color-2: #8ea19d;
$color-3: #c0c6ba;
$color-4: #eacec3;
$color-5: #fadcd2;

TAILWIND

colors: {
  'brand-1': '#98bec1',
  'brand-2': '#8ea19d',
  'brand-3': '#c0c6ba',
  'brand-4': '#eacec3',
  'brand-5': '#fadcd2',
}

RGB Array

[152, 190, 193], [142, 161, 157], [192, 198, 186], [234, 206, 195], [250, 220, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98BEC1, #8EA19D, #C0C6BA, #EACEC3, #FADCD2 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: #98bec1; --color-2: #8ea19d; --color-3: #c0c6ba; --color-4: #eacec3; --color-5: #fadcd2. 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