← Back to Editor

#33AFA5 · #F7FDDF · #EB7879 · #EE2853 · #A71B4A

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

#33AFA5

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#33AFA5
RGB
rgb(51, 175, 165)
HSL
hsl(175, 55%, 44%)
HSB
hsb(175, 71%, 69%)
CMYK
cmyk(71%, 0%, 6%, 31%)
Oklch
oklch(68.5% 0.107 187.1)

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

#F7FDDF

Willow Green · LightYellow · Mint Green

HEX
#F7FDDF
RGB
rgb(247, 253, 223)
HSL
hsl(72, 88%, 93%)
HSB
hsb(72, 12%, 99%)
CMYK
cmyk(2%, 0%, 12%, 1%)
Oklch
oklch(98.2% 0.040 116.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#EB7879

Peach Pink · LightCoral · Coral Red

HEX
#EB7879
RGB
rgb(235, 120, 121)
HSL
hsl(359, 74%, 70%)
HSB
hsb(359, 49%, 92%)
CMYK
cmyk(0%, 49%, 49%, 8%)
Oklch
oklch(70.4% 0.142 20.8)

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

#EE2853

Vermilion · Crimson · Passion Red

HEX
#EE2853
RGB
rgb(238, 40, 83)
HSL
hsl(347, 85%, 55%)
HSB
hsb(347, 83%, 93%)
CMYK
cmyk(0%, 83%, 65%, 7%)
Oklch
oklch(61.7% 0.227 16.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#A71B4A

Dark Violet · Brown · Camellia

HEX
#A71B4A
RGB
rgb(167, 27, 74)
HSL
hsl(340, 72%, 38%)
HSB
hsb(340, 84%, 65%)
CMYK
cmyk(0%, 84%, 56%, 35%)
Oklch
oklch(47.9% 0.174 8.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33AFA5
AE323D

Analogous

32AE66
33AFA5
327AAE

Triadic

33AFA5
A432AE
AEA432

Split-Comp.

33AFA5
AE327A
AE6632

Tetradic

33AFA5
6632AE
AE323D
7AAE32

Contrast Matrix WCAG 2.1 Contrast

33AFA5
F7FDDF
EB7879
EE2853
A71B4A
—
2.6
Fail
1.0
Fail
1.5
Fail
2.7
Fail
2.6
Fail
—
2.7
Fail
4.0
AA Large
6.9
AA
1.0
Fail
2.7
Fail
—
1.5
Fail
2.6
Fail
1.5
Fail
4.0
AA Large
1.5
Fail
—
1.7
Fail
2.7
Fail
6.9
AA
2.6
Fail
1.7
Fail
—
White BG
2.7Fail
1.0Fail
2.8Fail
4.1AA Large
7.2AAA
Black BG
7.8AAA
20.1AAA
7.5AAA
5.1AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

696AA7
FAFAE6
B9B879
989649
6A693F

Deuteranopia

6258A8
F9F9E8
C0C979
A4B346
737D3C

Tritanopia

39A9AA
F7ECED
E57979
E4403F
A03634

Achromatopsia

898989
F8F8F8
9A9A9A
686868
4A4A4A

Shades & Tints Shades & Tints

#33AFA5

Dark
Light

#F7FDDF

Dark
Light

#EB7879

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33afa5;
  --color-2: #f7fddf;
  --color-3: #eb7879;
  --color-4: #ee2853;
  --color-5: #a71b4a;
}

SCSS

$color-1: #33afa5;
$color-2: #f7fddf;
$color-3: #eb7879;
$color-4: #ee2853;
$color-5: #a71b4a;

TAILWIND

colors: {
  'brand-1': '#33afa5',
  'brand-2': '#f7fddf',
  'brand-3': '#eb7879',
  'brand-4': '#ee2853',
  'brand-5': '#a71b4a',
}

RGB Array

[51, 175, 165], [247, 253, 223], [235, 120, 121], [238, 40, 83], [167, 27, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33AFA5, #F7FDDF, #EB7879, #EE2853, #A71B4A 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: #33afa5; --color-2: #f7fddf; --color-3: #eb7879; --color-4: #ee2853; --color-5: #a71b4a. 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