← Back to Editor

#FDD58F · #EFA96D · #D1614D · #B04147 · #4A2B3D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FDD58F

Goose Yellow · Khaki · Peach Orange

HEX
#FDD58F
RGB
rgb(253, 213, 143)
HSL
hsl(38, 96%, 78%)
HSB
hsb(38, 43%, 99%)
CMYK
cmyk(0%, 16%, 43%, 1%)
Oklch
oklch(89.2% 0.099 80.9)

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

#EFA96D

Apricot · SandyBrown · Warm Sun

HEX
#EFA96D
RGB
rgb(239, 169, 109)
HSL
hsl(28, 80%, 68%)
HSB
hsb(28, 54%, 94%)
CMYK
cmyk(0%, 29%, 54%, 6%)
Oklch
oklch(78.9% 0.113 60.7)

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

#D1614D

Crimson · Tomato · Passion Red

HEX
#D1614D
RGB
rgb(209, 97, 77)
HSL
hsl(9, 59%, 56%)
HSB
hsb(9, 63%, 82%)
CMYK
cmyk(0%, 54%, 63%, 18%)
Oklch
oklch(62.6% 0.146 31.8)

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

#B04147

Crimson · Sienna · Passion Red

HEX
#B04147
RGB
rgb(176, 65, 71)
HSL
hsl(357, 46%, 47%)
HSB
hsb(357, 63%, 69%)
CMYK
cmyk(0%, 63%, 60%, 31%)
Oklch
oklch(53.0% 0.145 20.4)

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

#4A2B3D

Rose Purple · DarkSlateGray · Raspberry

HEX
#4A2B3D
RGB
rgb(74, 43, 61)
HSL
hsl(325, 26%, 23%)
HSB
hsb(325, 42%, 29%)
CMYK
cmyk(0%, 42%, 18%, 71%)
Oklch
oklch(33.5% 0.053 344.6)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDD58F
91B9FD

Analogous

FD9F91
FDD58F
EEFD91

Triadic

FDD58F
91FDD5
D591FD

Split-Comp.

FDD58F
91EEFD
9F91FD

Tetradic

FDD58F
91FD9F
91B9FD
FD91EE

Contrast Matrix WCAG 2.1 Contrast

FDD58F
EFA96D
D1614D
B04147
4A2B3D
—
1.4
Fail
2.7
Fail
4.1
AA Large
8.9
AAA
1.4
Fail
—
1.9
Fail
2.9
Fail
6.2
AA
2.7
Fail
1.9
Fail
—
1.5
Fail
3.2
AA Large
4.1
AA Large
2.9
Fail
1.5
Fail
—
2.2
Fail
8.9
AAA
6.2
AA
3.2
AA Large
2.2
Fail
—
White BG
1.4Fail
2.0Fail
3.8AA Large
5.7AA
12.3AAA
Black BG
15.1AAA
10.6AAA
5.5AA
3.7AA Large
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEBA0
D1D07C
A19F52
807F46
3D3C39

Deuteranopia

EEF1A4
D5DA7F
A7AF53
868F45
3E4138

Tritanopia

FBADB0
EB878A
CB5657
AA4444
483534

Achromatopsia

D9D9D9
B7B7B7
808080
636363
363636

Shades & Tints Shades & Tints

#FDD58F

Dark
Light

#EFA96D

Dark
Light

#D1614D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdd58f;
  --color-2: #efa96d;
  --color-3: #d1614d;
  --color-4: #b04147;
  --color-5: #4a2b3d;
}

SCSS

$color-1: #fdd58f;
$color-2: #efa96d;
$color-3: #d1614d;
$color-4: #b04147;
$color-5: #4a2b3d;

TAILWIND

colors: {
  'brand-1': '#fdd58f',
  'brand-2': '#efa96d',
  'brand-3': '#d1614d',
  'brand-4': '#b04147',
  'brand-5': '#4a2b3d',
}

RGB Array

[253, 213, 143], [239, 169, 109], [209, 97, 77], [176, 65, 71], [74, 43, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDD58F, #EFA96D, #D1614D, #B04147, #4A2B3D 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: #fdd58f; --color-2: #efa96d; --color-3: #d1614d; --color-4: #b04147; --color-5: #4a2b3d. 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