#FFF8E3 + #DAF2E7 + #D0DBD7 + #BFB6BF + #9E8D9E · 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

#FFF8E3

Goose Yellow · LightYellow · Lemon Cream

HEX

#FFF8E3

RGB

rgb(255, 248, 227)

HSL

hsl(45, 100%, 95%)

HSB

hsb(45, 11%, 100%)

CMYK

cmyk(0%, 3%, 11%, 0%)

Oklch

oklch(97.9% 0.028 91.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DAF2E7

Jade · Lavender · Mint Green

HEX

#DAF2E7

RGB

rgb(218, 242, 231)

HSL

hsl(153, 48%, 90%)

HSB

hsb(153, 10%, 95%)

CMYK

cmyk(10%, 0%, 5%, 5%)

Oklch

oklch(94.1% 0.029 166.5)

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

#D0DBD7

Jade · LightGray · Mint Green

HEX

#D0DBD7

RGB

rgb(208, 219, 215)

HSL

hsl(158, 13%, 84%)

HSB

hsb(158, 5%, 86%)

CMYK

cmyk(5%, 0%, 2%, 14%)

Oklch

oklch(88.2% 0.013 172.3)

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

#BFB6BF

Silver Gray · Silver · Pearl Gray

HEX

#BFB6BF

RGB

rgb(191, 182, 191)

HSL

hsl(300, 7%, 73%)

HSB

hsb(300, 5%, 75%)

CMYK

cmyk(0%, 5%, 0%, 25%)

Oklch

oklch(78.6% 0.016 325.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#9E8D9E

Rose Purple · DarkGray · Silver Sand

HEX

#9E8D9E

RGB

rgb(158, 141, 158)

HSL

hsl(300, 8%, 59%)

HSB

hsb(300, 11%, 62%)

CMYK

cmyk(0%, 11%, 0%, 38%)

Oklch

oklch(66.4% 0.032 325.9)

Traditional「Rose Purple」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF8E3

E5ECFF

Analogous

FFECE5

FFF8E3

F9FFE5

Triadic

FFF8E3

E5FFF9

F9E5FF

Split-Comp.

FFF8E3

E5F9FF

ECE5FF

Tetradic

FFF8E3

E5FFEC

E5ECFF

FFE5F9

Contrast Matrix WCAG 2.1 Contrast

FFF8E3	DAF2E7	D0DBD7	BFB6BF	9E8D9E
—	1.1 Fail	1.3 Fail	1.9 Fail	2.9 Fail
1.1 Fail	—	1.2 Fail	1.7 Fail	2.6 Fail
1.3 Fail	1.2 Fail	—	1.4 Fail	2.2 Fail
1.9 Fail	1.7 Fail	1.4 Fail	—	1.6 Fail
2.9 Fail	2.6 Fail	2.2 Fail	1.6 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

2.0Fail

3.1AA Large

Black BG

19.8AAA

17.8AAA

14.8AAA

10.7AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCE8

E4E5EA

D5D5D8

BBBBBD

97969A

Deuteranopia

FCFDE9

E3E1EA

D4D3D8

BCBCBC

989999

Tritanopia

FFECED

DBECEC

D1D9D9

BFBBBB

9D9796

Achromatopsia

F8F8F8

EAEAEA

D7D7D7

BABABA

949494

Shades & Tints Shades & Tints

#FFF8E3

Dark

Light

#DAF2E7

Dark

Light

#D0DBD7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff8e3;
  --color-2: #daf2e7;
  --color-3: #d0dbd7;
  --color-4: #bfb6bf;
  --color-5: #9e8d9e;
}

SCSS

$color-1: #fff8e3;
$color-2: #daf2e7;
$color-3: #d0dbd7;
$color-4: #bfb6bf;
$color-5: #9e8d9e;

TAILWIND

colors: {
  'brand-1': '#fff8e3',
  'brand-2': '#daf2e7',
  'brand-3': '#d0dbd7',
  'brand-4': '#bfb6bf',
  'brand-5': '#9e8d9e',
}

RGB Array

[255, 248, 227], [218, 242, 231], [208, 219, 215], [191, 182, 191], [158, 141, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FFF8E3, #DAF2E7, #D0DBD7, #BFB6BF, #9E8D9E 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: #fff8e3; --color-2: #daf2e7; --color-3: #d0dbd7; --color-4: #bfb6bf; --color-5: #9e8d9e. 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