← Back to Editor

#FF2664 · #C7C3C3 · #ABABAB · #8A8A8A · #757575

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF2664

Dark Violet · DeepPink · Rose Pink

HEX
#FF2664
RGB
rgb(255, 38, 100)
HSL
hsl(343, 100%, 57%)
HSB
hsb(343, 85%, 100%)
CMYK
cmyk(0%, 85%, 61%, 0%)
Oklch
oklch(64.9% 0.243 12.8)

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

#C7C3C3

Silver Gray · Silver · Pearl Gray

HEX
#C7C3C3
RGB
rgb(199, 195, 195)
HSL
hsl(0, 3%, 77%)
HSB
hsb(0, 2%, 78%)
CMYK
cmyk(0%, 2%, 2%, 22%)
Oklch
oklch(82.0% 0.004 17.2)

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

#ABABAB

Ash · DarkGray · Silver Sand

HEX
#ABABAB
RGB
rgb(171, 171, 171)
HSL
hsl(0, 0%, 67%)
HSB
hsb(0, 0%, 67%)
CMYK
cmyk(0%, 0%, 0%, 33%)
Oklch
oklch(74.1% 0.000 89.9)

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

#8A8A8A

Ash · Gray · Warm Gray

HEX
#8A8A8A
RGB
rgb(138, 138, 138)
HSL
hsl(0, 0%, 54%)
HSB
hsb(0, 0%, 54%)
CMYK
cmyk(0%, 0%, 0%, 46%)
Oklch
oklch(63.3% 0.000 89.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#757575

Ink Gray · Gray · Warm Gray

HEX
#757575
RGB
rgb(117, 117, 117)
HSL
hsl(0, 0%, 46%)
HSB
hsb(0, 0%, 46%)
CMYK
cmyk(0%, 0%, 0%, 54%)
Oklch
oklch(56.2% 0.000 89.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF2664
24FFC1

Analogous

FF24CF
FF2664
FF5324

Triadic

FF2664
62FF24
2462FF

Split-Comp.

FF2664
24FF53
24CFFF

Tetradic

FF2664
CFFF24
24FFC1
5324FF

Contrast Matrix WCAG 2.1 Contrast

FF2664
C7C3C3
ABABAB
8A8A8A
757575
—
2.1
Fail
1.6
Fail
1.1
Fail
1.3
Fail
2.1
Fail
—
1.3
Fail
2.0
Fail
2.6
Fail
1.6
Fail
1.3
Fail
—
1.5
Fail
2.0
Fail
1.1
Fail
2.0
Fail
1.5
Fail
—
1.3
Fail
1.3
Fail
2.6
Fail
2.0
Fail
1.3
Fail
—
White BG
3.7AA Large
1.7Fail
2.3Fail
3.5AA Large
4.6AA
Black BG
5.7AA
12.0AAA
9.1AAA
6.1AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A19F55
C5C5C3
ABABAB
8A8A8A
757575

Deuteranopia

AEBE51
C6C6C3
ABABAB
8A8A8A
757575

Tritanopia

F44947
C7C3C3
ABABAB
8A8A8A
757575

Achromatopsia

6E6E6E
C4C4C4
ABABAB
8A8A8A
757575

Shades & Tints Shades & Tints

#FF2664

Dark
Light

#C7C3C3

Dark
Light

#ABABAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff2664;
  --color-2: #c7c3c3;
  --color-3: #ababab;
  --color-4: #8a8a8a;
  --color-5: #757575;
}

SCSS

$color-1: #ff2664;
$color-2: #c7c3c3;
$color-3: #ababab;
$color-4: #8a8a8a;
$color-5: #757575;

TAILWIND

colors: {
  'brand-1': '#ff2664',
  'brand-2': '#c7c3c3',
  'brand-3': '#ababab',
  'brand-4': '#8a8a8a',
  'brand-5': '#757575',
}

RGB Array

[255, 38, 100], [199, 195, 195], [171, 171, 171], [138, 138, 138], [117, 117, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF2664, #C7C3C3, #ABABAB, #8A8A8A, #757575 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #ff2664; --color-2: #c7c3c3; --color-3: #ababab; --color-4: #8a8a8a; --color-5: #757575. 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. 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