#9FC9CF + #C7F0EE + #F3F7E4 + #E8DCD5 + #C7BACF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9FC9CF

Sky Blue · LightSteelBlue · Lake Green

HEX

#9FC9CF

RGB

rgb(159, 201, 207)

HSL

hsl(188, 33%, 72%)

HSB

hsb(188, 23%, 81%)

CMYK

cmyk(23%, 3%, 0%, 19%)

Oklch

oklch(80.8% 0.045 207.1)

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

#C7F0EE

Jade · Lavender · Glacier Blue

HEX

#C7F0EE

RGB

rgb(199, 240, 238)

HSL

hsl(177, 58%, 86%)

HSB

hsb(177, 17%, 94%)

CMYK

cmyk(17%, 0%, 1%, 6%)

Oklch

oklch(92.6% 0.042 192.8)

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

#F3F7E4

Willow Green · Beige · Mint Green

HEX

#F3F7E4

RGB

rgb(243, 247, 228)

HSL

hsl(73, 54%, 93%)

HSB

hsb(73, 8%, 97%)

CMYK

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

Oklch

oklch(96.8% 0.025 116.5)

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

#E8DCD5

Apricot · LightGray · Peach Orange

HEX

#E8DCD5

RGB

rgb(232, 220, 213)

HSL

hsl(22, 29%, 87%)

HSB

hsb(22, 8%, 91%)

CMYK

cmyk(0%, 5%, 8%, 9%)

Oklch

oklch(90.2% 0.016 52.5)

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

#C7BACF

Lilac · Silver · Lilac Purple

HEX

#C7BACF

RGB

rgb(199, 186, 207)

HSL

hsl(277, 18%, 77%)

HSB

hsb(277, 10%, 81%)

CMYK

cmyk(4%, 10%, 0%, 19%)

Oklch

oklch(80.6% 0.032 312.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FC9CF

CFA6A0

Analogous

A0CFBE

9FC9CF

A0B1CF

Triadic

9FC9CF

CFA0C9

C9CFA0

Split-Comp.

9FC9CF

CFA0B1

CFBEA0

Tetradic

9FC9CF

BEA0CF

CFA6A0

B1CFA0

Contrast Matrix WCAG 2.1 Contrast

9FC9CF	C7F0EE	F3F7E4	E8DCD5	C7BACF
—	1.5 Fail	1.6 Fail	1.3 Fail	1.0 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.5 Fail
1.6 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.3 Fail	1.1 Fail	1.2 Fail	—	1.4 Fail
1.0 Fail	1.5 Fail	1.7 Fail	1.4 Fail	—

White BG

1.8Fail

1.2Fail

1.1Fail

1.3Fail

1.8Fail

Black BG

11.7AAA

17.1AAA

19.2AAA

15.6AAA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B2CE

D9D9EE

F5F5E9

E3E3D7

C1C1CA

Deuteranopia

AFACCD

D6D3EF

F5F4EA

E4E4D7

C2C3C9

Tritanopia

A1CCCC

C9EFEF

F3ECED

E7D8D8

C6C6C5

Achromatopsia

BDBDBD

E4E4E4

F4F4F4

DFDFDF

C0C0C0

Shades & Tints Shades & Tints

#9FC9CF

Dark

Light

#C7F0EE

Dark

Light

#F3F7E4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fc9cf;
  --color-2: #c7f0ee;
  --color-3: #f3f7e4;
  --color-4: #e8dcd5;
  --color-5: #c7bacf;
}

SCSS

$color-1: #9fc9cf;
$color-2: #c7f0ee;
$color-3: #f3f7e4;
$color-4: #e8dcd5;
$color-5: #c7bacf;

TAILWIND

colors: {
  'brand-1': '#9fc9cf',
  'brand-2': '#c7f0ee',
  'brand-3': '#f3f7e4',
  'brand-4': '#e8dcd5',
  'brand-5': '#c7bacf',
}

RGB Array

[159, 201, 207], [199, 240, 238], [243, 247, 228], [232, 220, 213], [199, 186, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FC9CF, #C7F0EE, #F3F7E4, #E8DCD5, #C7BACF 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: #9fc9cf; --color-2: #c7f0ee; --color-3: #f3f7e4; --color-4: #e8dcd5; --color-5: #c7bacf. 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