← Back to Editor

#716170 · #B7B586 · #F3FE98 · #F9898B · #FF187F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#716170

Rose Purple · DimGray · Warm Gray

HEX
#716170
RGB
rgb(113, 97, 112)
HSL
hsl(304, 8%, 41%)
HSB
hsb(304, 14%, 44%)
CMYK
cmyk(0%, 14%, 1%, 56%)
Oklch
oklch(51.3% 0.031 328.0)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#B7B586

Fresh Green · Tan · Sunflower

HEX
#B7B586
RGB
rgb(183, 181, 134)
HSL
hsl(58, 25%, 62%)
HSB
hsb(58, 27%, 72%)
CMYK
cmyk(0%, 1%, 27%, 28%)
Oklch
oklch(76.3% 0.064 105.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F3FE98

Fresh Green · Khaki · Lemon Cream

HEX
#F3FE98
RGB
rgb(243, 254, 152)
HSL
hsl(66, 98%, 80%)
HSB
hsb(66, 40%, 100%)
CMYK
cmyk(4%, 0%, 40%, 0%)
Oklch
oklch(96.7% 0.126 113.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9898B

Peach Pink · LightCoral · Coral Red

HEX
#F9898B
RGB
rgb(249, 137, 139)
HSL
hsl(359, 90%, 76%)
HSB
hsb(359, 45%, 98%)
CMYK
cmyk(0%, 45%, 44%, 2%)
Oklch
oklch(75.3% 0.136 19.7)

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

#FF187F

Dark Violet · DeepPink · Rose Pink

HEX
#FF187F
RGB
rgb(255, 24, 127)
HSL
hsl(333, 100%, 55%)
HSB
hsb(333, 91%, 100%)
CMYK
cmyk(0%, 91%, 50%, 0%)
Oklch
oklch(65.0% 0.254 3.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

716170
607161

Analogous

6A6071
716170
716067

Triadic

716170
707160
607071

Split-Comp.

716170
677160
60716A

Tetradic

716170
716A60
607161
606771

Contrast Matrix WCAG 2.1 Contrast

716170
B7B586
F3FE98
F9898B
FF187F
—
2.7
Fail
5.3
AA
2.5
Fail
1.6
Fail
2.7
Fail
—
2.0
Fail
1.1
Fail
1.8
Fail
5.3
AA
2.0
Fail
—
2.2
Fail
3.4
AA Large
2.5
Fail
1.1
Fail
2.2
Fail
—
1.6
Fail
1.6
Fail
1.8
Fail
3.4
AA Large
1.6
Fail
—
White BG
5.8AA
2.1Fail
1.1Fail
2.3Fail
3.7AA Large
Black BG
3.6AA Large
10.0AAA
19.4AAA
9.0AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A6C
B6B691
F8F8B1
C9C78B
9B9966

Deuteranopia

6B6C6B
B6B694
F7F6B7
CFD78A
A8BA60

Tritanopia

706A69
B79A9C
F4C4C8
F38A8A
F3524E

Achromatopsia

676767
B0B0B0
EFEFEF
ABABAB
696969

Shades & Tints Shades & Tints

#716170

Dark
Light

#B7B586

Dark
Light

#F3FE98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #716170;
  --color-2: #b7b586;
  --color-3: #f3fe98;
  --color-4: #f9898b;
  --color-5: #ff187f;
}

SCSS

$color-1: #716170;
$color-2: #b7b586;
$color-3: #f3fe98;
$color-4: #f9898b;
$color-5: #ff187f;

TAILWIND

colors: {
  'brand-1': '#716170',
  'brand-2': '#b7b586',
  'brand-3': '#f3fe98',
  'brand-4': '#f9898b',
  'brand-5': '#ff187f',
}

RGB Array

[113, 97, 112], [183, 181, 134], [243, 254, 152], [249, 137, 139], [255, 24, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #716170, #B7B586, #F3FE98, #F9898B, #FF187F is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #716170; --color-2: #b7b586; --color-3: #f3fe98; --color-4: #f9898b; --color-5: #ff187f. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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