#9FD5BB + #B5C9AE + #CCBCA0 + #E2B093 + #F8A385 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#9FD5BB

Jade · Silver · Apple Green

HEX

#9FD5BB

RGB

rgb(159, 213, 187)

HSL

hsl(151, 39%, 73%)

HSB

hsb(151, 25%, 84%)

CMYK

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

Oklch

oklch(82.8% 0.067 163.7)

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

#B5C9AE

Celadon · Silver · Apple Green

HEX

#B5C9AE

RGB

rgb(181, 201, 174)

HSL

hsl(104, 20%, 74%)

HSB

hsb(104, 13%, 79%)

CMYK

cmyk(10%, 0%, 13%, 21%)

Oklch

oklch(81.3% 0.043 137.6)

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

#CCBCA0

Goose Yellow · Tan · Warm Sun

HEX

#CCBCA0

RGB

rgb(204, 188, 160)

HSL

hsl(38, 30%, 71%)

HSB

hsb(38, 22%, 80%)

CMYK

cmyk(0%, 8%, 22%, 20%)

Oklch

oklch(80.1% 0.042 81.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E2B093

Apricot · BurlyWood · Warm Sun

HEX

#E2B093

RGB

rgb(226, 176, 147)

HSL

hsl(22, 58%, 73%)

HSB

hsb(22, 35%, 89%)

CMYK

cmyk(0%, 22%, 35%, 11%)

Oklch

oklch(79.6% 0.071 51.5)

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

#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

9FD5BB

D59FB9

Analogous

9FD5A0

9FD5BB

9FD4D5

Triadic

9FD5BB

BB9FD5

D5BB9F

Split-Comp.

9FD5BB

D59FD4

D5A09F

Tetradic

9FD5BB

A09FD5

D59FB9

D4D59F

Contrast Matrix WCAG 2.1 Contrast

9FD5BB	B5C9AE	CCBCA0	E2B093	F8A385
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.8Fail

1.9Fail

2.0Fail

Black BG

12.7AAA

11.9AAA

11.3AAA

10.9AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B7C1

BEBEB5

C5C5A7

CCCC9A

D3D28C

Deuteranopia

B3AFC3

BDBBB6

C6C7A8

CFD39C

D8DF8E

Tritanopia

A2C6C7

B6BABB

CBACAD

E0A0A1

F49293

Achromatopsia

C2C2C2

C0C0C0

BEBEBE

BCBCBC

B9B9B9

Shades & Tints Shades & Tints

#9FD5BB

Dark

Light

#B5C9AE

Dark

Light

#CCBCA0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fd5bb;
  --color-2: #b5c9ae;
  --color-3: #ccbca0;
  --color-4: #e2b093;
  --color-5: #f8a385;
}

SCSS

$color-1: #9fd5bb;
$color-2: #b5c9ae;
$color-3: #ccbca0;
$color-4: #e2b093;
$color-5: #f8a385;

TAILWIND

colors: {
  'brand-1': '#9fd5bb',
  'brand-2': '#b5c9ae',
  'brand-3': '#ccbca0',
  'brand-4': '#e2b093',
  'brand-5': '#f8a385',
}

RGB Array

[159, 213, 187], [181, 201, 174], [204, 188, 160], [226, 176, 147], [248, 163, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #9FD5BB, #B5C9AE, #CCBCA0, #E2B093, #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: #9fd5bb; --color-2: #b5c9ae; --color-3: #ccbca0; --color-4: #e2b093; --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