← Back to Editor

#F3D012 · #CDE431 · #87DAE0 · #FC4E9A · #A465A6

cool

A 5-color cool 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

#F3D012

Autumn Sage · Gold · Sunflower

HEX
#F3D012
RGB
rgb(243, 208, 18)
HSL
hsl(51, 90%, 51%)
HSB
hsb(51, 93%, 95%)
CMYK
cmyk(0%, 14%, 93%, 5%)
Oklch
oklch(86.2% 0.175 96.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CDE431

Autumn Sage · GreenYellow · Sunflower

HEX
#CDE431
RGB
rgb(205, 228, 49)
HSL
hsl(68, 77%, 54%)
HSB
hsb(68, 79%, 89%)
CMYK
cmyk(10%, 0%, 79%, 11%)
Oklch
oklch(87.3% 0.189 117.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#87DAE0

Sky Blue · SkyBlue · Lake Green

HEX
#87DAE0
RGB
rgb(135, 218, 224)
HSL
hsl(184, 59%, 70%)
HSB
hsb(184, 40%, 88%)
CMYK
cmyk(40%, 3%, 0%, 12%)
Oklch
oklch(83.8% 0.081 201.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#FC4E9A

Rouge · LightCoral · Rose Pink

HEX
#FC4E9A
RGB
rgb(252, 78, 154)
HSL
hsl(334, 97%, 65%)
HSB
hsb(334, 69%, 99%)
CMYK
cmyk(0%, 69%, 39%, 1%)
Oklch
oklch(68.7% 0.218 357.9)

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

#A465A6

Dark Plum · MediumOrchid · Violet

HEX
#A465A6
RGB
rgb(164, 101, 166)
HSL
hsl(298, 27%, 52%)
HSB
hsb(298, 39%, 65%)
CMYK
cmyk(1%, 39%, 0%, 35%)
Oklch
oklch(59.9% 0.119 325.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3D012
1233F3

Analogous

F36012
F3D012
A4F312

Triadic

F3D012
12F3D1
D112F3

Split-Comp.

F3D012
12A4F3
6012F3

Tetradic

F3D012
12F360
1233F3
F312A4

Contrast Matrix WCAG 2.1 Contrast

F3D012
CDE431
87DAE0
FC4E9A
A465A6
—
1.1
Fail
1.1
Fail
2.1
Fail
2.8
Fail
1.1
Fail
—
1.1
Fail
2.2
Fail
3.0
Fail
1.1
Fail
1.1
Fail
—
2.0
Fail
2.6
Fail
2.1
Fail
2.2
Fail
2.0
Fail
—
1.3
Fail
2.8
Fail
3.0
Fail
2.6
Fail
1.3
Fail
—
White BG
1.5Fail
1.4Fail
1.6Fail
3.1AA Large
4.2AA Large
Black BG
13.8AAA
14.7AAA
13.1AAA
6.7AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E440
D7D75C
ABACDF
B1AF88
898896

Deuteranopia

E6E94B
D6D467
A6A0DE
BBC883
8C9193

Tritanopia

F1646C
CE7F86
8BDDDD
F37976
A18A87

Achromatopsia

C5C5C5
C9C9C9
C2C2C2
8B8B8B
7F7F7F

Shades & Tints Shades & Tints

#F3D012

Dark
Light

#CDE431

Dark
Light

#87DAE0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3d012;
  --color-2: #cde431;
  --color-3: #87dae0;
  --color-4: #fc4e9a;
  --color-5: #a465a6;
}

SCSS

$color-1: #f3d012;
$color-2: #cde431;
$color-3: #87dae0;
$color-4: #fc4e9a;
$color-5: #a465a6;

TAILWIND

colors: {
  'brand-1': '#f3d012',
  'brand-2': '#cde431',
  'brand-3': '#87dae0',
  'brand-4': '#fc4e9a',
  'brand-5': '#a465a6',
}

RGB Array

[243, 208, 18], [205, 228, 49], [135, 218, 224], [252, 78, 154], [164, 101, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F3D012, #CDE431, #87DAE0, #FC4E9A, #A465A6 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: #f3d012; --color-2: #cde431; --color-3: #87dae0; --color-4: #fc4e9a; --color-5: #a465a6. 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 cool-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