← Back to Editor

#F0E7BC · #BFC9B5 · #87B9A8 · #349287 · #3C424A

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

#F0E7BC

Fresh Green · Wheat · Lemon Cream

HEX
#F0E7BC
RGB
rgb(240, 231, 188)
HSL
hsl(50, 63%, 84%)
HSB
hsb(50, 22%, 94%)
CMYK
cmyk(0%, 4%, 22%, 6%)
Oklch
oklch(92.4% 0.057 97.5)

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

#BFC9B5

Celadon · Silver · Apple Green

HEX
#BFC9B5
RGB
rgb(191, 201, 181)
HSL
hsl(90, 16%, 75%)
HSB
hsb(90, 10%, 79%)
CMYK
cmyk(5%, 0%, 10%, 21%)
Oklch
oklch(82.3% 0.030 128.9)

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

#87B9A8

Jade · DarkSeaGreen · Lake Green

HEX
#87B9A8
RGB
rgb(135, 185, 168)
HSL
hsl(160, 26%, 63%)
HSB
hsb(160, 27%, 73%)
CMYK
cmyk(27%, 0%, 9%, 27%)
Oklch
oklch(74.5% 0.058 171.6)

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

#349287

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#349287
RGB
rgb(52, 146, 135)
HSL
hsl(173, 47%, 39%)
HSB
hsb(173, 64%, 57%)
CMYK
cmyk(64%, 0%, 8%, 43%)
Oklch
oklch(60.2% 0.089 184.3)

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

#3C424A

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C424A
RGB
rgb(60, 66, 74)
HSL
hsl(214, 10%, 26%)
HSB
hsb(214, 19%, 29%)
CMYK
cmyk(19%, 11%, 0%, 71%)
Oklch
oklch(37.7% 0.016 255.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E7BC
BCC5F0

Analogous

F0CEBC
F0E7BC
DFF0BC

Triadic

F0E7BC
BCF0E7
E7BCF0

Split-Comp.

F0E7BC
BCDFF0
CEBCF0

Tetradic

F0E7BC
BCF0CE
BCC5F0
F0BCDF

Contrast Matrix WCAG 2.1 Contrast

F0E7BC
BFC9B5
87B9A8
349287
3C424A
—
1.4
Fail
1.8
Fail
3.0
AA Large
8.1
AAA
1.4
Fail
—
1.3
Fail
2.2
Fail
5.9
AA
1.8
Fail
1.3
Fail
—
1.7
Fail
4.6
AA
3.0
AA Large
2.2
Fail
1.7
Fail
—
2.7
Fail
8.1
AAA
5.9
AA
4.6
AA
2.7
Fail
—
White BG
1.2Fail
1.7Fail
2.2Fail
3.7AA Large
10.1AAA
Black BG
16.9AAA
12.2AAA
9.5AAA
5.6AA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECC6
C3C3BA
9D9DAC
5D5E8A
3F3F48

Deuteranopia

EDEDC9
C3C2BB
9A96AD
57508A
3E3E48

Tritanopia

F0CFD0
C0BEBF
8AAFB0
398C8C
3C4746

Achromatopsia

E5E5E5
C4C4C4
A8A8A8
757575
414141

Shades & Tints Shades & Tints

#F0E7BC

Dark
Light

#BFC9B5

Dark
Light

#87B9A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e7bc;
  --color-2: #bfc9b5;
  --color-3: #87b9a8;
  --color-4: #349287;
  --color-5: #3c424a;
}

SCSS

$color-1: #f0e7bc;
$color-2: #bfc9b5;
$color-3: #87b9a8;
$color-4: #349287;
$color-5: #3c424a;

TAILWIND

colors: {
  'brand-1': '#f0e7bc',
  'brand-2': '#bfc9b5',
  'brand-3': '#87b9a8',
  'brand-4': '#349287',
  'brand-5': '#3c424a',
}

RGB Array

[240, 231, 188], [191, 201, 181], [135, 185, 168], [52, 146, 135], [60, 66, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F0E7BC, #BFC9B5, #87B9A8, #349287, #3C424A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f0e7bc; --color-2: #bfc9b5; --color-3: #87b9a8; --color-4: #349287; --color-5: #3c424a. 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 tech, SaaS, healthcare, eco industries. 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