← Back to Editor

#524650 · #ACB6BA · #C6CAD7 · #DDDFE0 · #F1F2F3

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

#524650

Rose Purple · DarkSlateGray · Charcoal

HEX
#524650
RGB
rgb(82, 70, 80)
HSL
hsl(310, 8%, 30%)
HSB
hsb(310, 15%, 32%)
CMYK
cmyk(0%, 15%, 2%, 68%)
Oklch
oklch(41.0% 0.023 331.6)

Traditional「Rose Purple」· Paint「Charcoal」· Creative Midnight Shadow

#ACB6BA

Sky Blue · DarkGray · Silver Sand

HEX
#ACB6BA
RGB
rgb(172, 182, 186)
HSL
hsl(197, 9%, 70%)
HSB
hsb(197, 8%, 73%)
CMYK
cmyk(8%, 2%, 0%, 27%)
Oklch
oklch(77.0% 0.013 223.6)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

#C6CAD7

Azure · LightGray · Sky Blue

HEX
#C6CAD7
RGB
rgb(198, 202, 215)
HSL
hsl(226, 18%, 81%)
HSB
hsb(226, 8%, 84%)
CMYK
cmyk(8%, 6%, 0%, 16%)
Oklch
oklch(84.0% 0.019 272.3)

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

#DDDFE0

Plain White · LightGray · Cloud White

HEX
#DDDFE0
RGB
rgb(221, 223, 224)
HSL
hsl(200, 5%, 87%)
HSB
hsb(200, 1%, 88%)
CMYK
cmyk(1%, 0%, 0%, 12%)
Oklch
oklch(90.2% 0.003 228.8)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F1F2F3

Azure · SeaShell · Cloud White

HEX
#F1F2F3
RGB
rgb(241, 242, 243)
HSL
hsl(210, 8%, 95%)
HSB
hsb(210, 1%, 95%)
CMYK
cmyk(1%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.002 247.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524650
465348

Analogous

4F4653
524650
53464A

Triadic

524650
515346
465153

Split-Comp.

524650
4A5346
46534F

Tetradic

524650
534F46
465348
464A53

Contrast Matrix WCAG 2.1 Contrast

524650
ACB6BA
C6CAD7
DDDFE0
F1F2F3
—
4.3
AA Large
5.5
AA
6.7
AA
8.0
AAA
4.3
AA Large
—
1.3
Fail
1.5
Fail
1.8
Fail
5.5
AA
1.3
Fail
—
1.2
Fail
1.5
Fail
6.7
AA
1.5
Fail
1.2
Fail
—
1.2
Fail
8.0
AAA
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
8.9AAA
2.1Fail
1.6Fail
1.3Fail
1.1Fail
Black BG
2.4Fail
10.2AAA
12.8AAA
15.7AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D4E
B0B0B9
C8C8D4
DEDEE0
F1F1F3

Deuteranopia

4E4E4D
B0AFB9
C8C7D3
DEDEE0
F1F1F3

Tritanopia

514C4B
ADB8B8
C6D1D1
DDE0E0
F1F3F3

Achromatopsia

4B4B4B
B3B3B3
CACACA
DFDFDF
F2F2F2

Shades & Tints Shades & Tints

#524650

Dark
Light

#ACB6BA

Dark
Light

#C6CAD7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524650;
  --color-2: #acb6ba;
  --color-3: #c6cad7;
  --color-4: #dddfe0;
  --color-5: #f1f2f3;
}

SCSS

$color-1: #524650;
$color-2: #acb6ba;
$color-3: #c6cad7;
$color-4: #dddfe0;
$color-5: #f1f2f3;

TAILWIND

colors: {
  'brand-1': '#524650',
  'brand-2': '#acb6ba',
  'brand-3': '#c6cad7',
  'brand-4': '#dddfe0',
  'brand-5': '#f1f2f3',
}

RGB Array

[82, 70, 80], [172, 182, 186], [198, 202, 215], [221, 223, 224], [241, 242, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #524650, #ACB6BA, #C6CAD7, #DDDFE0, #F1F2F3 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: #524650; --color-2: #acb6ba; --color-3: #c6cad7; --color-4: #dddfe0; --color-5: #f1f2f3. 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