← Back to Editor

#7B788D · #F933B7 · #FD7E8F · #F2B9C4 · #D2F9C8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#7B788D

Deep Indigo · SlateGray · Warm Gray

HEX
#7B788D
RGB
rgb(123, 120, 141)
HSL
hsl(249, 8%, 51%)
HSB
hsb(249, 15%, 55%)
CMYK
cmyk(13%, 15%, 0%, 45%)
Oklch
oklch(58.3% 0.032 291.9)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#F933B7

Rose Purple · DeepPink · Rose Pink

HEX
#F933B7
RGB
rgb(249, 51, 183)
HSL
hsl(320, 94%, 59%)
HSB
hsb(320, 80%, 98%)
CMYK
cmyk(0%, 80%, 27%, 2%)
Oklch
oklch(67.2% 0.256 345.7)

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

#FD7E8F

Peach Pink · LightCoral · Coral Red

HEX
#FD7E8F
RGB
rgb(253, 126, 143)
HSL
hsl(352, 97%, 74%)
HSB
hsb(352, 50%, 99%)
CMYK
cmyk(0%, 50%, 43%, 1%)
Oklch
oklch(74.2% 0.155 13.2)

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

#F2B9C4

Peach Pink · LightPink · Cherry Blossom

HEX
#F2B9C4
RGB
rgb(242, 185, 196)
HSL
hsl(348, 69%, 84%)
HSB
hsb(348, 24%, 95%)
CMYK
cmyk(0%, 24%, 19%, 5%)
Oklch
oklch(84.0% 0.067 5.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#D2F9C8

Emerald · LightGray · Mint Green

HEX
#D2F9C8
RGB
rgb(210, 249, 200)
HSL
hsl(108, 80%, 88%)
HSB
hsb(108, 20%, 98%)
CMYK
cmyk(16%, 0%, 20%, 2%)
Oklch
oklch(94.2% 0.077 139.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B788D
898C78

Analogous

787F8C
7B788D
85788C

Triadic

7B788D
8C7B78
788C7B

Split-Comp.

7B788D
8C8578
7F8C78

Tetradic

7B788D
8C787F
898C78
788C85

Contrast Matrix WCAG 2.1 Contrast

7B788D
F933B7
FD7E8F
F2B9C4
D2F9C8
—
1.3
Fail
1.7
Fail
2.5
Fail
3.7
AA Large
1.3
Fail
—
1.4
Fail
2.0
Fail
2.9
Fail
1.7
Fail
1.4
Fail
—
1.5
Fail
2.1
Fail
2.5
Fail
2.0
Fail
1.5
Fail
—
1.4
Fail
3.7
AA Large
2.9
Fail
2.1
Fail
1.4
Fail
—
White BG
4.3AA Large
3.4AA Large
2.5Fail
1.7Fail
1.2Fail
Black BG
4.9AA
6.2AA
8.6AAA
12.5AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A88
A3A197
C6C58B
D9D9C1
E3E3D4

Deuteranopia

7A7A87
AFBE8F
CDD78A
DDE1C1
E1DED7

Tritanopia

7B8483
EF7E78
F78887
EFBFBF
D4DDDF

Achromatopsia

7B7B7B
7D7D7D
A6A6A6
CBCBCB
E8E8E8

Shades & Tints Shades & Tints

#7B788D

Dark
Light

#F933B7

Dark
Light

#FD7E8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b788d;
  --color-2: #f933b7;
  --color-3: #fd7e8f;
  --color-4: #f2b9c4;
  --color-5: #d2f9c8;
}

SCSS

$color-1: #7b788d;
$color-2: #f933b7;
$color-3: #fd7e8f;
$color-4: #f2b9c4;
$color-5: #d2f9c8;

TAILWIND

colors: {
  'brand-1': '#7b788d',
  'brand-2': '#f933b7',
  'brand-3': '#fd7e8f',
  'brand-4': '#f2b9c4',
  'brand-5': '#d2f9c8',
}

RGB Array

[123, 120, 141], [249, 51, 183], [253, 126, 143], [242, 185, 196], [210, 249, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B788D, #F933B7, #FD7E8F, #F2B9C4, #D2F9C8 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #7b788d; --color-2: #f933b7; --color-3: #fd7e8f; --color-4: #f2b9c4; --color-5: #d2f9c8. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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