← Back to Editor

#FDD3BD · #F8C188 · #F68F6E · #E81212 · #313E46

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

#FDD3BD

Apricot · Wheat · Peach Orange

HEX
#FDD3BD
RGB
rgb(253, 211, 189)
HSL
hsl(21, 94%, 87%)
HSB
hsb(21, 25%, 99%)
CMYK
cmyk(0%, 17%, 25%, 1%)
Oklch
oklch(89.7% 0.056 49.2)

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

#F8C188

Goose Yellow · BurlyWood · Warm Sun

HEX
#F8C188
RGB
rgb(248, 193, 136)
HSL
hsl(31, 89%, 75%)
HSB
hsb(31, 45%, 97%)
CMYK
cmyk(0%, 22%, 45%, 3%)
Oklch
oklch(84.8% 0.097 66.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F68F6E

Apricot · Salmon · Warm Sun

HEX
#F68F6E
RGB
rgb(246, 143, 110)
HSL
hsl(15, 88%, 70%)
HSB
hsb(15, 55%, 96%)
CMYK
cmyk(0%, 42%, 55%, 4%)
Oklch
oklch(75.3% 0.134 38.5)

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

#E81212

Vermilion · Red · Passion Red

HEX
#E81212
RGB
rgb(232, 18, 18)
HSL
hsl(0, 86%, 49%)
HSB
hsb(0, 92%, 91%)
CMYK
cmyk(0%, 92%, 92%, 9%)
Oklch
oklch(58.9% 0.235 28.6)

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

#313E46

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#313E46
RGB
rgb(49, 62, 70)
HSL
hsl(203, 18%, 23%)
HSB
hsb(203, 30%, 27%)
CMYK
cmyk(30%, 11%, 0%, 73%)
Oklch
oklch(35.6% 0.022 235.3)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDD3BD
BFE7FD

Analogous

FDBFC8
FDD3BD
FDF4BF

Triadic

FDD3BD
BFFDD5
D5BFFD

Split-Comp.

FDD3BD
BFFDF4
BFC8FD

Tetradic

FDD3BD
C8FDBF
BFE7FD
F4BFFD

Contrast Matrix WCAG 2.1 Contrast

FDD3BD
F8C188
F68F6E
E81212
313E46
—
1.2
Fail
1.7
Fail
3.4
AA Large
8.0
AAA
1.2
Fail
—
1.4
Fail
2.9
Fail
6.8
AA
1.7
Fail
1.4
Fail
—
2.0
Fail
4.8
AA
3.4
AA Large
2.9
Fail
2.0
Fail
—
2.4
Fail
8.0
AAA
6.8
AA
4.8
AA
2.4
Fail
—
White BG
1.4Fail
1.6Fail
2.3Fail
4.6AA
11.0AAA
Black BG
15.2AAA
13.0AAA
9.1AAA
4.5AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEAC2
E0E096
C9C876
8B8912
373744

Deuteranopia

EDF0C4
E3E899
CFD778
98A812
363544

Tritanopia

FBC7C7
F5A1A3
F17C7E
DD1212
324342

Achromatopsia

DDDDDD
CBCBCB
AAAAAA
525252
3B3B3B

Shades & Tints Shades & Tints

#FDD3BD

Dark
Light

#F8C188

Dark
Light

#F68F6E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdd3bd;
  --color-2: #f8c188;
  --color-3: #f68f6e;
  --color-4: #e81212;
  --color-5: #313e46;
}

SCSS

$color-1: #fdd3bd;
$color-2: #f8c188;
$color-3: #f68f6e;
$color-4: #e81212;
$color-5: #313e46;

TAILWIND

colors: {
  'brand-1': '#fdd3bd',
  'brand-2': '#f8c188',
  'brand-3': '#f68f6e',
  'brand-4': '#e81212',
  'brand-5': '#313e46',
}

RGB Array

[253, 211, 189], [248, 193, 136], [246, 143, 110], [232, 18, 18], [49, 62, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDD3BD, #F8C188, #F68F6E, #E81212, #313E46 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: #fdd3bd; --color-2: #f8c188; --color-3: #f68f6e; --color-4: #e81212; --color-5: #313e46. 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