← Back to Editor

#F422AA · #B3CAC6 · #00BAFE · #1697E4 · #1C72B7

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

#F422AA

Rose Purple · DeepPink · Rose Pink

HEX
#F422AA
RGB
rgb(244, 34, 170)
HSL
hsl(321, 91%, 55%)
HSB
hsb(321, 86%, 96%)
CMYK
cmyk(0%, 86%, 30%, 4%)
Oklch
oklch(65.0% 0.258 348.0)

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

#B3CAC6

Jade · Silver · Lake Green

HEX
#B3CAC6
RGB
rgb(179, 202, 198)
HSL
hsl(170, 18%, 75%)
HSB
hsb(170, 11%, 79%)
CMYK
cmyk(11%, 0%, 2%, 21%)
Oklch
oklch(82.1% 0.025 184.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#00BAFE

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#00BAFE
RGB
rgb(0, 186, 254)
HSL
hsl(196, 100%, 50%)
HSB
hsb(196, 100%, 100%)
CMYK
cmyk(100%, 27%, 0%, 0%)
Oklch
oklch(74.3% 0.155 233.9)

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

#1697E4

Lake Blue · DodgerBlue · Navy Blue

HEX
#1697E4
RGB
rgb(22, 151, 228)
HSL
hsl(202, 82%, 49%)
HSB
hsb(202, 90%, 89%)
CMYK
cmyk(90%, 34%, 0%, 11%)
Oklch
oklch(65.0% 0.153 243.2)

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

#1C72B7

Lake Blue · SteelBlue · Navy Blue

HEX
#1C72B7
RGB
rgb(28, 114, 183)
HSL
hsl(207, 73%, 41%)
HSB
hsb(207, 85%, 72%)
CMYK
cmyk(85%, 38%, 0%, 28%)
Oklch
oklch(53.9% 0.133 248.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F422AA
24F56D

Analogous

D524F5
F422AA
F52443

Triadic

F422AA
ACF524
24ACF5

Split-Comp.

F422AA
43F524
24F5D5

Tetradic

F422AA
F5D524
24F56D
2443F5

Contrast Matrix WCAG 2.1 Contrast

F422AA
B3CAC6
00BAFE
1697E4
1C72B7
—
2.2
Fail
1.7
Fail
1.2
Fail
1.4
Fail
2.2
Fail
—
1.3
Fail
1.9
Fail
2.9
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
2.3
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
1.4
Fail
2.9
Fail
2.3
Fail
1.6
Fail
—
White BG
3.7AA Large
1.7Fail
2.2Fail
3.2AA Large
5.1AA
Black BG
5.7AA
12.2AAA
9.5AAA
6.6AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

999789
BDBDC7
5152EE
4E4FD1
4142A6

Deuteranopia

A5B581
BCBAC7
4638EA
463DCD
3C36A2

Tritanopia

E96F69
B4C8C8
09E1DE
1CC3BF
209996

Achromatopsia

707070
C3C3C3
8A8A8A
797979
606060

Shades & Tints Shades & Tints

#F422AA

Dark
Light

#B3CAC6

Dark
Light

#00BAFE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f422aa;
  --color-2: #b3cac6;
  --color-3: #00bafe;
  --color-4: #1697e4;
  --color-5: #1c72b7;
}

SCSS

$color-1: #f422aa;
$color-2: #b3cac6;
$color-3: #00bafe;
$color-4: #1697e4;
$color-5: #1c72b7;

TAILWIND

colors: {
  'brand-1': '#f422aa',
  'brand-2': '#b3cac6',
  'brand-3': '#00bafe',
  'brand-4': '#1697e4',
  'brand-5': '#1c72b7',
}

RGB Array

[244, 34, 170], [179, 202, 198], [0, 186, 254], [22, 151, 228], [28, 114, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F422AA, #B3CAC6, #00BAFE, #1697E4, #1C72B7 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: #f422aa; --color-2: #b3cac6; --color-3: #00bafe; --color-4: #1697e4; --color-5: #1c72b7. 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