#DEF7BC + #BEE38D + #97BF63 + #B87D96 + #F0B4CE · 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

#DEF7BC

Willow Green · Wheat · Mint Green

HEX

#DEF7BC

RGB

rgb(222, 247, 188)

HSL

hsl(85, 79%, 85%)

HSB

hsb(85, 24%, 97%)

CMYK

cmyk(10%, 0%, 24%, 3%)

Oklch

oklch(94.3% 0.081 126.6)

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

#BEE38D

Willow Green · LightGreen · Apple Green

HEX

#BEE38D

RGB

rgb(190, 227, 141)

HSL

hsl(86, 61%, 72%)

HSB

hsb(86, 38%, 89%)

CMYK

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

Oklch

oklch(86.9% 0.118 127.6)

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

#97BF63

Grass Green · DarkSeaGreen · Olive Green

HEX

#97BF63

RGB

rgb(151, 191, 99)

HSL

hsl(86, 42%, 57%)

HSB

hsb(86, 48%, 75%)

CMYK

cmyk(21%, 0%, 48%, 25%)

Oklch

oklch(75.5% 0.128 128.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#B87D96

Rouge · DarkGray · Rose Pink

HEX

#B87D96

RGB

rgb(184, 125, 150)

HSL

hsl(335, 29%, 61%)

HSB

hsb(335, 32%, 72%)

CMYK

cmyk(0%, 32%, 18%, 28%)

Oklch

oklch(65.7% 0.080 352.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F0B4CE

Rouge · Pink · Cherry Blossom

HEX

#F0B4CE

RGB

rgb(240, 180, 206)

HSL

hsl(334, 67%, 82%)

HSB

hsb(334, 25%, 94%)

CMYK

cmyk(0%, 25%, 14%, 6%)

Oklch

oklch(83.2% 0.077 351.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEF7BC

D4BBF7

Analogous

F7F2BB

DEF7BC

C0F7BB

Triadic

DEF7BC

BBDEF7

F7BBDE

Split-Comp.

DEF7BC

BBC0F7

F2BBF7

Tetradic

DEF7BC

BBF7F2

D4BBF7

F7BBC0

Contrast Matrix WCAG 2.1 Contrast

DEF7BC	BEE38D	97BF63	B87D96	F0B4CE
—	1.2 Fail	1.8 Fail	2.8 Fail	1.5 Fail
1.2 Fail	—	1.5 Fail	2.3 Fail	1.2 Fail
1.8 Fail	1.5 Fail	—	1.6 Fail	1.2 Fail
2.8 Fail	2.3 Fail	1.6 Fail	—	1.9 Fail
1.5 Fail	1.2 Fail	1.2 Fail	1.9 Fail	—

White BG

1.2Fail

1.4Fail

2.1Fail

3.3AA Large

1.7Fail

Black BG

18.1AAA

14.6AAA

9.9AAA

6.4AA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9CA

CECEA2

A8A979

9E9E90

D6D5C8

Deuteranopia

E7E5CE

CCC9A7

A6A37F

A2A68F

DADEC6

Tritanopia

DFD6D8

C0B2B6

998B8F

B58B8A

EDC3C2

Achromatopsia

E9E9E9

CECECE

A9A9A9

919191

C9C9C9

Shades & Tints Shades & Tints

#DEF7BC

Dark

Light

#BEE38D

Dark

Light

#97BF63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #def7bc;
  --color-2: #bee38d;
  --color-3: #97bf63;
  --color-4: #b87d96;
  --color-5: #f0b4ce;
}

SCSS

$color-1: #def7bc;
$color-2: #bee38d;
$color-3: #97bf63;
$color-4: #b87d96;
$color-5: #f0b4ce;

TAILWIND

colors: {
  'brand-1': '#def7bc',
  'brand-2': '#bee38d',
  'brand-3': '#97bf63',
  'brand-4': '#b87d96',
  'brand-5': '#f0b4ce',
}

RGB Array

[222, 247, 188], [190, 227, 141], [151, 191, 99], [184, 125, 150], [240, 180, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #DEF7BC, #BEE38D, #97BF63, #B87D96, #F0B4CE 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: #def7bc; --color-2: #bee38d; --color-3: #97bf63; --color-4: #b87d96; --color-5: #f0b4ce. 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