← Back to Editor

#F2619B · #CE78A8 · #AA8FB4 · #86A6C1 · #85837E

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

#F2619B

Rouge · LightCoral · Rose Pink

HEX
#F2619B
RGB
rgb(242, 97, 155)
HSL
hsl(336, 85%, 66%)
HSB
hsb(336, 60%, 95%)
CMYK
cmyk(0%, 60%, 36%, 5%)
Oklch
oklch(69.2% 0.186 358.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CE78A8

Mauve · Orchid · Rose Pink

HEX
#CE78A8
RGB
rgb(206, 120, 168)
HSL
hsl(327, 47%, 64%)
HSB
hsb(327, 42%, 81%)
CMYK
cmyk(0%, 42%, 18%, 19%)
Oklch
oklch(68.1% 0.122 346.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#AA8FB4

Lilac · DarkGray · Lilac Purple

HEX
#AA8FB4
RGB
rgb(170, 143, 180)
HSL
hsl(284, 20%, 63%)
HSB
hsb(284, 21%, 71%)
CMYK
cmyk(6%, 21%, 0%, 29%)
Oklch
oklch(68.7% 0.061 316.8)

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

#86A6C1

Sky Blue · DarkGray · Cobalt Blue

HEX
#86A6C1
RGB
rgb(134, 166, 193)
HSL
hsl(207, 32%, 64%)
HSB
hsb(207, 31%, 76%)
CMYK
cmyk(31%, 14%, 0%, 24%)
Oklch
oklch(71.1% 0.053 244.1)

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

#85837E

Ash · Gray · Warm Gray

HEX
#85837E
RGB
rgb(133, 131, 126)
HSL
hsl(43, 3%, 51%)
HSB
hsb(43, 5%, 52%)
CMYK
cmyk(0%, 2%, 5%, 48%)
Oklch
oklch(61.0% 0.008 88.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2619B
5FF2B7

Analogous

F25FE3
F2619B
F26D5F

Triadic

F2619B
9AF25F
5F9AF2

Split-Comp.

F2619B
5FF26D
5FE3F2

Tetradic

F2619B
E3F25F
5FF2B7
6D5FF2

Contrast Matrix WCAG 2.1 Contrast

F2619B
CE78A8
AA8FB4
86A6C1
85837E
—
1.0
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.5
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.5
Fail
—
White BG
3.0AA Large
3.1AA Large
2.9Fail
2.5Fail
3.8AA Large
Black BG
7.0AA
6.9AA
7.3AAA
8.2AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B28D
A9A89C
9E9EAB
9494BA
84847F

Deuteranopia

BCC68A
AEB49A
A0A2A9
9290B9
84847F

Tritanopia

EB827F
CA9391
A9A4A2
88B5B4
858080

Achromatopsia

939393
979797
9B9B9B
A0A0A0
838383

Shades & Tints Shades & Tints

#F2619B

Dark
Light

#CE78A8

Dark
Light

#AA8FB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2619b;
  --color-2: #ce78a8;
  --color-3: #aa8fb4;
  --color-4: #86a6c1;
  --color-5: #85837e;
}

SCSS

$color-1: #f2619b;
$color-2: #ce78a8;
$color-3: #aa8fb4;
$color-4: #86a6c1;
$color-5: #85837e;

TAILWIND

colors: {
  'brand-1': '#f2619b',
  'brand-2': '#ce78a8',
  'brand-3': '#aa8fb4',
  'brand-4': '#86a6c1',
  'brand-5': '#85837e',
}

RGB Array

[242, 97, 155], [206, 120, 168], [170, 143, 180], [134, 166, 193], [133, 131, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2619B, #CE78A8, #AA8FB4, #86A6C1, #85837E 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: #f2619b; --color-2: #ce78a8; --color-3: #aa8fb4; --color-4: #86a6c1; --color-5: #85837e. 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