#AFBAB7 + #BB85D6 + #C95DA3 + #AB2C6E + #6B5262 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AFBAB7

Silver Gray · Silver · Pearl Gray

HEX

#AFBAB7

RGB

rgb(175, 186, 183)

HSL

hsl(164, 7%, 71%)

HSB

hsb(164, 6%, 73%)

CMYK

cmyk(6%, 0%, 2%, 27%)

Oklch

oklch(77.9% 0.013 177.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#BB85D6

Lilac · Orchid · Lilac Purple

HEX

#BB85D6

RGB

rgb(187, 133, 214)

HSL

hsl(280, 50%, 68%)

HSB

hsb(280, 38%, 84%)

CMYK

cmyk(13%, 38%, 0%, 16%)

Oklch

oklch(70.0% 0.128 313.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#C95DA3

Rose Purple · MediumOrchid · Rose Pink

HEX

#C95DA3

RGB

rgb(201, 93, 163)

HSL

hsl(321, 50%, 58%)

HSB

hsb(321, 54%, 79%)

CMYK

cmyk(0%, 54%, 19%, 21%)

Oklch

oklch(63.2% 0.159 343.0)

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

#AB2C6E

Rose Purple · MediumVioletRed · Camellia

HEX

#AB2C6E

RGB

rgb(171, 44, 110)

HSL

hsl(329, 59%, 42%)

HSB

hsb(329, 74%, 67%)

CMYK

cmyk(0%, 74%, 36%, 33%)

Oklch

oklch(51.0% 0.173 353.4)

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

#6B5262

Rose Purple · DimGray · Camellia

HEX

#6B5262

RGB

rgb(107, 82, 98)

HSL

hsl(322, 13%, 37%)

HSB

hsb(322, 23%, 42%)

CMYK

cmyk(0%, 23%, 8%, 58%)

Oklch

oklch(47.0% 0.041 340.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFBAB7

BAB0B3

Analogous

B0BAB2

AFBAB7

B0B8BA

Triadic

AFBAB7

B7B0BA

BAB7B0

Split-Comp.

AFBAB7

BAB0B8

BAB2B0

Tetradic

AFBAB7

B2B0BA

BAB0B3

B8BAB0

Contrast Matrix WCAG 2.1 Contrast

AFBAB7	BB85D6	C95DA3	AB2C6E	6B5262
—	1.4 Fail	1.9 Fail	3.2 AA Large	3.5 AA Large
1.4 Fail	—	1.3 Fail	2.2 Fail	2.5 Fail
1.9 Fail	1.3 Fail	—	1.7 Fail	1.9 Fail
3.2 AA Large	2.2 Fail	1.7 Fail	—	1.1 Fail
3.5 AA Large	2.5 Fail	1.9 Fail	1.1 Fail	—

White BG

2.0Fail

2.8Fail

3.8AA Large

6.3AA

7.0AA

Black BG

10.5AAA

7.4AAA

5.6AA

3.3AA Large

3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B4B8

A4A3C2

9A9992

74735E

60605E

Deuteranopia

B3B2B8

A7ABBE

A1A98E

7B855A

62635D

Tritanopia

B0B8B8

B8B3B0

C48582

A5514F

6A5B5A

Achromatopsia

B6B6B6

9E9E9E

858585

595959

5B5B5B

Shades & Tints Shades & Tints

#AFBAB7

Dark

Light

#BB85D6

Dark

Light

#C95DA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afbab7;
  --color-2: #bb85d6;
  --color-3: #c95da3;
  --color-4: #ab2c6e;
  --color-5: #6b5262;
}

SCSS

$color-1: #afbab7;
$color-2: #bb85d6;
$color-3: #c95da3;
$color-4: #ab2c6e;
$color-5: #6b5262;

TAILWIND

colors: {
  'brand-1': '#afbab7',
  'brand-2': '#bb85d6',
  'brand-3': '#c95da3',
  'brand-4': '#ab2c6e',
  'brand-5': '#6b5262',
}

RGB Array

[175, 186, 183], [187, 133, 214], [201, 93, 163], [171, 44, 110], [107, 82, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #AFBAB7, #BB85D6, #C95DA3, #AB2C6E, #6B5262 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: #afbab7; --color-2: #bb85d6; --color-3: #c95da3; --color-4: #ab2c6e; --color-5: #6b5262. 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 cool-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