← Back to Editor

#3B848C · #5BD9AB · #D1F257 · #F2D54F · #FBF6C1

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

#3B848C

Slate Blue · SteelBlue · Mint Ice

HEX
#3B848C
RGB
rgb(59, 132, 140)
HSL
hsl(186, 41%, 39%)
HSB
hsb(186, 58%, 55%)
CMYK
cmyk(58%, 6%, 0%, 45%)
Oklch
oklch(57.0% 0.073 205.0)

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

#5BD9AB

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#5BD9AB
RGB
rgb(91, 217, 171)
HSL
hsl(158, 62%, 60%)
HSB
hsb(158, 58%, 85%)
CMYK
cmyk(58%, 0%, 21%, 15%)
Oklch
oklch(80.2% 0.131 166.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#D1F257

Willow Green · GreenYellow · Apple Green

HEX
#D1F257
RGB
rgb(209, 242, 87)
HSL
hsl(73, 86%, 65%)
HSB
hsb(73, 64%, 95%)
CMYK
cmyk(14%, 0%, 64%, 5%)
Oklch
oklch(90.9% 0.181 120.4)

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

#F2D54F

Ginger · SandyBrown · Sunflower

HEX
#F2D54F
RGB
rgb(242, 213, 79)
HSL
hsl(49, 86%, 63%)
HSB
hsb(49, 67%, 95%)
CMYK
cmyk(0%, 12%, 67%, 5%)
Oklch
oklch(87.4% 0.152 96.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FBF6C1

Fresh Green · Bisque · Lemon Cream

HEX
#FBF6C1
RGB
rgb(251, 246, 193)
HSL
hsl(55, 88%, 87%)
HSB
hsb(55, 23%, 98%)
CMYK
cmyk(0%, 2%, 23%, 2%)
Oklch
oklch(96.4% 0.068 103.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B848C
8C433B

Analogous

3B8C6C
3B848C
3B5B8C

Triadic

3B848C
8C3B84
848C3B

Split-Comp.

3B848C
8C3B5B
8C6C3B

Tetradic

3B848C
6C3B8C
8C433B
5B8C3B

Contrast Matrix WCAG 2.1 Contrast

3B848C
5BD9AB
D1F257
F2D54F
FBF6C1
—
2.5
Fail
3.4
AA Large
3.0
Fail
3.9
AA Large
2.5
Fail
—
1.4
Fail
1.2
Fail
1.6
Fail
3.4
AA Large
1.4
Fail
—
1.1
Fail
1.2
Fail
3.0
Fail
1.2
Fail
1.1
Fail
—
1.3
Fail
3.9
AA Large
1.6
Fail
1.2
Fail
1.3
Fail
—
White BG
4.3AA Large
1.8Fail
1.3Fail
1.5Fail
1.1Fail
Black BG
4.9AA
12.0AAA
16.5AAA
14.4AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B8A
9293B6
DFE07D
E5E56F
F9F9CE

Deuteranopia

56518A
8A81B9
DDDB86
E7E977
F9FAD1

Tritanopia

3F8988
61BFC1
D39AA1
F1898F
FBD8DA

Achromatopsia

6F6F6F
AEAEAE
D6D6D6
CECECE
F1F1F1

Shades & Tints Shades & Tints

#3B848C

Dark
Light

#5BD9AB

Dark
Light

#D1F257

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b848c;
  --color-2: #5bd9ab;
  --color-3: #d1f257;
  --color-4: #f2d54f;
  --color-5: #fbf6c1;
}

SCSS

$color-1: #3b848c;
$color-2: #5bd9ab;
$color-3: #d1f257;
$color-4: #f2d54f;
$color-5: #fbf6c1;

TAILWIND

colors: {
  'brand-1': '#3b848c',
  'brand-2': '#5bd9ab',
  'brand-3': '#d1f257',
  'brand-4': '#f2d54f',
  'brand-5': '#fbf6c1',
}

RGB Array

[59, 132, 140], [91, 217, 171], [209, 242, 87], [242, 213, 79], [251, 246, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #3B848C, #5BD9AB, #D1F257, #F2D54F, #FBF6C1 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: #3b848c; --color-2: #5bd9ab; --color-3: #d1f257; --color-4: #f2d54f; --color-5: #fbf6c1. 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