← Back to Editor

#24AA89 · #984B9D · #F94471 · #FD835A · #FFCF44

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

#24AA89

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#24AA89
RGB
rgb(36, 170, 137)
HSL
hsl(165, 65%, 40%)
HSB
hsb(165, 79%, 67%)
CMYK
cmyk(79%, 0%, 19%, 33%)
Oklch
oklch(66.1% 0.121 171.3)

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

#984B9D

Dark Plum · DarkOrchid · Violet

HEX
#984B9D
RGB
rgb(152, 75, 157)
HSL
hsl(296, 35%, 45%)
HSB
hsb(296, 52%, 62%)
CMYK
cmyk(3%, 52%, 0%, 38%)
Oklch
oklch(53.9% 0.148 325.1)

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

#F94471

Peach Pink · Tomato · Coral Red

HEX
#F94471
RGB
rgb(249, 68, 113)
HSL
hsl(345, 94%, 62%)
HSB
hsb(345, 73%, 98%)
CMYK
cmyk(0%, 73%, 55%, 2%)
Oklch
oklch(66.2% 0.217 11.1)

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

#FD835A

Apricot · Coral · Warm Sun

HEX
#FD835A
RGB
rgb(253, 131, 90)
HSL
hsl(15, 98%, 67%)
HSB
hsb(15, 64%, 99%)
CMYK
cmyk(0%, 48%, 64%, 1%)
Oklch
oklch(74.0% 0.159 39.1)

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

#FFCF44

Ginger · SandyBrown · Sunflower

HEX
#FFCF44
RGB
rgb(255, 207, 68)
HSL
hsl(45, 100%, 63%)
HSB
hsb(45, 73%, 100%)
CMYK
cmyk(0%, 19%, 73%, 0%)
Oklch
oklch(87.3% 0.157 89.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24AA89
A82445

Analogous

24A845
24AA89
2487A8

Triadic

24AA89
8724A8
A88724

Split-Comp.

24AA89
A82487
A84524

Tetradic

24AA89
4524A8
A82445
87A824

Contrast Matrix WCAG 2.1 Contrast

24AA89
984B9D
F94471
FD835A
FFCF44
—
1.9
Fail
1.2
Fail
1.2
Fail
2.0
Fail
1.9
Fail
—
1.6
Fail
2.2
Fail
3.7
AA Large
1.2
Fail
1.6
Fail
—
1.4
Fail
2.3
Fail
1.2
Fail
2.2
Fail
1.4
Fail
—
1.7
Fail
2.0
Fail
3.7
AA Large
2.3
Fail
1.7
Fail
—
White BG
2.9Fail
5.5AA
3.4AA Large
2.5Fail
1.5Fail
Black BG
7.2AAA
3.8AA Large
6.1AA
8.6AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5F91
777689
ABA966
C8C764
EAEA66

Deuteranopia

564C93
7B8184
B5C364
CFD866
EDF16E

Tritanopia

2B9799
947976
F05E5C
F76C6D
FD8086

Achromatopsia

7E7E7E
6B6B6B
7F7F7F
A3A3A3
CECECE

Shades & Tints Shades & Tints

#24AA89

Dark
Light

#984B9D

Dark
Light

#F94471

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24aa89;
  --color-2: #984b9d;
  --color-3: #f94471;
  --color-4: #fd835a;
  --color-5: #ffcf44;
}

SCSS

$color-1: #24aa89;
$color-2: #984b9d;
$color-3: #f94471;
$color-4: #fd835a;
$color-5: #ffcf44;

TAILWIND

colors: {
  'brand-1': '#24aa89',
  'brand-2': '#984b9d',
  'brand-3': '#f94471',
  'brand-4': '#fd835a',
  'brand-5': '#ffcf44',
}

RGB Array

[36, 170, 137], [152, 75, 157], [249, 68, 113], [253, 131, 90], [255, 207, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24AA89, #984B9D, #F94471, #FD835A, #FFCF44 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: #24aa89; --color-2: #984b9d; --color-3: #f94471; --color-4: #fd835a; --color-5: #ffcf44. 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