#9CBDC7 + #9A9DB4 + #7EBBA7 + #F4F4D0 + #9DBB7E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CBDC7

Sky Blue · LightSteelBlue · Lake Green

HEX

#9CBDC7

RGB

rgb(156, 189, 199)

HSL

hsl(194, 28%, 70%)

HSB

hsb(194, 22%, 78%)

CMYK

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

Oklch

oklch(77.7% 0.038 218.1)

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

#9A9DB4

Azure · DarkGray · Cobalt Blue

HEX

#9A9DB4

RGB

rgb(154, 157, 180)

HSL

hsl(233, 15%, 65%)

HSB

hsb(233, 14%, 71%)

CMYK

cmyk(14%, 13%, 0%, 29%)

Oklch

oklch(70.1% 0.034 279.6)

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

#7EBBA7

Jade · DarkSeaGreen · Lake Green

HEX

#7EBBA7

RGB

rgb(126, 187, 167)

HSL

hsl(160, 31%, 61%)

HSB

hsb(160, 33%, 73%)

CMYK

cmyk(33%, 0%, 11%, 27%)

Oklch

oklch(74.5% 0.070 171.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#F4F4D0

Fresh Green · Beige · Lemon Cream

HEX

#F4F4D0

RGB

rgb(244, 244, 208)

HSL

hsl(60, 62%, 89%)

HSB

hsb(60, 15%, 96%)

CMYK

cmyk(0%, 0%, 15%, 4%)

Oklch

oklch(95.8% 0.047 107.3)

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

#9DBB7E

Celadon · DarkSeaGreen · Apple Green

HEX

#9DBB7E

RGB

rgb(157, 187, 126)

HSL

hsl(90, 31%, 61%)

HSB

hsb(90, 33%, 73%)

CMYK

cmyk(16%, 0%, 33%, 27%)

Oklch

oklch(75.4% 0.090 129.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CBDC7

C8A79D

Analogous

9DC8BC

9CBDC7

9DA9C8

Triadic

9CBDC7

C89DBE

BEC89D

Split-Comp.

9CBDC7

C89DA9

C8BC9D

Tetradic

9CBDC7

BC9DC8

C8A79D

A9C89D

Contrast Matrix WCAG 2.1 Contrast

9CBDC7	9A9DB4	7EBBA7	F4F4D0	9DBB7E
—	1.3 Fail	1.1 Fail	1.8 Fail	1.1 Fail
1.3 Fail	—	1.2 Fail	2.4 Fail	1.3 Fail
1.1 Fail	1.2 Fail	—	2.0 Fail	1.0 Fail
1.8 Fail	2.4 Fail	2.0 Fail	—	1.9 Fail
1.1 Fail	1.3 Fail	1.0 Fail	1.9 Fail	—

White BG

2.0Fail

2.7Fail

2.2Fail

1.1Fail

2.1Fail

Black BG

10.5AAA

7.9AAA

9.6AAA

18.7AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAABC5

9B9BAE

9899AC

F4F4D9

AAAA8D

Deuteranopia

A8A6C4

9B9BAD

9590AD

F4F4DB

A8A690

Tritanopia

9EC3C2

9AAAA9

81B0B1

F4E0E1

9F989B

Achromatopsia

B4B4B4

9F9F9F

A6A6A6

F0F0F0

ABABAB

Shades & Tints Shades & Tints

#9CBDC7

Dark

Light

#9A9DB4

Dark

Light

#7EBBA7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cbdc7;
  --color-2: #9a9db4;
  --color-3: #7ebba7;
  --color-4: #f4f4d0;
  --color-5: #9dbb7e;
}

SCSS

$color-1: #9cbdc7;
$color-2: #9a9db4;
$color-3: #7ebba7;
$color-4: #f4f4d0;
$color-5: #9dbb7e;

TAILWIND

colors: {
  'brand-1': '#9cbdc7',
  'brand-2': '#9a9db4',
  'brand-3': '#7ebba7',
  'brand-4': '#f4f4d0',
  'brand-5': '#9dbb7e',
}

RGB Array

[156, 189, 199], [154, 157, 180], [126, 187, 167], [244, 244, 208], [157, 187, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CBDC7, #9A9DB4, #7EBBA7, #F4F4D0, #9DBB7E 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: #9cbdc7; --color-2: #9a9db4; --color-3: #7ebba7; --color-4: #f4f4d0; --color-5: #9dbb7e. 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