← Back to Editor

#FFF69A · #F5C275 · #CF7D7F · #6E3358 · #27053C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFF69A

Fresh Green · Khaki · Lemon Cream

HEX
#FFF69A
RGB
rgb(255, 246, 154)
HSL
hsl(55, 100%, 80%)
HSB
hsb(55, 40%, 100%)
CMYK
cmyk(0%, 4%, 40%, 0%)
Oklch
oklch(96.0% 0.114 103.5)

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

#F5C275

Goose Yellow · BurlyWood · Warm Sun

HEX
#F5C275
RGB
rgb(245, 194, 117)
HSL
hsl(36, 86%, 71%)
HSB
hsb(36, 52%, 96%)
CMYK
cmyk(0%, 21%, 52%, 4%)
Oklch
oklch(84.4% 0.111 76.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CF7D7F

Peach Pink · LightCoral · Coral Red

HEX
#CF7D7F
RGB
rgb(207, 125, 127)
HSL
hsl(359, 46%, 65%)
HSB
hsb(359, 40%, 81%)
CMYK
cmyk(0%, 40%, 39%, 19%)
Oklch
oklch(67.8% 0.102 18.5)

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

#6E3358

Rose Purple · DimGray · Camellia

HEX
#6E3358
RGB
rgb(110, 51, 88)
HSL
hsl(322, 37%, 32%)
HSB
hsb(322, 54%, 43%)
CMYK
cmyk(0%, 54%, 20%, 57%)
Oklch
oklch(41.2% 0.097 343.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#27053C

Royal Purple · MidnightBlue · Dark Purple

HEX
#27053C
RGB
rgb(39, 5, 60)
HSL
hsl(277, 85%, 13%)
HSB
hsb(277, 92%, 24%)
CMYK
cmyk(35%, 92%, 0%, 76%)
Oklch
oklch(21.8% 0.099 308.2)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF69A
99A2FF

Analogous

FFC499
FFF69A
D5FF99

Triadic

FFF69A
99FFF6
F799FF

Split-Comp.

FFF69A
99D5FF
C499FF

Tetradic

FFF69A
99FFC3
99A2FF
FF99D4

Contrast Matrix WCAG 2.1 Contrast

FFF69A
F5C275
CF7D7F
6E3358
27053C
—
1.5
Fail
2.7
Fail
8.3
AAA
16.1
AAA
1.5
Fail
—
1.9
Fail
5.6
AA
11.0
AAA
2.7
Fail
1.9
Fail
—
3.0
AA Large
5.9
AA
8.3
AAA
5.6
AA
3.0
AA Large
—
1.9
Fail
16.1
AAA
11.0
AAA
5.9
AA
1.9
Fail
—
White BG
1.1Fail
1.6Fail
3.0AA Large
9.2AAA
17.9AAA
Black BG
18.9AAA
12.9AAA
6.9AA
2.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBB0
DFDE88
ABAB7F
54544F
18182F

Deuteranopia

FCFCB6
E2E68C
B0B67E
585C4D
1A1D2C

Tritanopia

FFC2C6
F2969A
CB7E7E
6B4846
252422

Achromatopsia

EEEEEE
C8C8C8
969696
494949
151515

Shades & Tints Shades & Tints

#FFF69A

Dark
Light

#F5C275

Dark
Light

#CF7D7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff69a;
  --color-2: #f5c275;
  --color-3: #cf7d7f;
  --color-4: #6e3358;
  --color-5: #27053c;
}

SCSS

$color-1: #fff69a;
$color-2: #f5c275;
$color-3: #cf7d7f;
$color-4: #6e3358;
$color-5: #27053c;

TAILWIND

colors: {
  'brand-1': '#fff69a',
  'brand-2': '#f5c275',
  'brand-3': '#cf7d7f',
  'brand-4': '#6e3358',
  'brand-5': '#27053c',
}

RGB Array

[255, 246, 154], [245, 194, 117], [207, 125, 127], [110, 51, 88], [39, 5, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF69A, #F5C275, #CF7D7F, #6E3358, #27053C 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: #fff69a; --color-2: #f5c275; --color-3: #cf7d7f; --color-4: #6e3358; --color-5: #27053c. 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