← Back to Editor

#63475F · #806C7D · #9E969D · #A3AEBC · #CACBCC

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

#63475F

Rose Purple · DimGray · Eggplant

HEX
#63475F
RGB
rgb(99, 71, 95)
HSL
hsl(309, 16%, 33%)
HSB
hsb(309, 28%, 39%)
CMYK
cmyk(0%, 28%, 4%, 61%)
Oklch
oklch(43.7% 0.053 331.4)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#806C7D

Rose Purple · Gray · Warm Gray

HEX
#806C7D
RGB
rgb(128, 108, 125)
HSL
hsl(309, 8%, 46%)
HSB
hsb(309, 16%, 50%)
CMYK
cmyk(0%, 16%, 2%, 50%)
Oklch
oklch(55.6% 0.036 331.0)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#9E969D

Ash · DarkGray · Silver Sand

HEX
#9E969D
RGB
rgb(158, 150, 157)
HSL
hsl(308, 4%, 60%)
HSB
hsb(308, 5%, 62%)
CMYK
cmyk(0%, 5%, 1%, 38%)
Oklch
oklch(68.2% 0.014 329.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#A3AEBC

Azure · DarkGray · Cobalt Blue

HEX
#A3AEBC
RGB
rgb(163, 174, 188)
HSL
hsl(214, 16%, 69%)
HSB
hsb(214, 13%, 74%)
CMYK
cmyk(13%, 7%, 0%, 26%)
Oklch
oklch(74.7% 0.024 254.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#CACBCC

Silver Gray · LightGray · Pearl Gray

HEX
#CACBCC
RGB
rgb(202, 203, 204)
HSL
hsl(210, 2%, 80%)
HSB
hsb(210, 1%, 80%)
CMYK
cmyk(1%, 0%, 0%, 20%)
Oklch
oklch(84.2% 0.002 247.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63475F
47624B

Analogous

584762
63475F
624750

Triadic

63475F
5E6247
475E62

Split-Comp.

63475F
506247
476258

Tetradic

63475F
625847
47624B
475062

Contrast Matrix WCAG 2.1 Contrast

63475F
806C7D
9E969D
A3AEBC
CACBCC
—
1.7
Fail
2.8
Fail
3.6
AA Large
5.0
AA
1.7
Fail
—
1.7
Fail
2.1
Fail
3.0
Fail
2.8
Fail
1.7
Fail
—
1.3
Fail
1.8
Fail
3.6
AA Large
2.1
Fail
1.3
Fail
—
1.4
Fail
5.0
AA
3.0
Fail
1.8
Fail
1.4
Fail
—
White BG
8.1AAA
4.8AA
2.9Fail
2.2Fail
1.6Fail
Black BG
2.6Fail
4.4AA Large
7.3AAA
9.3AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

575759
777779
9B9A9B
A8A8B9
CACACC

Deuteranopia

595B58
797A78
9B9C9B
A7A6B8
CACACC

Tritanopia

625554
7F7675
9E9A9A
A4B6B5
CACCCC

Achromatopsia

525252
747474
999999
ACACAC
CBCBCB

Shades & Tints Shades & Tints

#63475F

Dark
Light

#806C7D

Dark
Light

#9E969D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63475f;
  --color-2: #806c7d;
  --color-3: #9e969d;
  --color-4: #a3aebc;
  --color-5: #cacbcc;
}

SCSS

$color-1: #63475f;
$color-2: #806c7d;
$color-3: #9e969d;
$color-4: #a3aebc;
$color-5: #cacbcc;

TAILWIND

colors: {
  'brand-1': '#63475f',
  'brand-2': '#806c7d',
  'brand-3': '#9e969d',
  'brand-4': '#a3aebc',
  'brand-5': '#cacbcc',
}

RGB Array

[99, 71, 95], [128, 108, 125], [158, 150, 157], [163, 174, 188], [202, 203, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #63475F, #806C7D, #9E969D, #A3AEBC, #CACBCC 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: #63475f; --color-2: #806c7d; --color-3: #9e969d; --color-4: #a3aebc; --color-5: #cacbcc. 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