← Back to Editor

#F3437C · #F2B16A · #41B6CA · #3D89E9 · #FF9DFA

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

#F3437C

Rouge · DeepPink · Rose Pink

HEX
#F3437C
RGB
rgb(243, 67, 124)
HSL
hsl(341, 88%, 61%)
HSB
hsb(341, 72%, 95%)
CMYK
cmyk(0%, 72%, 49%, 5%)
Oklch
oklch(65.4% 0.214 6.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F2B16A

Ginger · SandyBrown · Warm Sun

HEX
#F2B16A
RGB
rgb(242, 177, 106)
HSL
hsl(31, 84%, 68%)
HSB
hsb(31, 56%, 95%)
CMYK
cmyk(0%, 27%, 56%, 5%)
Oklch
oklch(80.7% 0.116 67.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#41B6CA

Lake Blue · MediumTurquoise · Lake Green

HEX
#41B6CA
RGB
rgb(65, 182, 202)
HSL
hsl(189, 56%, 52%)
HSB
hsb(189, 68%, 79%)
CMYK
cmyk(68%, 10%, 0%, 21%)
Oklch
oklch(71.9% 0.106 211.1)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3D89E9

Azure · DodgerBlue · Navy Blue

HEX
#3D89E9
RGB
rgb(61, 137, 233)
HSL
hsl(213, 80%, 58%)
HSB
hsb(213, 74%, 91%)
CMYK
cmyk(74%, 41%, 0%, 9%)
Oklch
oklch(63.0% 0.163 255.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#FF9DFA

Mauve · Violet · Lavender

HEX
#FF9DFA
RGB
rgb(255, 157, 250)
HSL
hsl(303, 100%, 81%)
HSB
hsb(303, 38%, 100%)
CMYK
cmyk(0%, 38%, 2%, 0%)
Oklch
oklch(82.6% 0.163 328.7)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3437C
44F3BC

Analogous

F344D3
F3437C
F36444

Triadic

F3437C
7BF344
447BF3

Split-Comp.

F3437C
44F364
44D3F3

Tetradic

F3437C
D3F344
44F3BC
6444F3

Contrast Matrix WCAG 2.1 Contrast

F3437C
F2B16A
41B6CA
3D89E9
FF9DFA
—
1.9
Fail
1.5
Fail
1.0
Fail
1.9
Fail
1.9
Fail
—
1.3
Fail
1.9
Fail
1.0
Fail
1.5
Fail
1.3
Fail
—
1.5
Fail
1.3
Fail
1.0
Fail
1.9
Fail
1.5
Fail
—
1.9
Fail
1.9
Fail
1.0
Fail
1.3
Fail
1.9
Fail
—
White BG
3.6AA Large
1.9Fail
2.4Fail
3.5AA Large
1.8Fail
Black BG
5.9AA
11.3AAA
8.8AAA
6.0AA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A56E
D6D57B
7475C5
5E5FD2
D5D4E3

Deuteranopia

B1BE6B
DADE7F
6D64C4
5A54CC
DAE2DE

Tritanopia

EA6361
EF898C
47C1C1
41BFBB
FAD2CE

Achromatopsia

7E7E7E
BCBCBC
959595
7D7D7D
C5C5C5

Shades & Tints Shades & Tints

#F3437C

Dark
Light

#F2B16A

Dark
Light

#41B6CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3437c;
  --color-2: #f2b16a;
  --color-3: #41b6ca;
  --color-4: #3d89e9;
  --color-5: #ff9dfa;
}

SCSS

$color-1: #f3437c;
$color-2: #f2b16a;
$color-3: #41b6ca;
$color-4: #3d89e9;
$color-5: #ff9dfa;

TAILWIND

colors: {
  'brand-1': '#f3437c',
  'brand-2': '#f2b16a',
  'brand-3': '#41b6ca',
  'brand-4': '#3d89e9',
  'brand-5': '#ff9dfa',
}

RGB Array

[243, 67, 124], [242, 177, 106], [65, 182, 202], [61, 137, 233], [255, 157, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3437C, #F2B16A, #41B6CA, #3D89E9, #FF9DFA 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: #f3437c; --color-2: #f2b16a; --color-3: #41b6ca; --color-4: #3d89e9; --color-5: #ff9dfa. 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