← Back to Editor

#525658 · #A7AAAD · #F6F4E8 · #A9BCDE · #687AB7

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

#525658

Ink Gray · DimGray · Charcoal

HEX
#525658
RGB
rgb(82, 86, 88)
HSL
hsl(200, 4%, 33%)
HSB
hsb(200, 7%, 35%)
CMYK
cmyk(7%, 2%, 0%, 65%)
Oklch
oklch(45.0% 0.006 228.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A7AAAD

Ash · DarkGray · Silver Sand

HEX
#A7AAAD
RGB
rgb(167, 170, 173)
HSL
hsl(210, 4%, 67%)
HSB
hsb(210, 3%, 68%)
CMYK
cmyk(3%, 2%, 0%, 32%)
Oklch
oklch(73.7% 0.006 247.9)

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

#F6F4E8

Fresh Green · Linen · Lemon Cream

HEX
#F6F4E8
RGB
rgb(246, 244, 232)
HSL
hsl(51, 44%, 94%)
HSB
hsb(51, 6%, 96%)
CMYK
cmyk(0%, 1%, 6%, 4%)
Oklch
oklch(96.5% 0.016 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#A9BCDE

Azure · LightSteelBlue · Cobalt Blue

HEX
#A9BCDE
RGB
rgb(169, 188, 222)
HSL
hsl(218, 45%, 77%)
HSB
hsb(218, 24%, 87%)
CMYK
cmyk(24%, 15%, 0%, 13%)
Oklch
oklch(79.2% 0.053 262.1)

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

#687AB7

Azure · SteelBlue · Navy Blue

HEX
#687AB7
RGB
rgb(104, 122, 183)
HSL
hsl(226, 35%, 56%)
HSB
hsb(226, 43%, 72%)
CMYK
cmyk(43%, 33%, 0%, 28%)
Oklch
oklch(59.1% 0.096 270.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

525658
585351

Analogous

515856
525658
515258

Triadic

525658
585155
555851

Split-Comp.

525658
585152
585651

Tetradic

525658
565158
585351
525851

Contrast Matrix WCAG 2.1 Contrast

525658
A7AAAD
F6F4E8
A9BCDE
687AB7
—
3.2
AA Large
6.7
AA
3.9
AA Large
1.8
Fail
3.2
AA Large
—
2.1
Fail
1.2
Fail
1.8
Fail
6.7
AA
2.1
Fail
—
1.7
Fail
3.8
AA Large
3.9
AA Large
1.2
Fail
1.7
Fail
—
2.2
Fail
1.8
Fail
1.8
Fail
3.8
AA Large
2.2
Fail
—
White BG
7.4AAA
2.3Fail
1.1Fail
1.9Fail
4.2AA Large
Black BG
2.8Fail
9.0AAA
19.0AAA
10.9AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545458
A8A8AC
F5F5EB
B1B1D6
7070A8

Deuteranopia

545357
A8A8AC
F5F5EC
B0AFD4
6F6DA5

Tritanopia

525757
A7ACAC
F6EDEE
AACFCE
699D9A

Achromatopsia

555555
A9A9A9
F3F3F3
BABABA
7C7C7C

Shades & Tints Shades & Tints

#525658

Dark
Light

#A7AAAD

Dark
Light

#F6F4E8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #525658;
  --color-2: #a7aaad;
  --color-3: #f6f4e8;
  --color-4: #a9bcde;
  --color-5: #687ab7;
}

SCSS

$color-1: #525658;
$color-2: #a7aaad;
$color-3: #f6f4e8;
$color-4: #a9bcde;
$color-5: #687ab7;

TAILWIND

colors: {
  'brand-1': '#525658',
  'brand-2': '#a7aaad',
  'brand-3': '#f6f4e8',
  'brand-4': '#a9bcde',
  'brand-5': '#687ab7',
}

RGB Array

[82, 86, 88], [167, 170, 173], [246, 244, 232], [169, 188, 222], [104, 122, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #525658, #A7AAAD, #F6F4E8, #A9BCDE, #687AB7 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: #525658; --color-2: #a7aaad; --color-3: #f6f4e8; --color-4: #a9bcde; --color-5: #687ab7. 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