← Back to Editor

#F2DFC9 · #E6D0B8 · #C19F77 · #ED1A4B · #3A2C23

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

#F2DFC9

Goose Yellow · Bisque · Peach Orange

HEX
#F2DFC9
RGB
rgb(242, 223, 201)
HSL
hsl(32, 61%, 87%)
HSB
hsb(32, 17%, 95%)
CMYK
cmyk(0%, 8%, 17%, 5%)
Oklch
oklch(91.3% 0.036 71.4)

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

#E6D0B8

Goose Yellow · Wheat · Peach Orange

HEX
#E6D0B8
RGB
rgb(230, 208, 184)
HSL
hsl(31, 48%, 81%)
HSB
hsb(31, 20%, 90%)
CMYK
cmyk(0%, 10%, 20%, 10%)
Oklch
oklch(86.9% 0.041 69.7)

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

#C19F77

Ginger · Tan · Warm Sun

HEX
#C19F77
RGB
rgb(193, 159, 119)
HSL
hsl(32, 37%, 61%)
HSB
hsb(32, 38%, 76%)
CMYK
cmyk(0%, 18%, 38%, 24%)
Oklch
oklch(72.4% 0.068 71.0)

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

#ED1A4B

Vermilion · Crimson · Passion Red

HEX
#ED1A4B
RGB
rgb(237, 26, 75)
HSL
hsl(346, 85%, 52%)
HSB
hsb(346, 89%, 93%)
CMYK
cmyk(0%, 89%, 68%, 7%)
Oklch
oklch(60.7% 0.233 17.6)

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

#3A2C23

Tangerine · DarkSlateGray · Cinnamon

HEX
#3A2C23
RGB
rgb(58, 44, 35)
HSL
hsl(23, 25%, 18%)
HSB
hsb(23, 40%, 23%)
CMYK
cmyk(0%, 24%, 40%, 77%)
Oklch
oklch(30.6% 0.026 54.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DFC9
CADDF2

Analogous

F2CBCA
F2DFC9
F1F2CA

Triadic

F2DFC9
CAF2DF
DFCAF2

Split-Comp.

F2DFC9
CAF1F2
CBCAF2

Tetradic

F2DFC9
CAF2CB
CADDF2
F2CAF1

Contrast Matrix WCAG 2.1 Contrast

F2DFC9
E6D0B8
C19F77
ED1A4B
3A2C23
—
1.1
Fail
1.9
Fail
3.3
AA Large
10.3
AAA
1.1
Fail
—
1.7
Fail
2.9
Fail
9.0
AAA
1.9
Fail
1.7
Fail
—
1.8
Fail
5.4
AA
3.3
AA Large
2.9
Fail
1.8
Fail
—
3.1
AA Large
10.3
AAA
9.0
AAA
5.4
AA
3.1
AA Large
—
White BG
1.3Fail
1.5Fail
2.5Fail
4.3AA Large
13.4AAA
Black BG
16.2AAA
14.1AAA
8.5AAA
4.9AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEACE
DCDCBE
B2B281
92903F
343425

Deuteranopia

EBECD0
DEDFBF
B4B783
9EAE3C
353626

Tritanopia

F1D3D3
E5C2C3
BF888A
E23634
392727

Achromatopsia

E2E2E2
D4D4D4
A5A5A5
5F5F5F
2F2F2F

Shades & Tints Shades & Tints

#F2DFC9

Dark
Light

#E6D0B8

Dark
Light

#C19F77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2dfc9;
  --color-2: #e6d0b8;
  --color-3: #c19f77;
  --color-4: #ed1a4b;
  --color-5: #3a2c23;
}

SCSS

$color-1: #f2dfc9;
$color-2: #e6d0b8;
$color-3: #c19f77;
$color-4: #ed1a4b;
$color-5: #3a2c23;

TAILWIND

colors: {
  'brand-1': '#f2dfc9',
  'brand-2': '#e6d0b8',
  'brand-3': '#c19f77',
  'brand-4': '#ed1a4b',
  'brand-5': '#3a2c23',
}

RGB Array

[242, 223, 201], [230, 208, 184], [193, 159, 119], [237, 26, 75], [58, 44, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DFC9, #E6D0B8, #C19F77, #ED1A4B, #3A2C23 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: #f2dfc9; --color-2: #e6d0b8; --color-3: #c19f77; --color-4: #ed1a4b; --color-5: #3a2c23. 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