← Back to Editor

#837385 · #B087AA · #FF7AAD · #FCAA7E · #C9B882

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 PostIllustration

Color Details Color Details

#837385

Ink Gray · Gray · Warm Gray

HEX
#837385
RGB
rgb(131, 115, 133)
HSL
hsl(293, 7%, 49%)
HSB
hsb(293, 14%, 52%)
CMYK
cmyk(2%, 14%, 0%, 48%)
Oklch
oklch(57.6% 0.033 322.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#B087AA

Mauve · DarkGray · Lilac Purple

HEX
#B087AA
RGB
rgb(176, 135, 170)
HSL
hsl(309, 21%, 61%)
HSB
hsb(309, 23%, 69%)
CMYK
cmyk(0%, 23%, 3%, 31%)
Oklch
oklch(67.4% 0.069 331.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#FF7AAD

Rouge · LightCoral · Rose Pink

HEX
#FF7AAD
RGB
rgb(255, 122, 173)
HSL
hsl(337, 100%, 74%)
HSB
hsb(337, 52%, 100%)
CMYK
cmyk(0%, 52%, 32%, 0%)
Oklch
oklch(74.8% 0.169 357.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FCAA7E

Apricot · LightSalmon · Warm Sun

HEX
#FCAA7E
RGB
rgb(252, 170, 126)
HSL
hsl(21, 95%, 74%)
HSB
hsb(21, 50%, 99%)
CMYK
cmyk(0%, 33%, 50%, 1%)
Oklch
oklch(80.8% 0.113 48.8)

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

#C9B882

Ginger · Tan · Sunflower

HEX
#C9B882
RGB
rgb(201, 184, 130)
HSL
hsl(46, 40%, 65%)
HSB
hsb(46, 35%, 79%)
CMYK
cmyk(0%, 8%, 35%, 21%)
Oklch
oklch(78.4% 0.074 92.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

837385
768674

Analogous

7B7486
837385
86747F

Triadic

837385
868474
748684

Split-Comp.

837385
7F8674
74867B

Tetradic

837385
867B74
768674
747F86

Contrast Matrix WCAG 2.1 Contrast

837385
B087AA
FF7AAD
FCAA7E
C9B882
—
1.4
Fail
1.8
Fail
2.4
Fail
2.2
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
1.5
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.2
Fail
2.4
Fail
1.6
Fail
1.3
Fail
—
1.0
Fail
2.2
Fail
1.5
Fail
1.2
Fail
1.0
Fail
—
White BG
4.4AA Large
3.0AA Large
2.4Fail
1.9Fail
2.0Fail
Black BG
4.8AA
6.9AA
8.6AAA
11.2AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C81
9E9EA2
C5C4A1
D8D889
C2C18F

Deuteranopia

7D7E80
A1A4A0
CDD79E
DDE38B
C3C492

Tritanopia

827D7C
AE9B99
F89795
F89193
C8999C

Achromatopsia

7A7A7A
979797
A8A8A8
BEBEBE
B7B7B7

Shades & Tints Shades & Tints

#837385

Dark
Light

#B087AA

Dark
Light

#FF7AAD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #837385;
  --color-2: #b087aa;
  --color-3: #ff7aad;
  --color-4: #fcaa7e;
  --color-5: #c9b882;
}

SCSS

$color-1: #837385;
$color-2: #b087aa;
$color-3: #ff7aad;
$color-4: #fcaa7e;
$color-5: #c9b882;

TAILWIND

colors: {
  'brand-1': '#837385',
  'brand-2': '#b087aa',
  'brand-3': '#ff7aad',
  'brand-4': '#fcaa7e',
  'brand-5': '#c9b882',
}

RGB Array

[131, 115, 133], [176, 135, 170], [255, 122, 173], [252, 170, 126], [201, 184, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #837385, #B087AA, #FF7AAD, #FCAA7E, #C9B882 is ideal for: corporate websites, product showcases, portfolios. 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: #837385; --color-2: #b087aa; --color-3: #ff7aad; --color-4: #fcaa7e; --color-5: #c9b882. 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. 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