← Back to Editor

#F1396D · #F1C001 · #F32E71 · #F1A6C1 · #F0FF00

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

#F1396D

Dark Violet · DeepPink · Rose Pink

HEX
#F1396D
RGB
rgb(241, 57, 109)
HSL
hsl(343, 87%, 58%)
HSB
hsb(343, 76%, 95%)
CMYK
cmyk(0%, 76%, 55%, 5%)
Oklch
oklch(63.8% 0.219 9.9)

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

#F1C001

Ochre · Gold · Honey Gold

HEX
#F1C001
RGB
rgb(241, 192, 1)
HSL
hsl(48, 99%, 47%)
HSB
hsb(48, 100%, 95%)
CMYK
cmyk(0%, 20%, 100%, 5%)
Oklch
oklch(82.8% 0.169 90.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F32E71

Dark Violet · DeepPink · Rose Pink

HEX
#F32E71
RGB
rgb(243, 46, 113)
HSL
hsl(340, 89%, 57%)
HSB
hsb(340, 81%, 95%)
CMYK
cmyk(0%, 81%, 53%, 5%)
Oklch
oklch(63.5% 0.230 7.6)

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

#F1A6C1

Rouge · LightPink · Cherry Blossom

HEX
#F1A6C1
RGB
rgb(241, 166, 193)
HSL
hsl(338, 73%, 80%)
HSB
hsb(338, 31%, 95%)
CMYK
cmyk(0%, 31%, 20%, 5%)
Oklch
oklch(80.5% 0.094 356.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F0FF00

Autumn Sage · Yellow · Honey Gold

HEX
#F0FF00
RGB
rgb(240, 255, 0)
HSL
hsl(64, 100%, 50%)
HSB
hsb(64, 100%, 100%)
CMYK
cmyk(6%, 0%, 100%, 0%)
Oklch
oklch(95.6% 0.215 114.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1396D
37F1BC

Analogous

F137C9
F1396D
F15F37

Triadic

F1396D
6CF137
376CF1

Split-Comp.

F1396D
37F15F
37C9F1

Tetradic

F1396D
C9F137
37F1BC
5F37F1

Contrast Matrix WCAG 2.1 Contrast

F1396D
F1C001
F32E71
F1A6C1
F0FF00
—
2.2
Fail
1.0
Fail
2.0
Fail
3.4
AA Large
2.2
Fail
—
2.3
Fail
1.1
Fail
1.5
Fail
1.0
Fail
2.3
Fail
—
2.0
Fail
3.5
AA Large
2.0
Fail
1.1
Fail
2.0
Fail
—
1.7
Fail
3.4
AA Large
1.5
Fail
3.5
AA Large
1.7
Fail
—
White BG
3.8AA Large
1.7Fail
3.9AA Large
1.9Fail
1.1Fail
Black BG
5.5AA
12.3AAA
5.4AA
11.0AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A060
DCDB2F
9E9C61
D1D0BA
F6F73E

Deuteranopia

ACBA5D
DFE23A
A9B85D
D5DBB9
F6F54D

Tritanopia

E85654
EF545C
E95451
EDB5B4
F16E79

Achromatopsia

767676
B9B9B9
717171
C0C0C0
DDDDDD

Shades & Tints Shades & Tints

#F1396D

Dark
Light

#F1C001

Dark
Light

#F32E71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1396d;
  --color-2: #f1c001;
  --color-3: #f32e71;
  --color-4: #f1a6c1;
  --color-5: #f0ff00;
}

SCSS

$color-1: #f1396d;
$color-2: #f1c001;
$color-3: #f32e71;
$color-4: #f1a6c1;
$color-5: #f0ff00;

TAILWIND

colors: {
  'brand-1': '#f1396d',
  'brand-2': '#f1c001',
  'brand-3': '#f32e71',
  'brand-4': '#f1a6c1',
  'brand-5': '#f0ff00',
}

RGB Array

[241, 57, 109], [241, 192, 1], [243, 46, 113], [241, 166, 193], [240, 255, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1396D, #F1C001, #F32E71, #F1A6C1, #F0FF00 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: #f1396d; --color-2: #f1c001; --color-3: #f32e71; --color-4: #f1a6c1; --color-5: #f0ff00. 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