← Back to Editor

#333332 · #FF2B6E · #FFA4A0 · #FFD3CC · #EFF0E4

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#333332

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#333332
RGB
rgb(51, 51, 50)
HSL
hsl(60, 1%, 20%)
HSB
hsb(60, 2%, 20%)
CMYK
cmyk(0%, 0%, 2%, 80%)
Oklch
oklch(32.1% 0.002 106.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#FF2B6E

Dark Violet · DeepPink · Rose Pink

HEX
#FF2B6E
RGB
rgb(255, 43, 110)
HSL
hsl(341, 100%, 58%)
HSB
hsb(341, 83%, 100%)
CMYK
cmyk(0%, 83%, 57%, 0%)
Oklch
oklch(65.4% 0.241 10.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FFA4A0

Peach Pink · LightPink · Cherry Blossom

HEX
#FFA4A0
RGB
rgb(255, 164, 160)
HSL
hsl(3, 100%, 81%)
HSB
hsb(3, 37%, 100%)
CMYK
cmyk(0%, 36%, 37%, 0%)
Oklch
oklch(80.8% 0.109 22.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFD3CC

Peach Pink · Bisque · Cherry Blossom

HEX
#FFD3CC
RGB
rgb(255, 211, 204)
HSL
hsl(8, 100%, 90%)
HSB
hsb(8, 20%, 100%)
CMYK
cmyk(0%, 17%, 20%, 0%)
Oklch
oklch(90.3% 0.051 28.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EFF0E4

Fresh Green · Beige · Lemon Cream

HEX
#EFF0E4
RGB
rgb(239, 240, 228)
HSL
hsl(65, 29%, 92%)
HSB
hsb(65, 5%, 94%)
CMYK
cmyk(0%, 0%, 5%, 6%)
Oklch
oklch(95.1% 0.016 110.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333332
323234

Analogous

343332
333332
333432

Triadic

333332
323434
343234

Split-Comp.

333332
323334
333234

Tetradic

333332
323433
323234
343233

Contrast Matrix WCAG 2.1 Contrast

333332
FF2B6E
FFA4A0
FFD3CC
EFF0E4
—
3.5
AA Large
6.7
AA
9.3
AAA
11.0
AAA
3.5
AA Large
—
1.9
Fail
2.7
Fail
3.1
AA Large
6.7
AA
1.9
Fail
—
1.4
Fail
1.6
Fail
9.3
AAA
2.7
Fail
1.4
Fail
—
1.2
Fail
11.0
AAA
3.1
AA Large
1.6
Fail
1.2
Fail
—
White BG
12.6AAA
3.6AA Large
1.9Fail
1.4Fail
1.2Fail
Black BG
1.7Fail
5.8AA
11.1AAA
15.4AAA
18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333332
A3A15E
D8D7A1
ECECCE
EFEFE7

Deuteranopia

333332
B0BF5A
DDE4A1
EFF2CE
EFEFE8

Tritanopia

333232
F4514E
FAA2A2
FDCFCF
EFE9EA

Achromatopsia

333333
727272
BFBFBF
DFDFDF
EEEEEE

Shades & Tints Shades & Tints

#333332

Dark
Light

#FF2B6E

Dark
Light

#FFA4A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333332;
  --color-2: #ff2b6e;
  --color-3: #ffa4a0;
  --color-4: #ffd3cc;
  --color-5: #eff0e4;
}

SCSS

$color-1: #333332;
$color-2: #ff2b6e;
$color-3: #ffa4a0;
$color-4: #ffd3cc;
$color-5: #eff0e4;

TAILWIND

colors: {
  'brand-1': '#333332',
  'brand-2': '#ff2b6e',
  'brand-3': '#ffa4a0',
  'brand-4': '#ffd3cc',
  'brand-5': '#eff0e4',
}

RGB Array

[51, 51, 50], [255, 43, 110], [255, 164, 160], [255, 211, 204], [239, 240, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #333332, #FF2B6E, #FFA4A0, #FFD3CC, #EFF0E4 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #333332; --color-2: #ff2b6e; --color-3: #ffa4a0; --color-4: #ffd3cc; --color-5: #eff0e4. 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 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