← Back to Editor

#828A8A · #DDD0C8 · #D5C6BD · #CFAFB5 · #BBAAB3

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

#828A8A

Ash · Gray · Warm Gray

HEX
#828A8A
RGB
rgb(130, 138, 138)
HSL
hsl(180, 3%, 53%)
HSB
hsb(180, 6%, 54%)
CMYK
cmyk(6%, 0%, 0%, 46%)
Oklch
oklch(62.7% 0.009 196.9)

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

#DDD0C8

Apricot · LightGray · Peach Orange

HEX
#DDD0C8
RGB
rgb(221, 208, 200)
HSL
hsl(23, 24%, 83%)
HSB
hsb(23, 10%, 87%)
CMYK
cmyk(0%, 6%, 10%, 13%)
Oklch
oklch(86.6% 0.018 53.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D5C6BD

Apricot · Silver · Peach Orange

HEX
#D5C6BD
RGB
rgb(213, 198, 189)
HSL
hsl(22, 22%, 79%)
HSB
hsb(22, 11%, 84%)
CMYK
cmyk(0%, 7%, 11%, 16%)
Oklch
oklch(83.6% 0.021 53.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CFAFB5

Peach Pink · Silver · Coral Red

HEX
#CFAFB5
RGB
rgb(207, 175, 181)
HSL
hsl(349, 25%, 75%)
HSB
hsb(349, 15%, 81%)
CMYK
cmyk(0%, 15%, 13%, 19%)
Oklch
oklch(78.4% 0.038 5.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#BBAAB3

Mauve · DarkGray · Rose Pink

HEX
#BBAAB3
RGB
rgb(187, 170, 179)
HSL
hsl(328, 11%, 70%)
HSB
hsb(328, 9%, 73%)
CMYK
cmyk(0%, 9%, 4%, 27%)
Oklch
oklch(75.5% 0.023 344.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

828A8A
8B8484

Analogous

848B87
828A8A
84878B

Triadic

828A8A
8B848B
8B8B84

Split-Comp.

828A8A
8B8487
8B8784

Tetradic

828A8A
87848B
8B8484
878B84

Contrast Matrix WCAG 2.1 Contrast

828A8A
DDD0C8
D5C6BD
CFAFB5
BBAAB3
—
2.3
Fail
2.1
Fail
1.8
Fail
1.6
Fail
2.3
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
2.1
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
3.5AA Large
1.5Fail
1.7Fail
2.0Fail
2.2Fail
Black BG
6.0AA
13.9AAA
12.6AAA
10.5AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85868A
D7D7CA
CFCEBF
C1C1B4
B4B3B1

Deuteranopia

85848A
D8D9CA
CFD1C0
C3C5B3
B5B6B0

Tritanopia

828A8A
DCCBCC
D4C1C1
CDB2B2
BAAFAF

Achromatopsia

888888
D3D3D3
C9C9C9
B9B9B9
B0B0B0

Shades & Tints Shades & Tints

#828A8A

Dark
Light

#DDD0C8

Dark
Light

#D5C6BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #828a8a;
  --color-2: #ddd0c8;
  --color-3: #d5c6bd;
  --color-4: #cfafb5;
  --color-5: #bbaab3;
}

SCSS

$color-1: #828a8a;
$color-2: #ddd0c8;
$color-3: #d5c6bd;
$color-4: #cfafb5;
$color-5: #bbaab3;

TAILWIND

colors: {
  'brand-1': '#828a8a',
  'brand-2': '#ddd0c8',
  'brand-3': '#d5c6bd',
  'brand-4': '#cfafb5',
  'brand-5': '#bbaab3',
}

RGB Array

[130, 138, 138], [221, 208, 200], [213, 198, 189], [207, 175, 181], [187, 170, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #828A8A, #DDD0C8, #D5C6BD, #CFAFB5, #BBAAB3 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: #828a8a; --color-2: #ddd0c8; --color-3: #d5c6bd; --color-4: #cfafb5; --color-5: #bbaab3. 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