← Back to Editor

#F4D18A · #FFAD5C · #E87C51 · #AD6C57 · #4B5E5B

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

#F4D18A

Goose Yellow · Khaki · Sunflower

HEX
#F4D18A
RGB
rgb(244, 209, 138)
HSL
hsl(40, 83%, 75%)
HSB
hsb(40, 43%, 96%)
CMYK
cmyk(0%, 14%, 43%, 4%)
Oklch
oklch(87.5% 0.097 84.3)

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

#FFAD5C

Ginger · SandyBrown · Warm Sun

HEX
#FFAD5C
RGB
rgb(255, 173, 92)
HSL
hsl(30, 100%, 68%)
HSB
hsb(30, 64%, 100%)
CMYK
cmyk(0%, 32%, 64%, 0%)
Oklch
oklch(81.2% 0.136 63.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E87C51

Apricot · Coral · Warm Sun

HEX
#E87C51
RGB
rgb(232, 124, 81)
HSL
hsl(17, 77%, 61%)
HSB
hsb(17, 65%, 91%)
CMYK
cmyk(0%, 47%, 65%, 9%)
Oklch
oklch(70.0% 0.146 41.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#AD6C57

Tangerine · Sienna · Warm Sun

HEX
#AD6C57
RGB
rgb(173, 108, 87)
HSL
hsl(15, 34%, 51%)
HSB
hsb(15, 50%, 68%)
CMYK
cmyk(0%, 38%, 50%, 32%)
Oklch
oklch(59.7% 0.089 38.7)

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

#4B5E5B

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#4B5E5B
RGB
rgb(75, 94, 91)
HSL
hsl(171, 11%, 33%)
HSB
hsb(171, 20%, 37%)
CMYK
cmyk(20%, 0%, 3%, 63%)
Oklch
oklch(46.5% 0.024 184.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4D18A
8AAEF4

Analogous

F49C8A
F4D18A
E3F48A

Triadic

F4D18A
8AF4D1
D18AF4

Split-Comp.

F4D18A
8AE3F4
9C8AF4

Tetradic

F4D18A
8AF49C
8AAEF4
F48AE3

Contrast Matrix WCAG 2.1 Contrast

F4D18A
FFAD5C
E87C51
AD6C57
4B5E5B
—
1.3
Fail
1.9
Fail
2.8
Fail
4.7
AA
1.3
Fail
—
1.5
Fail
2.3
Fail
3.7
AA Large
1.9
Fail
1.5
Fail
—
1.5
Fail
2.4
Fail
2.8
Fail
2.3
Fail
1.5
Fail
—
1.7
Fail
4.7
AA
3.7
AA Large
2.4
Fail
1.7
Fail
—
White BG
1.5Fail
1.8Fail
2.8Fail
4.2AA Large
6.9AA
Black BG
14.3AAA
11.4AAA
7.4AAA
5.1AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E59B
DBDB70
B9B85B
91905C
53535C

Deuteranopia

E7E99F
E0E674
C0C85E
959A5D
52515C

Tritanopia

F2A9AC
FB7F82
E36465
AA6061
4C5C5C

Achromatopsia

D3D3D3
BCBCBC
979797
7D7D7D
585858

Shades & Tints Shades & Tints

#F4D18A

Dark
Light

#FFAD5C

Dark
Light

#E87C51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4d18a;
  --color-2: #ffad5c;
  --color-3: #e87c51;
  --color-4: #ad6c57;
  --color-5: #4b5e5b;
}

SCSS

$color-1: #f4d18a;
$color-2: #ffad5c;
$color-3: #e87c51;
$color-4: #ad6c57;
$color-5: #4b5e5b;

TAILWIND

colors: {
  'brand-1': '#f4d18a',
  'brand-2': '#ffad5c',
  'brand-3': '#e87c51',
  'brand-4': '#ad6c57',
  'brand-5': '#4b5e5b',
}

RGB Array

[244, 209, 138], [255, 173, 92], [232, 124, 81], [173, 108, 87], [75, 94, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4D18A, #FFAD5C, #E87C51, #AD6C57, #4B5E5B 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: #f4d18a; --color-2: #ffad5c; --color-3: #e87c51; --color-4: #ad6c57; --color-5: #4b5e5b. 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