#9DB6A1 + #B9C093 + #D4C985 + #F0D377 + #F8A385 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#9DB6A1

Celadon · DarkGray · Apple Green

HEX

#9DB6A1

RGB

rgb(157, 182, 161)

HSL

hsl(130, 15%, 66%)

HSB

hsb(130, 14%, 71%)

CMYK

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

Oklch

oklch(75.1% 0.040 149.8)

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

#B9C093

Fresh Green · Tan · Sunflower

HEX

#B9C093

RGB

rgb(185, 192, 147)

HSL

hsl(69, 26%, 66%)

HSB

hsb(69, 23%, 75%)

CMYK

cmyk(4%, 0%, 23%, 25%)

Oklch

oklch(79.1% 0.061 115.0)

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

#D4C985

Fresh Green · BurlyWood · Sunflower

HEX

#D4C985

RGB

rgb(212, 201, 133)

HSL

hsl(52, 48%, 68%)

HSB

hsb(52, 37%, 83%)

CMYK

cmyk(0%, 5%, 37%, 17%)

Oklch

oklch(82.9% 0.088 100.2)

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

#F0D377

Ginger · Khaki · Sunflower

HEX

#F0D377

RGB

rgb(240, 211, 119)

HSL

hsl(46, 80%, 70%)

HSB

hsb(46, 50%, 94%)

CMYK

cmyk(0%, 12%, 50%, 6%)

Oklch

oklch(87.2% 0.117 92.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F8A385

Apricot · LightSalmon · Warm Sun

HEX

#F8A385

RGB

rgb(248, 163, 133)

HSL

hsl(16, 89%, 75%)

HSB

hsb(16, 46%, 97%)

CMYK

cmyk(0%, 34%, 46%, 3%)

Oklch

oklch(79.3% 0.110 40.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DB6A1

B59BB1

Analogous

A4B59B

9DB6A1

9BB5AD

Triadic

9DB6A1

A09BB5

B5A09B

Split-Comp.

9DB6A1

AD9BB5

B59BA4

Tetradic

9DB6A1

9BA4B5

B59BB1

B5AD9B

Contrast Matrix WCAG 2.1 Contrast

9DB6A1	B9C093	D4C985	F0D377	F8A385
—	1.1 Fail	1.3 Fail	1.5 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.0 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.1 Fail	1.0 Fail	1.2 Fail	1.4 Fail	—

White BG

2.2Fail

1.9Fail

1.7Fail

1.5Fail

2.0Fail

Black BG

9.6AAA

11.0AAA

12.5AAA

14.3AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8A6

BCBC9E

CFCF95

E3E38D

D3D28C

Deuteranopia

A6A5A7

BCBBA1

D0D199

E5E793

D8DF8E

Tritanopia

9EAAAB

B9A6A8

D3A2A5

EF9FA3

F49293

Achromatopsia

ACACAC

B9B9B9

C5C5C5

D1D1D1

B9B9B9

Shades & Tints Shades & Tints

#9DB6A1

Dark

Light

#B9C093

Dark

Light

#D4C985

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9db6a1;
  --color-2: #b9c093;
  --color-3: #d4c985;
  --color-4: #f0d377;
  --color-5: #f8a385;
}

SCSS

$color-1: #9db6a1;
$color-2: #b9c093;
$color-3: #d4c985;
$color-4: #f0d377;
$color-5: #f8a385;

TAILWIND

colors: {
  'brand-1': '#9db6a1',
  'brand-2': '#b9c093',
  'brand-3': '#d4c985',
  'brand-4': '#f0d377',
  'brand-5': '#f8a385',
}

RGB Array

[157, 182, 161], [185, 192, 147], [212, 201, 133], [240, 211, 119], [248, 163, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #9DB6A1, #B9C093, #D4C985, #F0D377, #F8A385 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: #9db6a1; --color-2: #b9c093; --color-3: #d4c985; --color-4: #f0d377; --color-5: #f8a385. 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 pastel-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