← Back to Editor

#F9F97D · #CDD874 · #FF3C59 · #CC0062 · #0C1E5A

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

#F9F97D

Fresh Green · Khaki · Sunflower

HEX
#F9F97D
RGB
rgb(249, 249, 125)
HSL
hsl(60, 91%, 73%)
HSB
hsb(60, 50%, 98%)
CMYK
cmyk(0%, 0%, 50%, 2%)
Oklch
oklch(95.8% 0.146 108.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#CDD874

Fresh Green · BurlyWood · Sunflower

HEX
#CDD874
RGB
rgb(205, 216, 116)
HSL
hsl(67, 56%, 65%)
HSB
hsb(67, 46%, 85%)
CMYK
cmyk(5%, 0%, 46%, 15%)
Oklch
oklch(85.3% 0.125 114.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FF3C59

Peach Pink · Tomato · Coral Red

HEX
#FF3C59
RGB
rgb(255, 60, 89)
HSL
hsl(351, 100%, 62%)
HSB
hsb(351, 76%, 100%)
CMYK
cmyk(0%, 76%, 65%, 0%)
Oklch
oklch(66.0% 0.228 18.5)

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

#CC0062

Dark Violet · MediumVioletRed · Camellia

HEX
#CC0062
RGB
rgb(204, 0, 98)
HSL
hsl(331, 100%, 40%)
HSB
hsb(331, 100%, 80%)
CMYK
cmyk(0%, 100%, 52%, 20%)
Oklch
oklch(54.5% 0.219 3.7)

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

#0C1E5A

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0C1E5A
RGB
rgb(12, 30, 90)
HSL
hsl(226, 76%, 20%)
HSB
hsb(226, 87%, 35%)
CMYK
cmyk(87%, 67%, 0%, 65%)
Oklch
oklch(26.6% 0.110 266.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F97D
7B7BF9

Analogous

F9BA7B
F9F97D
BAF97B

Triadic

F9F97D
7BF9F9
F97BF9

Split-Comp.

F9F97D
7BBAF9
BA7BF9

Tetradic

F9F97D
7BF9BA
7B7BF9
F97BBA

Contrast Matrix WCAG 2.1 Contrast

F9F97D
CDD874
FF3C59
CC0062
0C1E5A
—
1.4
Fail
3.1
AA Large
5.0
AA
14.0
AAA
1.4
Fail
—
2.3
Fail
3.7
AA Large
10.1
AAA
3.1
AA Large
2.3
Fail
—
1.6
Fail
4.5
AA Large
5.0
AA
3.7
AA Large
1.6
Fail
—
2.8
Fail
14.0
AAA
10.1
AAA
4.5
AA Large
2.8
Fail
—
White BG
1.1Fail
1.5Fail
3.5AA Large
5.6AA
15.6AAA
Black BG
18.9AAA
13.7AAA
6.0AA
3.7AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F99B
D2D28C
ABA952
74724A
14144B

Deuteranopia

F9F9A2
D1D092
B6C550
808F45
131148

Tritanopia

F9B3B8
CE9FA4
F54C4B
C23833
0D403E

Achromatopsia

EBEBEB
C9C9C9
7A7A7A
484848
1F1F1F

Shades & Tints Shades & Tints

#F9F97D

Dark
Light

#CDD874

Dark
Light

#FF3C59

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f97d;
  --color-2: #cdd874;
  --color-3: #ff3c59;
  --color-4: #cc0062;
  --color-5: #0c1e5a;
}

SCSS

$color-1: #f9f97d;
$color-2: #cdd874;
$color-3: #ff3c59;
$color-4: #cc0062;
$color-5: #0c1e5a;

TAILWIND

colors: {
  'brand-1': '#f9f97d',
  'brand-2': '#cdd874',
  'brand-3': '#ff3c59',
  'brand-4': '#cc0062',
  'brand-5': '#0c1e5a',
}

RGB Array

[249, 249, 125], [205, 216, 116], [255, 60, 89], [204, 0, 98], [12, 30, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F97D, #CDD874, #FF3C59, #CC0062, #0C1E5A 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: #f9f97d; --color-2: #cdd874; --color-3: #ff3c59; --color-4: #cc0062; --color-5: #0c1e5a. 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