← Back to Editor

#E3D8B8 · #E6BD43 · #F20A7A · #B81F69 · #314763

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

#E3D8B8

Goose Yellow · Wheat · Lemon Cream

HEX
#E3D8B8
RGB
rgb(227, 216, 184)
HSL
hsl(45, 43%, 81%)
HSB
hsb(45, 19%, 89%)
CMYK
cmyk(0%, 5%, 19%, 11%)
Oklch
oklch(88.3% 0.044 91.3)

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

#E6BD43

Ginger · SandyBrown · Sunflower

HEX
#E6BD43
RGB
rgb(230, 189, 67)
HSL
hsl(45, 77%, 58%)
HSB
hsb(45, 71%, 90%)
CMYK
cmyk(0%, 18%, 71%, 10%)
Oklch
oklch(81.3% 0.143 89.8)

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

#F20A7A

Dark Violet · DeepPink · Camellia

HEX
#F20A7A
RGB
rgb(242, 10, 122)
HSL
hsl(331, 92%, 49%)
HSB
hsb(331, 96%, 95%)
CMYK
cmyk(0%, 96%, 50%, 5%)
Oklch
oklch(62.2% 0.248 2.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#B81F69

Dark Violet · MediumVioletRed · Camellia

HEX
#B81F69
RGB
rgb(184, 31, 105)
HSL
hsl(331, 71%, 42%)
HSB
hsb(331, 83%, 72%)
CMYK
cmyk(0%, 83%, 43%, 28%)
Oklch
oklch(52.1% 0.193 357.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#314763

Indigo · DarkSlateGray · Prussian Blue

HEX
#314763
RGB
rgb(49, 71, 99)
HSL
hsl(214, 34%, 29%)
HSB
hsb(214, 51%, 39%)
CMYK
cmyk(51%, 28%, 0%, 61%)
Oklch
oklch(39.3% 0.055 254.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3D8B8
BAC4E3

Analogous

E3C4BA
E3D8B8
D9E3BA

Triadic

E3D8B8
BAE3D9
D9BAE3

Split-Comp.

E3D8B8
BAD9E3
C4BAE3

Tetradic

E3D8B8
BAE3C4
BAC4E3
E3BAD9

Contrast Matrix WCAG 2.1 Contrast

E3D8B8
E6BD43
F20A7A
B81F69
314763
—
1.3
Fail
2.9
Fail
4.3
AA Large
6.7
AA
1.3
Fail
—
2.3
Fail
3.4
AA Large
5.3
AA
2.9
Fail
2.3
Fail
—
1.5
Fail
2.3
Fail
4.3
AA Large
3.4
AA Large
1.5
Fail
—
1.6
Fail
6.7
AA
5.3
AA
2.3
Fail
1.6
Fail
—
White BG
1.4Fail
1.8Fail
4.1AA Large
6.1AA
9.5AAA
Black BG
14.8AAA
11.7AAA
5.1AA
3.4AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEC0
D4D461
8E8B5F
767457
3B3B5C

Deuteranopia

DFE0C2
D7DA68
9BAC58
7F8A53
39385B

Tritanopia

E2C6C7
E4787D
E64A45
B04946
325756

Achromatopsia

D8D8D8
BBBBBB
5C5C5C
555555
444444

Shades & Tints Shades & Tints

#E3D8B8

Dark
Light

#E6BD43

Dark
Light

#F20A7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3d8b8;
  --color-2: #e6bd43;
  --color-3: #f20a7a;
  --color-4: #b81f69;
  --color-5: #314763;
}

SCSS

$color-1: #e3d8b8;
$color-2: #e6bd43;
$color-3: #f20a7a;
$color-4: #b81f69;
$color-5: #314763;

TAILWIND

colors: {
  'brand-1': '#e3d8b8',
  'brand-2': '#e6bd43',
  'brand-3': '#f20a7a',
  'brand-4': '#b81f69',
  'brand-5': '#314763',
}

RGB Array

[227, 216, 184], [230, 189, 67], [242, 10, 122], [184, 31, 105], [49, 71, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3D8B8, #E6BD43, #F20A7A, #B81F69, #314763 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: #e3d8b8; --color-2: #e6bd43; --color-3: #f20a7a; --color-4: #b81f69; --color-5: #314763. 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