← Back to Editor

#F53274 · #FFE199 · #66A586 · #349991 · #27022E

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

Color Details Color Details

#F53274

Dark Violet · DeepPink · Rose Pink

HEX
#F53274
RGB
rgb(245, 50, 116)
HSL
hsl(340, 91%, 58%)
HSB
hsb(340, 80%, 96%)
CMYK
cmyk(0%, 80%, 53%, 4%)
Oklch
oklch(64.2% 0.229 7.2)

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

#FFE199

Goose Yellow · Khaki · Lemon Cream

HEX
#FFE199
RGB
rgb(255, 225, 153)
HSL
hsl(42, 100%, 80%)
HSB
hsb(42, 40%, 100%)
CMYK
cmyk(0%, 12%, 40%, 0%)
Oklch
oklch(91.9% 0.096 87.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#66A586

Mineral Blue · CadetBlue · Olive Green

HEX
#66A586
RGB
rgb(102, 165, 134)
HSL
hsl(150, 26%, 52%)
HSB
hsb(150, 38%, 65%)
CMYK
cmyk(38%, 0%, 19%, 35%)
Oklch
oklch(67.0% 0.080 161.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#349991

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#349991
RGB
rgb(52, 153, 145)
HSL
hsl(175, 49%, 40%)
HSB
hsb(175, 66%, 60%)
CMYK
cmyk(66%, 0%, 5%, 40%)
Oklch
oklch(62.3% 0.092 187.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#27022E

Royal Purple · Black · Dark Purple

HEX
#27022E
RGB
rgb(39, 2, 46)
HSL
hsl(290, 92%, 9%)
HSB
hsb(290, 96%, 18%)
CMYK
cmyk(15%, 96%, 0%, 82%)
Oklch
oklch(20.1% 0.090 320.9)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F53274
32F5B4

Analogous

F532D5
F53274
F55332

Triadic

F53274
73F532
3273F5

Split-Comp.

F53274
32F553
32D5F5

Tetradic

F53274
D5F532
32F5B4
5332F5

Contrast Matrix WCAG 2.1 Contrast

F53274
FFE199
66A586
349991
27022E
—
2.9
Fail
1.3
Fail
1.1
Fail
4.9
AA
2.9
Fail
—
2.3
Fail
2.7
Fail
14.5
AAA
1.3
Fail
2.3
Fail
—
1.2
Fail
6.4
AA
1.1
Fail
2.7
Fail
1.2
Fail
—
5.4
AA
4.9
AA
14.5
AAA
6.4
AA
5.4
AA
—
White BG
3.8AA Large
1.3Fail
2.9Fail
3.4AA Large
18.5AAA
Black BG
5.6AA
16.5AAA
7.3AAA
6.1AA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A19F64
F2F2AA
81828E
606193
171723

Deuteranopia

ACBB60
F4F6AF
7E798F
5A5293
191C21

Tritanopia

EB5755
FEB8BB
699395
399495
251B19

Achromatopsia

747474
E2E2E2
8F8F8F
7A7A7A
121212

Shades & Tints Shades & Tints

#F53274

Dark
Light

#FFE199

Dark
Light

#66A586

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f53274;
  --color-2: #ffe199;
  --color-3: #66a586;
  --color-4: #349991;
  --color-5: #27022e;
}

SCSS

$color-1: #f53274;
$color-2: #ffe199;
$color-3: #66a586;
$color-4: #349991;
$color-5: #27022e;

TAILWIND

colors: {
  'brand-1': '#f53274',
  'brand-2': '#ffe199',
  'brand-3': '#66a586',
  'brand-4': '#349991',
  'brand-5': '#27022e',
}

RGB Array

[245, 50, 116], [255, 225, 153], [102, 165, 134], [52, 153, 145], [39, 2, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F53274, #FFE199, #66A586, #349991, #27022E 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: #f53274; --color-2: #ffe199; --color-3: #66a586; --color-4: #349991; --color-5: #27022e. 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