← Back to Editor

#F5A636 · #FCE1CF · #CFE0FC · #C7C5DC · #3F3989

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

#F5A636

Ginger · GoldenRod · Warm Sun

HEX
#F5A636
RGB
rgb(245, 166, 54)
HSL
hsl(35, 91%, 59%)
HSB
hsb(35, 78%, 96%)
CMYK
cmyk(0%, 32%, 78%, 4%)
Oklch
oklch(78.5% 0.151 70.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FCE1CF

Apricot · Bisque · Peach Orange

HEX
#FCE1CF
RGB
rgb(252, 225, 207)
HSL
hsl(24, 88%, 90%)
HSB
hsb(24, 18%, 99%)
CMYK
cmyk(0%, 11%, 18%, 1%)
Oklch
oklch(92.7% 0.038 55.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CFE0FC

Azure · Lavender · Sky Blue

HEX
#CFE0FC
RGB
rgb(207, 224, 252)
HSL
hsl(217, 88%, 90%)
HSB
hsb(217, 18%, 99%)
CMYK
cmyk(18%, 11%, 0%, 1%)
Oklch
oklch(90.3% 0.043 260.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#C7C5DC

Wisteria · LightGray · Sky Blue

HEX
#C7C5DC
RGB
rgb(199, 197, 220)
HSL
hsl(245, 25%, 82%)
HSB
hsb(245, 10%, 86%)
CMYK
cmyk(10%, 10%, 0%, 14%)
Oklch
oklch(83.2% 0.032 289.7)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#3F3989

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#3F3989
RGB
rgb(63, 57, 137)
HSL
hsl(245, 41%, 38%)
HSB
hsb(245, 58%, 54%)
CMYK
cmyk(54%, 58%, 0%, 46%)
Oklch
oklch(39.7% 0.129 282.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5A636
3787F6

Analogous

F64737
F5A636
E6F637

Triadic

F5A636
37F6A6
A637F6

Split-Comp.

F5A636
37E6F6
4737F6

Tetradic

F5A636
37F647
3787F6
F637E6

Contrast Matrix WCAG 2.1 Contrast

F5A636
FCE1CF
CFE0FC
C7C5DC
3F3989
—
1.6
Fail
1.5
Fail
1.2
Fail
4.8
AA
1.6
Fail
—
1.1
Fail
1.4
Fail
7.8
AAA
1.5
Fail
1.1
Fail
—
1.3
Fail
7.3
AAA
1.2
Fail
1.4
Fail
1.3
Fail
—
5.8
AA
4.8
AA
7.8
AAA
7.3
AAA
5.8
AA
—
White BG
2.0Fail
1.2Fail
1.3Fail
1.7Fail
9.7AAA
Black BG
10.4AAA
16.8AAA
15.7AAA
12.4AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D251
F0F0D3
D6D7F5
C6C6D6
3C3C76

Deuteranopia

D7DD58
F2F4D4
D5D4F4
C6C6D5
3D3D71

Tritanopia

F1666B
FBD7D8
D0F0EF
C7D2D1
3F6663

Achromatopsia

B1B1B1
E7E7E7
DEDEDE
C8C8C8
444444

Shades & Tints Shades & Tints

#F5A636

Dark
Light

#FCE1CF

Dark
Light

#CFE0FC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5a636;
  --color-2: #fce1cf;
  --color-3: #cfe0fc;
  --color-4: #c7c5dc;
  --color-5: #3f3989;
}

SCSS

$color-1: #f5a636;
$color-2: #fce1cf;
$color-3: #cfe0fc;
$color-4: #c7c5dc;
$color-5: #3f3989;

TAILWIND

colors: {
  'brand-1': '#f5a636',
  'brand-2': '#fce1cf',
  'brand-3': '#cfe0fc',
  'brand-4': '#c7c5dc',
  'brand-5': '#3f3989',
}

RGB Array

[245, 166, 54], [252, 225, 207], [207, 224, 252], [199, 197, 220], [63, 57, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5A636, #FCE1CF, #CFE0FC, #C7C5DC, #3F3989 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #f5a636; --color-2: #fce1cf; --color-3: #cfe0fc; --color-4: #c7c5dc; --color-5: #3f3989. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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