← Back to Editor

#FFF799 · #FF9C6F · #E76060 · #2F4069 · #5172AC

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

#FFF799

Fresh Green · Khaki · Lemon Cream

HEX
#FFF799
RGB
rgb(255, 247, 153)
HSL
hsl(55, 100%, 80%)
HSB
hsb(55, 40%, 100%)
CMYK
cmyk(0%, 3%, 40%, 0%)
Oklch
oklch(96.2% 0.116 104.1)

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

#FF9C6F

Apricot · LightSalmon · Warm Sun

HEX
#FF9C6F
RGB
rgb(255, 156, 111)
HSL
hsl(19, 100%, 72%)
HSB
hsb(19, 56%, 100%)
CMYK
cmyk(0%, 39%, 56%, 0%)
Oklch
oklch(78.5% 0.133 44.8)

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

#E76060

Peach Pink · Tomato · Coral Red

HEX
#E76060
RGB
rgb(231, 96, 96)
HSL
hsl(0, 74%, 64%)
HSB
hsb(0, 58%, 91%)
CMYK
cmyk(0%, 58%, 58%, 9%)
Oklch
oklch(66.0% 0.168 22.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#2F4069

Indigo · DarkSlateGray · Prussian Blue

HEX
#2F4069
RGB
rgb(47, 64, 105)
HSL
hsl(222, 38%, 30%)
HSB
hsb(222, 55%, 41%)
CMYK
cmyk(55%, 39%, 0%, 59%)
Oklch
oklch(37.8% 0.074 265.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#5172AC

Indigo · SteelBlue · Navy Blue

HEX
#5172AC
RGB
rgb(81, 114, 172)
HSL
hsl(218, 36%, 50%)
HSB
hsb(218, 53%, 67%)
CMYK
cmyk(53%, 34%, 0%, 33%)
Oklch
oklch(55.3% 0.099 261.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF799
99A2FF

Analogous

FFC499
FFF799
D5FF99

Triadic

FFF799
99FFF6
F799FF

Split-Comp.

FFF799
99D5FF
C499FF

Tetradic

FFF799
99FFC3
99A2FF
FF99D4

Contrast Matrix WCAG 2.1 Contrast

FFF799
FF9C6F
E76060
2F4069
5172AC
—
1.9
Fail
3.0
AA Large
9.2
AAA
4.4
AA Large
1.9
Fail
—
1.6
Fail
5.0
AA
2.4
Fail
3.0
AA Large
1.6
Fail
—
3.0
AA Large
1.4
Fail
9.2
AAA
5.0
AA
3.0
AA Large
—
2.1
Fail
4.4
AA Large
2.4
Fail
1.4
Fail
2.1
Fail
—
White BG
1.1Fail
2.1Fail
3.4AA Large
10.2AAA
4.8AA
Black BG
19.0AAA
10.2AAA
6.2AA
2.1Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFBB0
D4D37A
ADAB60
36375F
5F609E

Deuteranopia

FCFDB5
DAE17C
B4BF60
35345D
5D5B9B

Tritanopia

FFC2C6
FA8284
E06060
305756
539390

Achromatopsia

EFEFEF
B4B4B4
888888
404040
6F6F6F

Shades & Tints Shades & Tints

#FFF799

Dark
Light

#FF9C6F

Dark
Light

#E76060

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff799;
  --color-2: #ff9c6f;
  --color-3: #e76060;
  --color-4: #2f4069;
  --color-5: #5172ac;
}

SCSS

$color-1: #fff799;
$color-2: #ff9c6f;
$color-3: #e76060;
$color-4: #2f4069;
$color-5: #5172ac;

TAILWIND

colors: {
  'brand-1': '#fff799',
  'brand-2': '#ff9c6f',
  'brand-3': '#e76060',
  'brand-4': '#2f4069',
  'brand-5': '#5172ac',
}

RGB Array

[255, 247, 153], [255, 156, 111], [231, 96, 96], [47, 64, 105], [81, 114, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF799, #FF9C6F, #E76060, #2F4069, #5172AC 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: #fff799; --color-2: #ff9c6f; --color-3: #e76060; --color-4: #2f4069; --color-5: #5172ac. 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