#9BBDAD + #9FD3BD + #BDE0BF + #FDFCEA + #DFDC8D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9BBDAD

Jade · DarkGray · Apple Green

HEX

#9BBDAD

RGB

rgb(155, 189, 173)

HSL

hsl(152, 20%, 67%)

HSB

hsb(152, 18%, 74%)

CMYK

cmyk(18%, 0%, 8%, 26%)

Oklch

oklch(76.9% 0.043 165.1)

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

#9FD3BD

Jade · Silver · Apple Green

HEX

#9FD3BD

RGB

rgb(159, 211, 189)

HSL

hsl(155, 37%, 73%)

HSB

hsb(155, 25%, 83%)

CMYK

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

Oklch

oklch(82.4% 0.062 167.0)

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

#BDE0BF

Celadon · Silver · Mint Green

HEX

#BDE0BF

RGB

rgb(189, 224, 191)

HSL

hsl(123, 36%, 81%)

HSB

hsb(123, 16%, 88%)

CMYK

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

Oklch

oklch(87.2% 0.058 146.6)

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

#FDFCEA

Fresh Green · SeaShell · Lemon Cream

HEX

#FDFCEA

RGB

rgb(253, 252, 234)

HSL

hsl(57, 83%, 95%)

HSB

hsb(57, 8%, 99%)

CMYK

cmyk(0%, 0%, 8%, 1%)

Oklch

oklch(98.7% 0.024 104.2)

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

#DFDC8D

Fresh Green · Khaki · Sunflower

HEX

#DFDC8D

RGB

rgb(223, 220, 141)

HSL

hsl(58, 56%, 71%)

HSB

hsb(58, 37%, 87%)

CMYK

cmyk(0%, 1%, 37%, 13%)

Oklch

oklch(87.9% 0.100 106.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BBDAD

BC9AAA

Analogous

9ABC9B

9BBDAD

9ABBBC

Triadic

9BBDAD

AC9ABC

BCAC9A

Split-Comp.

9BBDAD

BC9ABB

BC9B9A

Tetradic

9BBDAD

9B9ABC

BC9AAA

BBBC9A

Contrast Matrix WCAG 2.1 Contrast

9BBDAD	9FD3BD	BDE0BF	FDFCEA	DFDC8D
—	1.2 Fail	1.4 Fail	2.0 Fail	1.4 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.4 Fail	1.0 Fail
2.0 Fail	1.6 Fail	1.4 Fail	—	1.4 Fail
1.4 Fail	1.2 Fail	1.0 Fail	1.4 Fail	—

White BG

2.0Fail

1.7Fail

1.4Fail

1.0Fail

1.4Fail

Black BG

10.3AAA

12.5AAA

14.6AAA

20.3AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAAB1

B6B6C2

CCCCC7

FDFDEE

DEDEA0

Deuteranopia

A8A5B2

B3AFC4

CAC8C9

FDFDEF

DEDEA5

Tritanopia

9DB4B5

A2C7C7

BFCDCF

FDF2F3

DFAFB3

Achromatopsia

B1B1B1

C1C1C1

D2D2D2

FAFAFA

D4D4D4

Shades & Tints Shades & Tints

#9BBDAD

Dark

Light

#9FD3BD

Dark

Light

#BDE0BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bbdad;
  --color-2: #9fd3bd;
  --color-3: #bde0bf;
  --color-4: #fdfcea;
  --color-5: #dfdc8d;
}

SCSS

$color-1: #9bbdad;
$color-2: #9fd3bd;
$color-3: #bde0bf;
$color-4: #fdfcea;
$color-5: #dfdc8d;

TAILWIND

colors: {
  'brand-1': '#9bbdad',
  'brand-2': '#9fd3bd',
  'brand-3': '#bde0bf',
  'brand-4': '#fdfcea',
  'brand-5': '#dfdc8d',
}

RGB Array

[155, 189, 173], [159, 211, 189], [189, 224, 191], [253, 252, 234], [223, 220, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BBDAD, #9FD3BD, #BDE0BF, #FDFCEA, #DFDC8D 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: #9bbdad; --color-2: #9fd3bd; --color-3: #bde0bf; --color-4: #fdfcea; --color-5: #dfdc8d. 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