← Back to Editor

#EC1F6B · #F0A8C2 · #B8A9AC · #82A3A8 · #639799

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

#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

#F0A8C2

Rouge · LightPink · Cherry Blossom

HEX
#F0A8C2
RGB
rgb(240, 168, 194)
HSL
hsl(338, 71%, 80%)
HSB
hsb(338, 30%, 94%)
CMYK
cmyk(0%, 30%, 19%, 6%)
Oklch
oklch(80.8% 0.090 355.9)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#B8A9AC

Peach Pink · DarkGray · Coral Red

HEX
#B8A9AC
RGB
rgb(184, 169, 172)
HSL
hsl(348, 10%, 69%)
HSB
hsb(348, 8%, 72%)
CMYK
cmyk(0%, 8%, 7%, 28%)
Oklch
oklch(74.8% 0.018 3.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#82A3A8

Slate Blue · LightSlateGray · Lake Green

HEX
#82A3A8
RGB
rgb(130, 163, 168)
HSL
hsl(188, 18%, 58%)
HSB
hsb(188, 23%, 66%)
CMYK
cmyk(23%, 3%, 0%, 34%)
Oklch
oklch(69.2% 0.037 207.7)

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

#639799

Slate Blue · CadetBlue · Mint Ice

HEX
#639799
RGB
rgb(99, 151, 153)
HSL
hsl(182, 21%, 49%)
HSB
hsb(182, 35%, 60%)
CMYK
cmyk(35%, 1%, 0%, 40%)
Oklch
oklch(64.1% 0.055 198.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EC1F6B
1EEBA0

Analogous

EB1ED0
EC1F6B
EB391E

Triadic

EC1F6B
69EB1E
1E69EB

Split-Comp.

EC1F6B
1EEB39
1ED0EB

Tetradic

EC1F6B
D0EB1E
1EEBA0
391EEB

Contrast Matrix WCAG 2.1 Contrast

EC1F6B
F0A8C2
B8A9AC
82A3A8
639799
—
2.2
Fail
1.9
Fail
1.6
Fail
1.3
Fail
2.2
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
White BG
4.2AA Large
1.9Fail
2.3Fail
2.7Fail
3.3AA Large
Black BG
5.0AA
11.1AAA
9.3AAA
7.8AAA
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939159
D1D0BC
B2B1AB
9091A7
7A7A99

Deuteranopia

9FAF54
D5DABA
B2B3AB
8E8CA7
777398

Tritanopia

E24A47
ECB7B6
B7ABAB
84A6A6
669898

Achromatopsia

656565
C0C0C0
AEAEAE
9A9A9A
888888

Shades & Tints Shades & Tints

#EC1F6B

Dark
Light

#F0A8C2

Dark
Light

#B8A9AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ec1f6b;
  --color-2: #f0a8c2;
  --color-3: #b8a9ac;
  --color-4: #82a3a8;
  --color-5: #639799;
}

SCSS

$color-1: #ec1f6b;
$color-2: #f0a8c2;
$color-3: #b8a9ac;
$color-4: #82a3a8;
$color-5: #639799;

TAILWIND

colors: {
  'brand-1': '#ec1f6b',
  'brand-2': '#f0a8c2',
  'brand-3': '#b8a9ac',
  'brand-4': '#82a3a8',
  'brand-5': '#639799',
}

RGB Array

[236, 31, 107], [240, 168, 194], [184, 169, 172], [130, 163, 168], [99, 151, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EC1F6B, #F0A8C2, #B8A9AC, #82A3A8, #639799 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: #ec1f6b; --color-2: #f0a8c2; --color-3: #b8a9ac; --color-4: #82a3a8; --color-5: #639799. 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