← Back to Editor

#F2DCC2 · #E3B988 · #D4816A · #B54371 · #683569

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F2DCC2

Goose Yellow · Bisque · Peach Orange

HEX
#F2DCC2
RGB
rgb(242, 220, 194)
HSL
hsl(33, 65%, 85%)
HSB
hsb(33, 20%, 95%)
CMYK
cmyk(0%, 9%, 20%, 5%)
Oklch
oklch(90.6% 0.042 71.9)

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

#E3B988

Goose Yellow · BurlyWood · Warm Sun

HEX
#E3B988
RGB
rgb(227, 185, 136)
HSL
hsl(32, 62%, 71%)
HSB
hsb(32, 40%, 89%)
CMYK
cmyk(0%, 19%, 40%, 11%)
Oklch
oklch(81.2% 0.080 70.6)

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

#D4816A

Peach Pink · DarkSalmon · Coral Red

HEX
#D4816A
RGB
rgb(212, 129, 106)
HSL
hsl(13, 55%, 62%)
HSB
hsb(13, 50%, 83%)
CMYK
cmyk(0%, 39%, 50%, 17%)
Oklch
oklch(68.6% 0.109 36.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B54371

Dark Violet · MediumVioletRed · Camellia

HEX
#B54371
RGB
rgb(181, 67, 113)
HSL
hsl(336, 46%, 49%)
HSB
hsb(336, 63%, 71%)
CMYK
cmyk(0%, 63%, 38%, 29%)
Oklch
oklch(55.2% 0.154 358.4)

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

#683569

Dark Plum · DarkSlateBlue · Eggplant

HEX
#683569
RGB
rgb(104, 53, 105)
HSL
hsl(299, 33%, 31%)
HSB
hsb(299, 50%, 41%)
CMYK
cmyk(1%, 50%, 0%, 59%)
Oklch
oklch(41.5% 0.103 326.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DCC2
C0D6F2

Analogous

F2C2C0
F2DCC2
EFF2C0

Triadic

F2DCC2
C0F2DB
DBC0F2

Split-Comp.

F2DCC2
C0EFF2
C2C0F2

Tetradic

F2DCC2
C0F2C2
C0D6F2
F2C0EF

Contrast Matrix WCAG 2.1 Contrast

F2DCC2
E3B988
D4816A
B54371
683569
—
1.4
Fail
2.2
Fail
3.9
AA Large
6.9
AA
1.4
Fail
—
1.6
Fail
2.9
Fail
5.0
AA
2.2
Fail
1.6
Fail
—
1.8
Fail
3.1
AA Large
3.9
AA Large
2.9
Fail
1.8
Fail
—
1.7
Fail
6.9
AA
5.0
AA
3.1
AA Large
1.7
Fail
—
White BG
1.3Fail
1.8Fail
2.9Fail
5.2AA
9.1AAA
Black BG
15.8AAA
11.6AAA
7.1AAA
4.0AA Large
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8C8
D1D094
B0AF70
848366
52515C

Deuteranopia

EAEBCA
D3D697
B5BB71
8A9363
555959

Tritanopia

F1CDCE
E19D9F
D07475
AF5D5B
655250

Achromatopsia

E0E0E0
C0C0C0
979797
6A6A6A
4A4A4A

Shades & Tints Shades & Tints

#F2DCC2

Dark
Light

#E3B988

Dark
Light

#D4816A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dcc2;
  --color-2: #e3b988;
  --color-3: #d4816a;
  --color-4: #b54371;
  --color-5: #683569;
}

SCSS

$color-1: #f2dcc2;
$color-2: #e3b988;
$color-3: #d4816a;
$color-4: #b54371;
$color-5: #683569;

TAILWIND

colors: {
  'brand-1': '#f2dcc2',
  'brand-2': '#e3b988',
  'brand-3': '#d4816a',
  'brand-4': '#b54371',
  'brand-5': '#683569',
}

RGB Array

[242, 220, 194], [227, 185, 136], [212, 129, 106], [181, 67, 113], [104, 53, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DCC2, #E3B988, #D4816A, #B54371, #683569 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2dcc2; --color-2: #e3b988; --color-3: #d4816a; --color-4: #b54371; --color-5: #683569. 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 tech, SaaS, healthcare, eco industries. 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