← Back to Editor

#87977C · #111828 · #BACCB4 · #EFEDBD · #F9FBD4

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

#87977C

Celadon · Gray · Olive Green

HEX
#87977C
RGB
rgb(135, 151, 124)
HSL
hsl(96, 11%, 54%)
HSB
hsb(96, 18%, 59%)
CMYK
cmyk(11%, 0%, 18%, 41%)
Oklch
oklch(65.6% 0.043 132.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#111828

Indigo · Black · Deep Sea Blue

HEX
#111828
RGB
rgb(17, 24, 40)
HSL
hsl(222, 40%, 11%)
HSB
hsb(222, 57%, 16%)
CMYK
cmyk(58%, 40%, 0%, 84%)
Oklch
oklch(21.1% 0.034 265.6)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#BACCB4

Celadon · Silver · Apple Green

HEX
#BACCB4
RGB
rgb(186, 204, 180)
HSL
hsl(105, 19%, 75%)
HSB
hsb(105, 12%, 80%)
CMYK
cmyk(9%, 0%, 12%, 20%)
Oklch
oklch(82.5% 0.038 137.8)

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

#EFEDBD

Fresh Green · Wheat · Lemon Cream

HEX
#EFEDBD
RGB
rgb(239, 237, 189)
HSL
hsl(58, 61%, 84%)
HSB
hsb(58, 21%, 94%)
CMYK
cmyk(0%, 1%, 21%, 6%)
Oklch
oklch(93.6% 0.062 105.6)

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

#F9FBD4

Fresh Green · Beige · Lemon Cream

HEX
#F9FBD4
RGB
rgb(249, 251, 212)
HSL
hsl(63, 83%, 91%)
HSB
hsb(63, 16%, 98%)
CMYK
cmyk(1%, 0%, 16%, 2%)
Oklch
oklch(97.7% 0.051 109.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87977C
8C7D97

Analogous

94977D
87977C
7D977F

Triadic

87977C
7D8797
977D87

Split-Comp.

87977C
7F7D97
977D94

Tetradic

87977C
7D9497
8C7D97
977F7D

Contrast Matrix WCAG 2.1 Contrast

87977C
111828
BACCB4
EFEDBD
F9FBD4
—
5.7
AA
1.8
Fail
2.6
Fail
2.9
Fail
5.7
AA
—
10.4
AAA
14.8
AAA
16.7
AAA
1.8
Fail
10.4
AAA
—
1.4
Fail
1.6
Fail
2.6
Fail
14.8
AAA
1.4
Fail
—
1.1
Fail
2.9
Fail
16.7
AAA
1.6
Fail
1.1
Fail
—
White BG
3.1AA Large
17.7AAA
1.7Fail
1.2Fail
1.1Fail
Black BG
6.7AA
1.2Fail
12.4AAA
17.5AAA
19.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E83
141424
C2C2BA
EEEEC9
FAFADD

Deuteranopia

8D8C84
141323
C1BFBB
EEEECB
FAFAE0

Tritanopia

888889
112120
BBBEBF
EFD2D4
F9E5E7

Achromatopsia

8F8F8F
181818
C4C4C4
E8E8E8
F6F6F6

Shades & Tints Shades & Tints

#87977C

Dark
Light

#111828

Dark
Light

#BACCB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87977c;
  --color-2: #111828;
  --color-3: #baccb4;
  --color-4: #efedbd;
  --color-5: #f9fbd4;
}

SCSS

$color-1: #87977c;
$color-2: #111828;
$color-3: #baccb4;
$color-4: #efedbd;
$color-5: #f9fbd4;

TAILWIND

colors: {
  'brand-1': '#87977c',
  'brand-2': '#111828',
  'brand-3': '#baccb4',
  'brand-4': '#efedbd',
  'brand-5': '#f9fbd4',
}

RGB Array

[135, 151, 124], [17, 24, 40], [186, 204, 180], [239, 237, 189], [249, 251, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #87977C, #111828, #BACCB4, #EFEDBD, #F9FBD4 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: #87977c; --color-2: #111828; --color-3: #baccb4; --color-4: #efedbd; --color-5: #f9fbd4. 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