← Back to Editor

#313236 · #47596D · #7B8DA3 · #B6A6B0 · #F1D3CB

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

#313236

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#313236
RGB
rgb(49, 50, 54)
HSL
hsl(228, 5%, 20%)
HSB
hsb(228, 9%, 21%)
CMYK
cmyk(9%, 7%, 0%, 79%)
Oklch
oklch(31.8% 0.007 274.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#47596D

Indigo · DimGray · Prussian Blue

HEX
#47596D
RGB
rgb(71, 89, 109)
HSL
hsl(212, 21%, 35%)
HSB
hsb(212, 35%, 43%)
CMYK
cmyk(35%, 18%, 0%, 57%)
Oklch
oklch(45.7% 0.040 251.4)

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

#7B8DA3

Azure · LightSlateGray · Navy Blue

HEX
#7B8DA3
RGB
rgb(123, 141, 163)
HSL
hsl(213, 18%, 56%)
HSB
hsb(213, 25%, 64%)
CMYK
cmyk(25%, 13%, 0%, 36%)
Oklch
oklch(63.7% 0.039 253.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#B6A6B0

Mauve · DarkGray · Rose Pink

HEX
#B6A6B0
RGB
rgb(182, 166, 176)
HSL
hsl(323, 10%, 68%)
HSB
hsb(323, 9%, 71%)
CMYK
cmyk(0%, 9%, 3%, 29%)
Oklch
oklch(74.2% 0.023 339.8)

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

#F1D3CB

Peach Pink · Bisque · Cherry Blossom

HEX
#F1D3CB
RGB
rgb(241, 211, 203)
HSL
hsl(13, 58%, 87%)
HSB
hsb(13, 16%, 95%)
CMYK
cmyk(0%, 12%, 16%, 5%)
Oklch
oklch(89.0% 0.035 35.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

313236
363530

Analogous

303436
313236
323036

Triadic

313236
363031
313630

Split-Comp.

313236
363230
343630

Tetradic

313236
363034
363530
303632

Contrast Matrix WCAG 2.1 Contrast

313236
47596D
7B8DA3
B6A6B0
F1D3CB
—
1.8
Fail
3.8
AA Large
5.5
AA
9.1
AAA
1.8
Fail
—
2.1
Fail
3.1
AA Large
5.1
AA
3.8
AA Large
2.1
Fail
—
1.5
Fail
2.4
Fail
5.5
AA
3.1
AA Large
1.5
Fail
—
1.6
Fail
9.1
AAA
5.1
AA
2.4
Fail
1.6
Fail
—
White BG
12.8AAA
7.2AAA
3.4AA Large
2.3Fail
1.4Fail
Black BG
1.6Fail
2.9Fail
6.2AA
9.1AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313135
4F4F68
83839E
AFAFAE
E4E4CD

Deuteranopia

313135
4E4C67
82809C
B0B1AD
E6E8CD

Tritanopia

313434
486464
7C9999
B5ACAB
F0CECF

Achromatopsia

323232
565656
8A8A8A
ACACAC
DBDBDB

Shades & Tints Shades & Tints

#313236

Dark
Light

#47596D

Dark
Light

#7B8DA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #313236;
  --color-2: #47596d;
  --color-3: #7b8da3;
  --color-4: #b6a6b0;
  --color-5: #f1d3cb;
}

SCSS

$color-1: #313236;
$color-2: #47596d;
$color-3: #7b8da3;
$color-4: #b6a6b0;
$color-5: #f1d3cb;

TAILWIND

colors: {
  'brand-1': '#313236',
  'brand-2': '#47596d',
  'brand-3': '#7b8da3',
  'brand-4': '#b6a6b0',
  'brand-5': '#f1d3cb',
}

RGB Array

[49, 50, 54], [71, 89, 109], [123, 141, 163], [182, 166, 176], [241, 211, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #313236, #47596D, #7B8DA3, #B6A6B0, #F1D3CB is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #313236; --color-2: #47596d; --color-3: #7b8da3; --color-4: #b6a6b0; --color-5: #f1d3cb. 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. Restrained colors convey professionalism and trust. 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