← Back to Editor

#F4E3B5 · #F5BE2C · #D98E00 · #E22400 · #326173

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

#F4E3B5

Goose Yellow · Wheat · Lemon Cream

HEX
#F4E3B5
RGB
rgb(244, 227, 181)
HSL
hsl(44, 74%, 83%)
HSB
hsb(44, 26%, 96%)
CMYK
cmyk(0%, 7%, 26%, 4%)
Oklch
oklch(91.8% 0.063 90.2)

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

#F5BE2C

Ginger · GoldenRod · Sunflower

HEX
#F5BE2C
RGB
rgb(245, 190, 44)
HSL
hsl(44, 91%, 57%)
HSB
hsb(44, 82%, 96%)
CMYK
cmyk(0%, 22%, 82%, 4%)
Oklch
oklch(82.9% 0.159 85.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D98E00

Ochre · DarkGoldenRod · Amber Brown

HEX
#D98E00
RGB
rgb(217, 142, 0)
HSL
hsl(39, 100%, 43%)
HSB
hsb(39, 100%, 85%)
CMYK
cmyk(0%, 35%, 100%, 15%)
Oklch
oklch(70.6% 0.151 72.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#E22400

Vermilion · OrangeRed · Passion Red

HEX
#E22400
RGB
rgb(226, 36, 0)
HSL
hsl(10, 100%, 44%)
HSB
hsb(10, 100%, 89%)
CMYK
cmyk(0%, 84%, 100%, 11%)
Oklch
oklch(58.5% 0.224 31.6)

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

#326173

Slate Blue · DarkSlateGray · Mint Ice

HEX
#326173
RGB
rgb(50, 97, 115)
HSL
hsl(197, 39%, 32%)
HSB
hsb(197, 57%, 45%)
CMYK
cmyk(57%, 16%, 0%, 55%)
Oklch
oklch(46.7% 0.059 225.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E3B5
B4C5F4

Analogous

F4C3B4
F4E3B5
E5F4B4

Triadic

F4E3B5
B4F4E3
E3B4F4

Split-Comp.

F4E3B5
B4E5F4
C3B4F4

Tetradic

F4E3B5
B4F4C3
B4C5F4
F4B4E5

Contrast Matrix WCAG 2.1 Contrast

F4E3B5
F5BE2C
D98E00
E22400
326173
—
1.3
Fail
2.1
Fail
3.7
AA Large
5.3
AA
1.3
Fail
—
1.6
Fail
2.7
Fail
4.0
AA Large
2.1
Fail
1.6
Fail
—
1.7
Fail
2.5
Fail
3.7
AA Large
2.7
Fail
1.7
Fail
—
1.5
Fail
5.3
AA
4.0
AA Large
2.5
Fail
1.5
Fail
—
White BG
1.3Fail
1.7Fail
2.7Fail
4.7AA
6.8AA
Black BG
16.5AAA
12.3AAA
7.8AAA
4.5AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDECC0
DDDD4F
B9B822
908E09
46476F

Deuteranopia

EEEFC3
E0E558
BDC22B
9BA90B
44406E

Tritanopia

F3C9CB
F26B71
D53D43
D91011
346B6A

Achromatopsia

E3E3E3
BEBEBE
949494
595959
555555

Shades & Tints Shades & Tints

#F4E3B5

Dark
Light

#F5BE2C

Dark
Light

#D98E00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e3b5;
  --color-2: #f5be2c;
  --color-3: #d98e00;
  --color-4: #e22400;
  --color-5: #326173;
}

SCSS

$color-1: #f4e3b5;
$color-2: #f5be2c;
$color-3: #d98e00;
$color-4: #e22400;
$color-5: #326173;

TAILWIND

colors: {
  'brand-1': '#f4e3b5',
  'brand-2': '#f5be2c',
  'brand-3': '#d98e00',
  'brand-4': '#e22400',
  'brand-5': '#326173',
}

RGB Array

[244, 227, 181], [245, 190, 44], [217, 142, 0], [226, 36, 0], [50, 97, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E3B5, #F5BE2C, #D98E00, #E22400, #326173 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: #f4e3b5; --color-2: #f5be2c; --color-3: #d98e00; --color-4: #e22400; --color-5: #326173. 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