← Back to Editor

#F1F7BE · #F4E196 · #F5BC8E · #F5878E · #1D1666

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

#F1F7BE

Fresh Green · Bisque · Lemon Cream

HEX
#F1F7BE
RGB
rgb(241, 247, 190)
HSL
hsl(66, 78%, 86%)
HSB
hsb(66, 23%, 97%)
CMYK
cmyk(2%, 0%, 23%, 3%)
Oklch
oklch(95.8% 0.074 112.7)

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

#F4E196

Goose Yellow · Khaki · Lemon Cream

HEX
#F4E196
RGB
rgb(244, 225, 150)
HSL
hsl(48, 81%, 77%)
HSB
hsb(48, 39%, 96%)
CMYK
cmyk(0%, 8%, 39%, 4%)
Oklch
oklch(90.8% 0.097 95.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F5BC8E

Apricot · BurlyWood · Peach Orange

HEX
#F5BC8E
RGB
rgb(245, 188, 142)
HSL
hsl(27, 84%, 76%)
HSB
hsb(27, 42%, 96%)
CMYK
cmyk(0%, 23%, 42%, 4%)
Oklch
oklch(83.6% 0.089 60.1)

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

#F5878E

Peach Pink · LightCoral · Coral Red

HEX
#F5878E
RGB
rgb(245, 135, 142)
HSL
hsl(356, 85%, 75%)
HSB
hsb(356, 45%, 96%)
CMYK
cmyk(0%, 45%, 42%, 4%)
Oklch
oklch(74.5% 0.134 16.8)

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

#1D1666

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#1D1666
RGB
rgb(29, 22, 102)
HSL
hsl(245, 65%, 24%)
HSB
hsb(245, 78%, 40%)
CMYK
cmyk(72%, 78%, 0%, 60%)
Oklch
oklch(27.5% 0.132 277.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F7BE
C5BFF7

Analogous

F7E1BF
F1F7BE
D6F7BF

Triadic

F1F7BE
BFF2F7
F7BFF2

Split-Comp.

F1F7BE
BFD6F7
E1BFF7

Tetradic

F1F7BE
BFF7E1
C5BFF7
F7BFD6

Contrast Matrix WCAG 2.1 Contrast

F1F7BE
F4E196
F5BC8E
F5878E
1D1666
—
1.2
Fail
1.5
Fail
2.1
Fail
13.8
AAA
1.2
Fail
—
1.3
Fail
1.8
Fail
11.8
AAA
1.5
Fail
1.3
Fail
—
1.4
Fail
9.2
AAA
2.1
Fail
1.8
Fail
1.4
Fail
—
6.4
AA
13.8
AAA
11.8
AAA
9.2
AAA
6.4
AA
—
White BG
1.1Fail
1.3Fail
1.7Fail
2.4Fail
15.5AAA
Black BG
18.8AAA
16.1AAA
12.5AAA
8.7AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4CC
ECECA8
DCDC99
C5C48C
1A1A53

Deuteranopia

F3F3CF
EDEEAD
E0E49C
CCD48C
1A1B4E

Tritanopia

F1D7D9
F3B6BA
F2A2A4
F08B8B
1D4340

Achromatopsia

EFEFEF
DEDEDE
C8C8C8
A9A9A9
212121

Shades & Tints Shades & Tints

#F1F7BE

Dark
Light

#F4E196

Dark
Light

#F5BC8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f7be;
  --color-2: #f4e196;
  --color-3: #f5bc8e;
  --color-4: #f5878e;
  --color-5: #1d1666;
}

SCSS

$color-1: #f1f7be;
$color-2: #f4e196;
$color-3: #f5bc8e;
$color-4: #f5878e;
$color-5: #1d1666;

TAILWIND

colors: {
  'brand-1': '#f1f7be',
  'brand-2': '#f4e196',
  'brand-3': '#f5bc8e',
  'brand-4': '#f5878e',
  'brand-5': '#1d1666',
}

RGB Array

[241, 247, 190], [244, 225, 150], [245, 188, 142], [245, 135, 142], [29, 22, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F7BE, #F4E196, #F5BC8E, #F5878E, #1D1666 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: #f1f7be; --color-2: #f4e196; --color-3: #f5bc8e; --color-4: #f5878e; --color-5: #1d1666. 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