← Back to Editor

#F2F1E1 · #DDE1C0 · #CCE0C5 · #B7D9C0 · #5C5D61

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 PostIllustrationData Visualization

Color Details Color Details

#F2F1E1

Fresh Green · Beige · Lemon Cream

HEX
#F2F1E1
RGB
rgb(242, 241, 225)
HSL
hsl(56, 40%, 92%)
HSB
hsb(56, 7%, 95%)
CMYK
cmyk(0%, 0%, 7%, 5%)
Oklch
oklch(95.5% 0.021 103.9)

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

#DDE1C0

Fresh Green · LightGray · Lemon Cream

HEX
#DDE1C0
RGB
rgb(221, 225, 192)
HSL
hsl(67, 35%, 82%)
HSB
hsb(67, 15%, 88%)
CMYK
cmyk(2%, 0%, 15%, 12%)
Oklch
oklch(89.8% 0.044 112.9)

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

#CCE0C5

Celadon · LightGray · Mint Green

HEX
#CCE0C5
RGB
rgb(204, 224, 197)
HSL
hsl(104, 30%, 83%)
HSB
hsb(104, 12%, 88%)
CMYK
cmyk(9%, 0%, 12%, 12%)
Oklch
oklch(88.4% 0.042 137.5)

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

#B7D9C0

Celadon · Silver · Apple Green

HEX
#B7D9C0
RGB
rgb(183, 217, 192)
HSL
hsl(136, 31%, 78%)
HSB
hsb(136, 16%, 85%)
CMYK
cmyk(16%, 0%, 12%, 15%)
Oklch
oklch(85.4% 0.050 153.4)

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

#5C5D61

Ink Gray · DimGray · Charcoal

HEX
#5C5D61
RGB
rgb(92, 93, 97)
HSL
hsl(228, 3%, 37%)
HSB
hsb(228, 5%, 38%)
CMYK
cmyk(5%, 4%, 0%, 62%)
Oklch
oklch(47.9% 0.006 274.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F1E1
E2E4F3

Analogous

F3EAE2
F2F1E1
ECF3E2

Triadic

F2F1E1
E2F3F2
F2E2F3

Split-Comp.

F2F1E1
E2ECF3
EAE2F3

Tetradic

F2F1E1
E2F3EA
E2E4F3
F3E2EC

Contrast Matrix WCAG 2.1 Contrast

F2F1E1
DDE1C0
CCE0C5
B7D9C0
5C5D61
—
1.2
Fail
1.2
Fail
1.3
Fail
5.8
AA
1.2
Fail
—
1.0
Fail
1.1
Fail
4.9
AA
1.2
Fail
1.0
Fail
—
1.1
Fail
4.7
AA
1.3
Fail
1.1
Fail
1.1
Fail
—
4.3
AA Large
5.8
AA
4.9
AA
4.7
AA
4.3
AA Large
—
White BG
1.1Fail
1.3Fail
1.4Fail
1.5Fail
6.6AA
Black BG
18.4AAA
15.6AAA
15.0AAA
13.7AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E5
DFDFC8
D5D5CC
C6C6C6
5C5C60

Deuteranopia

F2F2E6
DFDECA
D4D2CD
C4C1C7
5C5C60

Tritanopia

F2E8E9
DDCED0
CDD1D2
B9CBCC
5C5F5F

Achromatopsia

EFEFEF
DCDCDC
D7D7D7
CCCCCC
5D5D5D

Shades & Tints Shades & Tints

#F2F1E1

Dark
Light

#DDE1C0

Dark
Light

#CCE0C5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f1e1;
  --color-2: #dde1c0;
  --color-3: #cce0c5;
  --color-4: #b7d9c0;
  --color-5: #5c5d61;
}

SCSS

$color-1: #f2f1e1;
$color-2: #dde1c0;
$color-3: #cce0c5;
$color-4: #b7d9c0;
$color-5: #5c5d61;

TAILWIND

colors: {
  'brand-1': '#f2f1e1',
  'brand-2': '#dde1c0',
  'brand-3': '#cce0c5',
  'brand-4': '#b7d9c0',
  'brand-5': '#5c5d61',
}

RGB Array

[242, 241, 225], [221, 225, 192], [204, 224, 197], [183, 217, 192], [92, 93, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F2F1E1, #DDE1C0, #CCE0C5, #B7D9C0, #5C5D61 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2f1e1; --color-2: #dde1c0; --color-3: #cce0c5; --color-4: #b7d9c0; --color-5: #5c5d61. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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