← Back to Editor

#F09FB2 · #7FD7A8 · #30A600 · #F01755 · #CF2067

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 AppData Visualization

Color Details Color Details

#F09FB2

Peach Pink · LightPink · Coral Red

HEX
#F09FB2
RGB
rgb(240, 159, 178)
HSL
hsl(346, 73%, 78%)
HSB
hsb(346, 34%, 94%)
CMYK
cmyk(0%, 34%, 26%, 6%)
Oklch
oklch(78.8% 0.099 4.3)

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

#7FD7A8

Emerald · MediumAquaMarine · Apple Green

HEX
#7FD7A8
RGB
rgb(127, 215, 168)
HSL
hsl(148, 52%, 67%)
HSB
hsb(148, 41%, 84%)
CMYK
cmyk(41%, 0%, 22%, 16%)
Oklch
oklch(81.1% 0.109 159.3)

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

#30A600

Pine Green · ForestGreen · Forest Green

HEX
#30A600
RGB
rgb(48, 166, 0)
HSL
hsl(103, 100%, 33%)
HSB
hsb(103, 100%, 65%)
CMYK
cmyk(71%, 0%, 100%, 35%)
Oklch
oklch(63.5% 0.205 140.2)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#F01755

Dark Violet · Crimson · Rose Pink

HEX
#F01755
RGB
rgb(240, 23, 85)
HSL
hsl(343, 88%, 52%)
HSB
hsb(343, 90%, 94%)
CMYK
cmyk(0%, 90%, 65%, 6%)
Oklch
oklch(61.3% 0.237 14.7)

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

#CF2067

Dark Violet · MediumVioletRed · Camellia

HEX
#CF2067
RGB
rgb(207, 32, 103)
HSL
hsl(336, 73%, 47%)
HSB
hsb(336, 85%, 81%)
CMYK
cmyk(0%, 85%, 50%, 19%)
Oklch
oklch(56.2% 0.209 3.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F09FB2
9EF0DD

Analogous

F09EDA
F09FB2
F0B49E

Triadic

F09FB2
B1F09E
9EB1F0

Split-Comp.

F09FB2
9EF0B4
9EDAF0

Tetradic

F09FB2
DAF09E
9EF0DD
B49EF0

Contrast Matrix WCAG 2.1 Contrast

F09FB2
7FD7A8
30A600
F01755
CF2067
—
1.2
Fail
1.6
Fail
2.1
Fail
2.5
Fail
1.2
Fail
—
1.9
Fail
2.5
Fail
3.0
AA Large
1.6
Fail
1.9
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
2.5
Fail
1.3
Fail
—
1.2
Fail
2.5
Fail
3.0
AA Large
1.6
Fail
1.2
Fail
—
White BG
2.0Fail
1.7Fail
3.2AA Large
4.2AA Large
5.2AA
Black BG
10.3AAA
12.2AAA
6.6AA
5.0AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCCAD
A5A6B3
636428
929046
838256

Deuteranopia

D2D8AC
A099B6
5C5332
9FAF42
8D9A52

Tritanopia

ECAAA9
83BCBE
36484F
E53A38
C64845

Achromatopsia

B9B9B9
B7B7B7
707070
5F5F5F
5C5C5C

Shades & Tints Shades & Tints

#F09FB2

Dark
Light

#7FD7A8

Dark
Light

#30A600

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f09fb2;
  --color-2: #7fd7a8;
  --color-3: #30a600;
  --color-4: #f01755;
  --color-5: #cf2067;
}

SCSS

$color-1: #f09fb2;
$color-2: #7fd7a8;
$color-3: #30a600;
$color-4: #f01755;
$color-5: #cf2067;

TAILWIND

colors: {
  'brand-1': '#f09fb2',
  'brand-2': '#7fd7a8',
  'brand-3': '#30a600',
  'brand-4': '#f01755',
  'brand-5': '#cf2067',
}

RGB Array

[240, 159, 178], [127, 215, 168], [48, 166, 0], [240, 23, 85], [207, 32, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F09FB2, #7FD7A8, #30A600, #F01755, #CF2067 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #f09fb2; --color-2: #7fd7a8; --color-3: #30a600; --color-4: #f01755; --color-5: #cf2067. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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