← Back to Editor

#F7F3C7 · #B7ECDF · #8ED9EA · #D7BBE4 · #F6CEE4

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F7F3C7

Fresh Green · Bisque · Lemon Cream

HEX
#F7F3C7
RGB
rgb(247, 243, 199)
HSL
hsl(55, 75%, 87%)
HSB
hsb(55, 19%, 97%)
CMYK
cmyk(0%, 2%, 19%, 3%)
Oklch
oklch(95.6% 0.057 103.1)

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

#B7ECDF

Jade · LightBlue · Glacier Blue

HEX
#B7ECDF
RGB
rgb(183, 236, 223)
HSL
hsl(165, 58%, 82%)
HSB
hsb(165, 22%, 93%)
CMYK
cmyk(22%, 0%, 6%, 7%)
Oklch
oklch(90.3% 0.057 178.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#8ED9EA

Sky Blue · SkyBlue · Lake Green

HEX
#8ED9EA
RGB
rgb(142, 217, 234)
HSL
hsl(191, 69%, 74%)
HSB
hsb(191, 39%, 92%)
CMYK
cmyk(39%, 7%, 0%, 8%)
Oklch
oklch(84.2% 0.078 213.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D7BBE4

Lilac · LightGray · Lavender

HEX
#D7BBE4
RGB
rgb(215, 187, 228)
HSL
hsl(281, 43%, 81%)
HSB
hsb(281, 18%, 89%)
CMYK
cmyk(6%, 18%, 0%, 11%)
Oklch
oklch(82.9% 0.064 315.1)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#F6CEE4

Mauve · Pink · Cherry Blossom

HEX
#F6CEE4
RGB
rgb(246, 206, 228)
HSL
hsl(327, 69%, 89%)
HSB
hsb(327, 16%, 96%)
CMYK
cmyk(0%, 16%, 7%, 4%)
Oklch
oklch(89.2% 0.053 344.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F3C7
C5C9F7

Analogous

F7DAC5
F7F3C7
E2F7C5

Triadic

F7F3C7
C5F7F3
F3C5F7

Split-Comp.

F7F3C7
C5E2F7
DAC5F7

Tetradic

F7F3C7
C5F7DA
C5C9F7
F7C5E2

Contrast Matrix WCAG 2.1 Contrast

F7F3C7
B7ECDF
8ED9EA
D7BBE4
F6CEE4
—
1.2
Fail
1.4
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
White BG
1.1Fail
1.3Fail
1.6Fail
1.7Fail
1.4Fail
Black BG
18.6AAA
16.1AAA
13.3AAA
12.1AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5D2
CECEE2
AEAFE6
CBCBDA
E5E4DF

Deuteranopia

F6F6D4
CBC7E3
AAA5E5
CDCFD8
E7EADD

Tritanopia

F7DADC
BAE5E5
92E3E2
D6D2D1
F4DADA

Achromatopsia

EFEFEF
DBDBDB
C5C5C5
C8C8C8
DCDCDC

Shades & Tints Shades & Tints

#F7F3C7

Dark
Light

#B7ECDF

Dark
Light

#8ED9EA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f3c7;
  --color-2: #b7ecdf;
  --color-3: #8ed9ea;
  --color-4: #d7bbe4;
  --color-5: #f6cee4;
}

SCSS

$color-1: #f7f3c7;
$color-2: #b7ecdf;
$color-3: #8ed9ea;
$color-4: #d7bbe4;
$color-5: #f6cee4;

TAILWIND

colors: {
  'brand-1': '#f7f3c7',
  'brand-2': '#b7ecdf',
  'brand-3': '#8ed9ea',
  'brand-4': '#d7bbe4',
  'brand-5': '#f6cee4',
}

RGB Array

[247, 243, 199], [183, 236, 223], [142, 217, 234], [215, 187, 228], [246, 206, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F7F3C7, #B7ECDF, #8ED9EA, #D7BBE4, #F6CEE4 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f7f3c7; --color-2: #b7ecdf; --color-3: #8ed9ea; --color-4: #d7bbe4; --color-5: #f6cee4. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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