← Back to Editor

#ADB7BA · #989EAC · #A8809A · #C25787 · #FA467F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ADB7BA

Sky Blue · Silver · Silver Sand

HEX
#ADB7BA
RGB
rgb(173, 183, 186)
HSL
hsl(194, 9%, 70%)
HSB
hsb(194, 7%, 73%)
CMYK
cmyk(7%, 2%, 0%, 27%)
Oklch
oklch(77.2% 0.012 217.6)

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

#989EAC

Azure · DarkGray · Cobalt Blue

HEX
#989EAC
RGB
rgb(152, 158, 172)
HSL
hsl(222, 11%, 64%)
HSB
hsb(222, 12%, 67%)
CMYK
cmyk(12%, 8%, 0%, 33%)
Oklch
oklch(69.9% 0.022 267.2)

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

#A8809A

Rose Purple · DarkGray · Rose Pink

HEX
#A8809A
RGB
rgb(168, 128, 154)
HSL
hsl(321, 19%, 58%)
HSB
hsb(321, 24%, 66%)
CMYK
cmyk(0%, 24%, 8%, 34%)
Oklch
oklch(64.7% 0.061 339.8)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#C25787

Dark Violet · LightCoral · Rose Pink

HEX
#C25787
RGB
rgb(194, 87, 135)
HSL
hsl(333, 47%, 55%)
HSB
hsb(333, 55%, 76%)
CMYK
cmyk(0%, 55%, 30%, 24%)
Oklch
oklch(60.4% 0.146 354.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FA467F

Rouge · DeepPink · Rose Pink

HEX
#FA467F
RGB
rgb(250, 70, 127)
HSL
hsl(341, 95%, 63%)
HSB
hsb(341, 72%, 98%)
CMYK
cmyk(0%, 72%, 49%, 2%)
Oklch
oklch(66.8% 0.218 6.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADB7BA
B9AFAC

Analogous

ACB9B6
ADB7BA
ACAFB9

Triadic

ADB7BA
B9ACB6
B6B9AC

Split-Comp.

ADB7BA
B9ACAF
B9B6AC

Tetradic

ADB7BA
B6ACB9
B9AFAC
AFB9AC

Contrast Matrix WCAG 2.1 Contrast

ADB7BA
989EAC
A8809A
C25787
FA467F
—
1.3
Fail
1.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.3
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
1.0
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.3
Fail
1.0
Fail
1.2
Fail
—
White BG
2.0Fail
2.7Fail
3.4AA Large
4.2AA Large
3.4AA Large
Black BG
10.3AAA
7.8AAA
6.2AA
5.0AA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1B9
9B9BA9
979694
94937B
ACAA71

Deuteranopia

B1B0B9
9A9AA8
999C92
9AA279
B7C46E

Tritanopia

AEB9B9
98A6A5
A68F8E
BD7270
F16664

Achromatopsia

B4B4B4
9E9E9E
8F8F8F
7C7C7C
828282

Shades & Tints Shades & Tints

#ADB7BA

Dark
Light

#989EAC

Dark
Light

#A8809A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adb7ba;
  --color-2: #989eac;
  --color-3: #a8809a;
  --color-4: #c25787;
  --color-5: #fa467f;
}

SCSS

$color-1: #adb7ba;
$color-2: #989eac;
$color-3: #a8809a;
$color-4: #c25787;
$color-5: #fa467f;

TAILWIND

colors: {
  'brand-1': '#adb7ba',
  'brand-2': '#989eac',
  'brand-3': '#a8809a',
  'brand-4': '#c25787',
  'brand-5': '#fa467f',
}

RGB Array

[173, 183, 186], [152, 158, 172], [168, 128, 154], [194, 87, 135], [250, 70, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADB7BA, #989EAC, #A8809A, #C25787, #FA467F is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #adb7ba; --color-2: #989eac; --color-3: #a8809a; --color-4: #c25787; --color-5: #fa467f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco industries. 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