#7FA2B1 + #4CE0D2 + #AC6C94 + #C84A82 + #EC1F6B · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7FA2B1

Slate Blue · LightSlateGray · Lake Green

HEX

#7FA2B1

RGB

rgb(127, 162, 177)

HSL

hsl(198, 24%, 60%)

HSB

hsb(198, 28%, 69%)

CMYK

cmyk(28%, 8%, 0%, 31%)

Oklch

oklch(69.1% 0.044 226.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#4CE0D2

Mineral Blue · Turquoise · Lake Green

HEX

#4CE0D2

RGB

rgb(76, 224, 210)

HSL

hsl(174, 70%, 59%)

HSB

hsb(174, 66%, 88%)

CMYK

cmyk(66%, 0%, 6%, 12%)

Oklch

oklch(82.6% 0.125 186.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#AC6C94

Rose Purple · Gray · Rose Pink

HEX

#AC6C94

RGB

rgb(172, 108, 148)

HSL

hsl(323, 28%, 55%)

HSB

hsb(323, 37%, 67%)

CMYK

cmyk(0%, 37%, 14%, 33%)

Oklch

oklch(61.3% 0.097 342.3)

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

#C84A82

Dark Violet · MediumVioletRed · Rose Pink

HEX

#C84A82

RGB

rgb(200, 74, 130)

HSL

hsl(333, 53%, 54%)

HSB

hsb(333, 63%, 78%)

CMYK

cmyk(0%, 63%, 35%, 22%)

Oklch

oklch(59.5% 0.169 355.9)

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

#EC1F6B

Dark Violet · DeepPink · Rose Pink

HEX

#EC1F6B

RGB

rgb(236, 31, 107)

HSL

hsl(338, 84%, 52%)

HSB

hsb(338, 87%, 93%)

CMYK

cmyk(0%, 87%, 55%, 7%)

Oklch

oklch(61.4% 0.233 7.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FA2B1

B18F81

Analogous

81B1A8

7FA2B1

818AB1

Triadic

7FA2B1

B181A3

A3B181

Split-Comp.

7FA2B1

B1818A

B1A881

Tetradic

7FA2B1

A881B1

B18F81

8AB181

Contrast Matrix WCAG 2.1 Contrast

7FA2B1	4CE0D2	AC6C94	C84A82	EC1F6B
—	1.7 Fail	1.4 Fail	1.6 Fail	1.5 Fail
1.7 Fail	—	2.4 Fail	2.7 Fail	2.6 Fail
1.4 Fail	2.4 Fail	—	1.1 Fail	1.1 Fail
1.6 Fail	2.7 Fail	1.1 Fail	—	1.0 Fail
1.5 Fail	2.6 Fail	1.1 Fail	1.0 Fail	—

White BG

2.7Fail

1.6Fail

3.9AA Large

4.4AA Large

4.2AA Large

Black BG

7.7AAA

12.9AAA

5.3AA

4.8AA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8EAD

8C8DD5

90908A

919074

939159

Deuteranopia

8C8AAD

8478D6

949988

99A271

9FAF54

Tritanopia

81ABAA

53D8D9

A98381

C26A67

E24A47

Achromatopsia

999999

B2B2B2

848484

767676

656565

Shades & Tints Shades & Tints

#7FA2B1

Dark

Light

#4CE0D2

Dark

Light

#AC6C94

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fa2b1;
  --color-2: #4ce0d2;
  --color-3: #ac6c94;
  --color-4: #c84a82;
  --color-5: #ec1f6b;
}

SCSS

$color-1: #7fa2b1;
$color-2: #4ce0d2;
$color-3: #ac6c94;
$color-4: #c84a82;
$color-5: #ec1f6b;

TAILWIND

colors: {
  'brand-1': '#7fa2b1',
  'brand-2': '#4ce0d2',
  'brand-3': '#ac6c94',
  'brand-4': '#c84a82',
  'brand-5': '#ec1f6b',
}

RGB Array

[127, 162, 177], [76, 224, 210], [172, 108, 148], [200, 74, 130], [236, 31, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #7FA2B1, #4CE0D2, #AC6C94, #C84A82, #EC1F6B 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: #7fa2b1; --color-2: #4ce0d2; --color-3: #ac6c94; --color-4: #c84a82; --color-5: #ec1f6b. 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 dark-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