← Back to Editor

#83708C · #AA9FA6 · #BCBCCC · #E3D1D8 · #F2F2F2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#83708C

Dark Plum · Gray · Violet

HEX
#83708C
RGB
rgb(131, 112, 140)
HSL
hsl(281, 11%, 49%)
HSB
hsb(281, 20%, 55%)
CMYK
cmyk(6%, 20%, 0%, 45%)
Oklch
oklch(57.3% 0.048 314.9)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#AA9FA6

Ash · DarkGray · Silver Sand

HEX
#AA9FA6
RGB
rgb(170, 159, 166)
HSL
hsl(322, 6%, 65%)
HSB
hsb(322, 6%, 67%)
CMYK
cmyk(0%, 6%, 2%, 33%)
Oklch
oklch(71.4% 0.016 339.1)

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

#BCBCCC

Wisteria · Silver · Cobalt Blue

HEX
#BCBCCC
RGB
rgb(188, 188, 204)
HSL
hsl(240, 14%, 77%)
HSB
hsb(240, 8%, 80%)
CMYK
cmyk(8%, 8%, 0%, 20%)
Oklch
oklch(80.0% 0.022 285.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#E3D1D8

Rouge · LightGray · Cherry Blossom

HEX
#E3D1D8
RGB
rgb(227, 209, 216)
HSL
hsl(337, 24%, 85%)
HSB
hsb(337, 8%, 89%)
CMYK
cmyk(0%, 8%, 5%, 11%)
Oklch
oklch(87.7% 0.022 352.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83708C
788B6F

Analogous

746F8B
83708C
8B6F86

Triadic

83708C
8B826F
6F8B82

Split-Comp.

83708C
868B6F
6F8B74

Tetradic

83708C
8B746F
788B6F
6F868B

Contrast Matrix WCAG 2.1 Contrast

83708C
AA9FA6
BCBCCC
E3D1D8
F2F2F2
—
1.8
Fail
2.4
Fail
3.1
AA Large
4.0
AA Large
1.8
Fail
—
1.4
Fail
1.7
Fail
2.3
Fail
2.4
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
3.1
AA Large
1.7
Fail
1.3
Fail
—
1.3
Fail
4.0
AA Large
2.3
Fail
1.7
Fail
1.3
Fail
—
White BG
4.5AA
2.6Fail
1.9Fail
1.5Fail
1.1Fail
Black BG
4.7AA
8.2AAA
11.2AAA
14.4AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B85
A5A5A4
BCBCC8
DBDBD6
F2F2F2

Deuteranopia

7C7D84
A6A7A4
BCBCC7
DCDED6
F2F2F2

Tritanopia

82807F
A9A3A3
BCC5C4
E2D5D5
F2F2F2

Achromatopsia

797979
A3A3A3
BEBEBE
D7D7D7
F2F2F2

Shades & Tints Shades & Tints

#83708C

Dark
Light

#AA9FA6

Dark
Light

#BCBCCC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83708c;
  --color-2: #aa9fa6;
  --color-3: #bcbccc;
  --color-4: #e3d1d8;
  --color-5: #f2f2f2;
}

SCSS

$color-1: #83708c;
$color-2: #aa9fa6;
$color-3: #bcbccc;
$color-4: #e3d1d8;
$color-5: #f2f2f2;

TAILWIND

colors: {
  'brand-1': '#83708c',
  'brand-2': '#aa9fa6',
  'brand-3': '#bcbccc',
  'brand-4': '#e3d1d8',
  'brand-5': '#f2f2f2',
}

RGB Array

[131, 112, 140], [170, 159, 166], [188, 188, 204], [227, 209, 216], [242, 242, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83708C, #AA9FA6, #BCBCCC, #E3D1D8, #F2F2F2 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #83708c; --color-2: #aa9fa6; --color-3: #bcbccc; --color-4: #e3d1d8; --color-5: #f2f2f2. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 general-style 5-color scheme is especially suited for beauty, lifestyle, arts 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