#F83497 + #B16090 + #7B576D + #3B3C43 + #20B09F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F83497

Dark Violet · DeepPink · Rose Pink

HEX

#F83497

RGB

rgb(248, 52, 151)

HSL

hsl(330, 93%, 59%)

HSB

hsb(330, 79%, 97%)

CMYK

cmyk(0%, 79%, 39%, 3%)

Oklch

oklch(65.9% 0.240 355.8)

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

#B16090

Rose Purple · Gray · Rose Pink

HEX

#B16090

RGB

rgb(177, 96, 144)

HSL

hsl(324, 34%, 54%)

HSB

hsb(324, 46%, 69%)

CMYK

cmyk(0%, 46%, 19%, 31%)

Oklch

oklch(59.8% 0.120 344.9)

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

#7B576D

Rose Purple · DimGray · Camellia

HEX

#7B576D

RGB

rgb(123, 87, 109)

HSL

hsl(323, 17%, 41%)

HSB

hsb(323, 29%, 48%)

CMYK

cmyk(0%, 29%, 11%, 52%)

Oklch

oklch(50.2% 0.057 342.1)

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

#3B3C43

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3B3C43

RGB

rgb(59, 60, 67)

HSL

hsl(233, 6%, 25%)

HSB

hsb(233, 12%, 26%)

CMYK

cmyk(12%, 10%, 0%, 74%)

Oklch

oklch(35.8% 0.012 279.3)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#20B09F

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#20B09F

RGB

rgb(32, 176, 159)

HSL

hsl(173, 69%, 41%)

HSB

hsb(173, 82%, 69%)

CMYK

cmyk(82%, 0%, 10%, 31%)

Oklch

oklch(68.3% 0.116 182.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F83497

35F896

Analogous

F835F8

F83497

F83535

Triadic

F83497

96F835

3596F8

Split-Comp.

F83497

35F835

35F8F8

Tetradic

F83497

F8F835

35F896

3535F8

Contrast Matrix WCAG 2.1 Contrast

F83497	B16090	7B576D	3B3C43	20B09F
—	1.2 Fail	1.7 Fail	3.1 AA Large	1.3 Fail
1.2 Fail	—	1.4 Fail	2.6 Fail	1.6 Fail
1.7 Fail	1.4 Fail	—	1.8 Fail	2.3 Fail
3.1 AA Large	2.6 Fail	1.8 Fail	—	4.1 AA Large
1.3 Fail	1.6 Fail	2.3 Fail	4.1 AA Large	—

White BG

3.5AA Large

4.2AA Large

6.1AA

11.0AAA

2.7Fail

Black BG

5.9AA

4.9AA

3.4AA Large

1.9Fail

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A17F

8E8D84

6B6B68

3B3B41

5E60A3

Deuteranopia

AFBD79

939982

6E7066

3B3B41

564BA4

Tritanopia

EE6C68

AD7B79

796363

3B4040

27A6A7

Achromatopsia

7A7A7A

7E7E7E

646464

3C3C3C

838383

Shades & Tints Shades & Tints

#F83497

Dark

Light

#B16090

Dark

Light

#7B576D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f83497;
  --color-2: #b16090;
  --color-3: #7b576d;
  --color-4: #3b3c43;
  --color-5: #20b09f;
}

SCSS

$color-1: #f83497;
$color-2: #b16090;
$color-3: #7b576d;
$color-4: #3b3c43;
$color-5: #20b09f;

TAILWIND

colors: {
  'brand-1': '#f83497',
  'brand-2': '#b16090',
  'brand-3': '#7b576d',
  'brand-4': '#3b3c43',
  'brand-5': '#20b09f',
}

RGB Array

[248, 52, 151], [177, 96, 144], [123, 87, 109], [59, 60, 67], [32, 176, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F83497, #B16090, #7B576D, #3B3C43, #20B09F 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: #f83497; --color-2: #b16090; --color-3: #7b576d; --color-4: #3b3c43; --color-5: #20b09f. 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