#8C93AC + #FE016B + #DB1447 + #6C606B + #CDC7C9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8C93AC

Azure · LightSlateGray · Cobalt Blue

HEX

#8C93AC

RGB

rgb(140, 147, 172)

HSL

hsl(227, 16%, 61%)

HSB

hsb(227, 19%, 67%)

CMYK

cmyk(19%, 15%, 0%, 33%)

Oklch

oklch(66.6% 0.038 273.0)

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

#FE016B

Dark Violet · DeepPink · Camellia

HEX

#FE016B

RGB

rgb(254, 1, 107)

HSL

hsl(335, 99%, 50%)

HSB

hsb(335, 100%, 100%)

CMYK

cmyk(0%, 100%, 58%, 0%)

Oklch

oklch(63.8% 0.255 8.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#DB1447

Vermilion · Crimson · Passion Red

HEX

#DB1447

RGB

rgb(219, 20, 71)

HSL

hsl(345, 83%, 47%)

HSB

hsb(345, 91%, 86%)

CMYK

cmyk(0%, 91%, 68%, 14%)

Oklch

oklch(57.1% 0.221 16.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#6C606B

Ink Gray · DimGray · Charcoal

HEX

#6C606B

RGB

rgb(108, 96, 107)

HSL

hsl(305, 6%, 40%)

HSB

hsb(305, 11%, 42%)

CMYK

cmyk(0%, 11%, 1%, 58%)

Oklch

oklch(50.4% 0.023 328.5)

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

#CDC7C9

Silver Gray · LightGray · Pearl Gray

HEX

#CDC7C9

RGB

rgb(205, 199, 201)

HSL

hsl(340, 6%, 79%)

HSB

hsb(340, 3%, 80%)

CMYK

cmyk(0%, 3%, 2%, 20%)

Oklch

oklch(83.5% 0.007 354.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C93AC

ABA58C

Analogous

8CA2AB

8C93AC

958CAB

Triadic

8C93AC

AB8C93

93AB8C

Split-Comp.

8C93AC

AB958C

A2AB8C

Tetradic

8C93AC

AB8CA2

ABA58C

8CAB95

Contrast Matrix WCAG 2.1 Contrast

8C93AC	FE016B	DB1447	6C606B	CDC7C9
—	1.3 Fail	1.6 Fail	2.0 Fail	1.8 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	2.3 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	3.0 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	3.6 AA Large
1.8 Fail	2.3 Fail	3.0 Fail	3.6 AA Large	—

White BG

3.1AA Large

3.9AA Large

5.0AA

6.0AA

1.7Fail

Black BG

6.9AA

5.4AA

4.2AA Large

3.5AA Large

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FA6

908E51

85833B

676768

CACAC9

Deuteranopia

8F8EA5

9FB24B

909F38

686868

CBCBC8

Tritanopia

8CA1A0

F13D39

D1312F

6B6666

CDC8C8

Achromatopsia

949494

595959

555555

656565

C9C9C9

Shades & Tints Shades & Tints

#8C93AC

Dark

Light

#FE016B

Dark

Light

#DB1447

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c93ac;
  --color-2: #fe016b;
  --color-3: #db1447;
  --color-4: #6c606b;
  --color-5: #cdc7c9;
}

SCSS

$color-1: #8c93ac;
$color-2: #fe016b;
$color-3: #db1447;
$color-4: #6c606b;
$color-5: #cdc7c9;

TAILWIND

colors: {
  'brand-1': '#8c93ac',
  'brand-2': '#fe016b',
  'brand-3': '#db1447',
  'brand-4': '#6c606b',
  'brand-5': '#cdc7c9',
}

RGB Array

[140, 147, 172], [254, 1, 107], [219, 20, 71], [108, 96, 107], [205, 199, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C93AC, #FE016B, #DB1447, #6C606B, #CDC7C9 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: #8c93ac; --color-2: #fe016b; --color-3: #db1447; --color-4: #6c606b; --color-5: #cdc7c9. 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