← Back to Editor

#F4F6D8 · #383345 · #E5D522 · #E3302F · #FFF9F3

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

#F4F6D8

Fresh Green · Beige · Lemon Cream

HEX
#F4F6D8
RGB
rgb(244, 246, 216)
HSL
hsl(64, 63%, 91%)
HSB
hsb(64, 12%, 96%)
CMYK
cmyk(1%, 0%, 12%, 4%)
Oklch
oklch(96.4% 0.039 110.2)

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

#383345

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#383345
RGB
rgb(56, 51, 69)
HSL
hsl(257, 15%, 24%)
HSB
hsb(257, 26%, 27%)
CMYK
cmyk(19%, 26%, 0%, 73%)
Oklch
oklch(33.4% 0.032 297.4)

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

#E5D522

Autumn Sage · Gold · Sunflower

HEX
#E5D522
RGB
rgb(229, 213, 34)
HSL
hsl(55, 79%, 52%)
HSB
hsb(55, 85%, 90%)
CMYK
cmyk(0%, 7%, 85%, 10%)
Oklch
oklch(85.9% 0.175 103.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E3302F

Vermilion · Crimson · Passion Red

HEX
#E3302F
RGB
rgb(227, 48, 47)
HSL
hsl(0, 76%, 54%)
HSB
hsb(0, 79%, 89%)
CMYK
cmyk(0%, 79%, 79%, 11%)
Oklch
oklch(59.7% 0.214 26.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#FFF9F3

Goose Yellow · SeaShell · Peach Orange

HEX
#FFF9F3
RGB
rgb(255, 249, 243)
HSL
hsl(30, 100%, 98%)
HSB
hsb(30, 5%, 100%)
CMYK
cmyk(0%, 2%, 5%, 0%)
Oklch
oklch(98.5% 0.010 67.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F6D8
DCDAF7

Analogous

F7EADA
F4F6D8
E6F7DA

Triadic

F4F6D8
DAF5F7
F7DAF5

Split-Comp.

F4F6D8
DAE6F7
EADAF7

Tetradic

F4F6D8
DAF7EA
DCDAF7
F7DAE6

Contrast Matrix WCAG 2.1 Contrast

F4F6D8
383345
E5D522
E3302F
FFF9F3
—
11.0
AAA
1.4
Fail
4.0
AA Large
1.1
Fail
11.0
AAA
—
8.0
AAA
2.7
Fail
11.6
AAA
1.4
Fail
8.0
AAA
—
2.9
Fail
1.4
Fail
4.0
AA Large
2.7
Fail
2.9
Fail
—
4.2
AA Large
1.1
Fail
11.6
AAA
1.4
Fail
4.2
AA Large
—
White BG
1.1Fail
12.2AAA
1.5Fail
4.4AA Large
1.0Fail
Black BG
19.0AAA
1.7Fail
13.9AAA
4.7AA
20.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5DF
363641
DEDE4D
95942F
FCFCF4

Deuteranopia

F5F5E1
363640
DFE058
A0AD2F
FDFDF5

Tritanopia

F4E5E6
383D3C
E47077
DA2F2F
FFF6F6

Achromatopsia

F2F2F2
373737
C5C5C5
656565
FAFAFA

Shades & Tints Shades & Tints

#F4F6D8

Dark
Light

#383345

Dark
Light

#E5D522

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f6d8;
  --color-2: #383345;
  --color-3: #e5d522;
  --color-4: #e3302f;
  --color-5: #fff9f3;
}

SCSS

$color-1: #f4f6d8;
$color-2: #383345;
$color-3: #e5d522;
$color-4: #e3302f;
$color-5: #fff9f3;

TAILWIND

colors: {
  'brand-1': '#f4f6d8',
  'brand-2': '#383345',
  'brand-3': '#e5d522',
  'brand-4': '#e3302f',
  'brand-5': '#fff9f3',
}

RGB Array

[244, 246, 216], [56, 51, 69], [229, 213, 34], [227, 48, 47], [255, 249, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F6D8, #383345, #E5D522, #E3302F, #FFF9F3 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: #f4f6d8; --color-2: #383345; --color-3: #e5d522; --color-4: #e3302f; --color-5: #fff9f3. 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