← Back to Editor

#B4D997 · #F6BD70 · #F57F63 · #B31A50 · #340611

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

#B4D997

Celadon · LightGreen · Apple Green

HEX
#B4D997
RGB
rgb(180, 217, 151)
HSL
hsl(94, 46%, 72%)
HSB
hsb(94, 30%, 85%)
CMYK
cmyk(17%, 0%, 30%, 15%)
Oklch
oklch(84.2% 0.097 132.0)

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

#F6BD70

Ginger · SandyBrown · Warm Sun

HEX
#F6BD70
RGB
rgb(246, 189, 112)
HSL
hsl(34, 88%, 70%)
HSB
hsb(34, 54%, 96%)
CMYK
cmyk(0%, 23%, 54%, 4%)
Oklch
oklch(83.4% 0.115 73.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F57F63

Peach Pink · Salmon · Coral Red

HEX
#F57F63
RGB
rgb(245, 127, 99)
HSL
hsl(12, 88%, 67%)
HSB
hsb(12, 60%, 96%)
CMYK
cmyk(0%, 48%, 60%, 4%)
Oklch
oklch(72.4% 0.151 34.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B31A50

Dark Violet · Brown · Camellia

HEX
#B31A50
RGB
rgb(179, 26, 80)
HSL
hsl(339, 75%, 40%)
HSB
hsb(339, 85%, 70%)
CMYK
cmyk(0%, 85%, 55%, 30%)
Oklch
oklch(50.2% 0.186 7.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#340611

Vermilion · Black · Deep Berry

HEX
#340611
RGB
rgb(52, 6, 17)
HSL
hsl(346, 79%, 11%)
HSB
hsb(346, 88%, 20%)
CMYK
cmyk(0%, 88%, 67%, 80%)
Oklch
oklch(21.7% 0.073 11.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4D997
BC97D8

Analogous

D4D897
B4D997
97D89B

Triadic

B4D997
97B3D8
D897B3

Split-Comp.

B4D997
9B97D8
D897D4

Tetradic

B4D997
97D4D8
BC97D8
D89B97

Contrast Matrix WCAG 2.1 Contrast

B4D997
F6BD70
F57F63
B31A50
340611
—
1.1
Fail
1.6
Fail
4.2
AA Large
11.3
AAA
1.1
Fail
—
1.5
Fail
3.9
AA Large
10.5
AAA
1.6
Fail
1.5
Fail
—
2.5
Fail
6.9
AA
4.2
AA Large
3.9
AA Large
2.5
Fail
—
2.7
Fail
11.3
AAA
10.5
AAA
6.9
AA
2.7
Fail
—
White BG
1.6Fail
1.7Fail
2.6Fail
6.6AA
17.8AAA
Black BG
13.3AAA
12.4AAA
8.1AAA
3.2AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4A7
DDDD83
C2C16A
716F43
20200E

Deuteranopia

C2BFAB
E1E587
C9D26B
7A8540
23260E

Tritanopia

B6B4B6
F39195
EF6F70
AB3936
320C0C

Achromatopsia

C6C6C6
C5C5C5
9F9F9F
4E4E4E
151515

Shades & Tints Shades & Tints

#B4D997

Dark
Light

#F6BD70

Dark
Light

#F57F63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4d997;
  --color-2: #f6bd70;
  --color-3: #f57f63;
  --color-4: #b31a50;
  --color-5: #340611;
}

SCSS

$color-1: #b4d997;
$color-2: #f6bd70;
$color-3: #f57f63;
$color-4: #b31a50;
$color-5: #340611;

TAILWIND

colors: {
  'brand-1': '#b4d997',
  'brand-2': '#f6bd70',
  'brand-3': '#f57f63',
  'brand-4': '#b31a50',
  'brand-5': '#340611',
}

RGB Array

[180, 217, 151], [246, 189, 112], [245, 127, 99], [179, 26, 80], [52, 6, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #B4D997, #F6BD70, #F57F63, #B31A50, #340611 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: #b4d997; --color-2: #f6bd70; --color-3: #f57f63; --color-4: #b31a50; --color-5: #340611. 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