← Back to Editor

#B1CE96 · #85EBC3 · #1CB4A5 · #204D6C · #FE4D57

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

#B1CE96

Celadon · DarkSeaGreen · Apple Green

HEX
#B1CE96
RGB
rgb(177, 206, 150)
HSL
hsl(91, 36%, 70%)
HSB
hsb(91, 27%, 81%)
CMYK
cmyk(14%, 0%, 27%, 19%)
Oklch
oklch(81.6% 0.082 130.3)

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

#85EBC3

Jade · SkyBlue · Apple Green

HEX
#85EBC3
RGB
rgb(133, 235, 195)
HSL
hsl(156, 72%, 72%)
HSB
hsb(156, 43%, 92%)
CMYK
cmyk(43%, 0%, 17%, 8%)
Oklch
oklch(86.7% 0.112 166.5)

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

#1CB4A5

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#1CB4A5
RGB
rgb(28, 180, 165)
HSL
hsl(174, 73%, 41%)
HSB
hsb(174, 84%, 71%)
CMYK
cmyk(84%, 0%, 8%, 29%)
Oklch
oklch(69.4% 0.118 184.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#204D6C

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#204D6C
RGB
rgb(32, 77, 108)
HSL
hsl(204, 54%, 27%)
HSB
hsb(204, 70%, 42%)
CMYK
cmyk(70%, 29%, 0%, 58%)
Oklch
oklch(40.4% 0.072 241.7)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#FE4D57

Peach Pink · Tomato · Coral Red

HEX
#FE4D57
RGB
rgb(254, 77, 87)
HSL
hsl(357, 99%, 65%)
HSB
hsb(357, 70%, 100%)
CMYK
cmyk(0%, 70%, 66%, 0%)
Oklch
oklch(67.3% 0.213 22.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1CE96
B397CE

Analogous

CDCE97
B1CE96
97CE98

Triadic

B1CE96
97B2CE
CE97B2

Split-Comp.

B1CE96
9897CE
CE97CD

Tetradic

B1CE96
97CDCE
B397CE
CE9897

Contrast Matrix WCAG 2.1 Contrast

B1CE96
85EBC3
1CB4A5
204D6C
FE4D57
—
1.2
Fail
1.5
Fail
5.2
AA
1.9
Fail
1.2
Fail
—
1.8
Fail
6.3
AA
2.3
Fail
1.5
Fail
1.8
Fail
—
3.5
AA Large
1.3
Fail
5.2
AA
6.3
AA
3.5
AA Large
—
2.7
Fail
1.9
Fail
2.3
Fail
1.3
Fail
2.7
Fail
—
White BG
1.7Fail
1.4Fail
2.6Fail
9.0AAA
3.3AA Large
Black BG
12.1AAA
14.7AAA
8.1AAA
2.3Fail
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEA4
B1B2CD
5E5FA9
333464
B1B055

Deuteranopia

BCBAA7
ABA4CF
554AAA
312E63
BCC954

Tritanopia

B2AEB1
8AD4D6
24ABAC
225F5D
F55352

Achromatopsia

BFBFBF
C8C8C8
858585
434343
838383

Shades & Tints Shades & Tints

#B1CE96

Dark
Light

#85EBC3

Dark
Light

#1CB4A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1ce96;
  --color-2: #85ebc3;
  --color-3: #1cb4a5;
  --color-4: #204d6c;
  --color-5: #fe4d57;
}

SCSS

$color-1: #b1ce96;
$color-2: #85ebc3;
$color-3: #1cb4a5;
$color-4: #204d6c;
$color-5: #fe4d57;

TAILWIND

colors: {
  'brand-1': '#b1ce96',
  'brand-2': '#85ebc3',
  'brand-3': '#1cb4a5',
  'brand-4': '#204d6c',
  'brand-5': '#fe4d57',
}

RGB Array

[177, 206, 150], [133, 235, 195], [28, 180, 165], [32, 77, 108], [254, 77, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #B1CE96, #85EBC3, #1CB4A5, #204D6C, #FE4D57 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #b1ce96; --color-2: #85ebc3; --color-3: #1cb4a5; --color-4: #204d6c; --color-5: #fe4d57. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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