← Back to Editor

#827EAA · #8AA5BB · #95B3BD · #CDC6C3 · #CCC5BA

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

WorkspaceReading

Color Details Color Details

#827EAA

Deep Indigo · LightSlateGray · Navy Blue

HEX
#827EAA
RGB
rgb(130, 126, 170)
HSL
hsl(245, 21%, 58%)
HSB
hsb(245, 26%, 67%)
CMYK
cmyk(24%, 26%, 0%, 33%)
Oklch
oklch(61.3% 0.066 288.4)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

#8AA5BB

Sky Blue · DarkGray · Cobalt Blue

HEX
#8AA5BB
RGB
rgb(138, 165, 187)
HSL
hsl(207, 26%, 64%)
HSB
hsb(207, 26%, 73%)
CMYK
cmyk(26%, 12%, 0%, 27%)
Oklch
oklch(70.9% 0.044 242.9)

TraditionalSky Blue」· PaintCobalt Blue」· Creative Twilight Haze

#95B3BD

Sky Blue · DarkGray · Lake Green

HEX
#95B3BD
RGB
rgb(149, 179, 189)
HSL
hsl(195, 23%, 66%)
HSB
hsb(195, 21%, 74%)
CMYK
cmyk(21%, 5%, 0%, 26%)
Oklch
oklch(74.8% 0.036 220.0)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#CDC6C3

Apricot · Silver · Pearl Gray

HEX
#CDC6C3
RGB
rgb(205, 198, 195)
HSL
hsl(18, 9%, 78%)
HSB
hsb(18, 5%, 80%)
CMYK
cmyk(0%, 3%, 5%, 20%)
Oklch
oklch(83.1% 0.009 44.9)

TraditionalApricot」· PaintPearl Gray」· Creative Silver Lining

#CCC5BA

Goose Yellow · Silver · Peach Orange

HEX
#CCC5BA
RGB
rgb(204, 197, 186)
HSL
hsl(37, 15%, 76%)
HSB
hsb(37, 9%, 80%)
CMYK
cmyk(0%, 3%, 9%, 20%)
Oklch
oklch(82.6% 0.017 79.3)

TraditionalGoose Yellow」· PaintPeach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

827EAA
A7AA7D

Analogous

7D90AA
827EAA
987DAA

Triadic

827EAA
AA817D
7DAA81

Split-Comp.

827EAA
AA987D
90AA7D

Tetradic

827EAA
AA7D90
A7AA7D
7DAA98

Contrast Matrix WCAG 2.1 Contrast

827EAA
8AA5BB
95B3BD
CDC6C3
CCC5BA
1.5
Fail
1.7
Fail
2.3
Fail
2.2
Fail
1.5
Fail
1.2
Fail
1.5
Fail
1.5
Fail
1.7
Fail
1.2
Fail
1.3
Fail
1.3
Fail
2.3
Fail
1.5
Fail
1.3
Fail
1.0
Fail
2.2
Fail
1.5
Fail
1.3
Fail
1.0
Fail
White BG
3.8AA Large
2.6Fail
2.2Fail
1.7Fail
1.7Fail
Black BG
5.5AA
8.2AAA
9.5AAA
12.5AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80809F
9696B6
A2A2BB
CACAC4
C9C9BD

Deuteranopia

81819D
9492B4
A09EBA
CACBC4
C9CABD

Tritanopia

829795
8BB1B1
96B9B8
CDC4C4
CCBFBF

Achromatopsia

848484
9F9F9F
ABABAB
C8C8C8
C6C6C6

Shades & Tints Shades & Tints

#827EAA

Dark
Light

#8AA5BB

Dark
Light

#95B3BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #827eaa;
  --color-2: #8aa5bb;
  --color-3: #95b3bd;
  --color-4: #cdc6c3;
  --color-5: #ccc5ba;
}

SCSS

$color-1: #827eaa;
$color-2: #8aa5bb;
$color-3: #95b3bd;
$color-4: #cdc6c3;
$color-5: #ccc5ba;

TAILWIND

colors: {
  'brand-1': '#827eaa',
  'brand-2': '#8aa5bb',
  'brand-3': '#95b3bd',
  'brand-4': '#cdc6c3',
  'brand-5': '#ccc5ba',
}

RGB Array

[130, 126, 170], [138, 165, 187], [149, 179, 189], [205, 198, 195], [204, 197, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #827EAA, #8AA5BB, #95B3BD, #CDC6C3, #CCC5BA is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #827eaa; --color-2: #8aa5bb; --color-3: #95b3bd; --color-4: #cdc6c3; --color-5: #ccc5ba. 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. 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