← Back to Editor

#F0F4DC · #D3D79C · #E38D7C · #B86268 · #78475C

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

#F0F4DC

Willow Green · Beige · Mint Green

HEX
#F0F4DC
RGB
rgb(240, 244, 220)
HSL
hsl(70, 52%, 91%)
HSB
hsb(70, 10%, 96%)
CMYK
cmyk(2%, 0%, 10%, 4%)
Oklch
oklch(95.8% 0.032 114.7)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#D3D79C

Fresh Green · Khaki · Sunflower

HEX
#D3D79C
RGB
rgb(211, 215, 156)
HSL
hsl(64, 42%, 73%)
HSB
hsb(64, 27%, 84%)
CMYK
cmyk(2%, 0%, 27%, 16%)
Oklch
oklch(86.2% 0.077 111.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E38D7C

Peach Pink · DarkSalmon · Coral Red

HEX
#E38D7C
RGB
rgb(227, 141, 124)
HSL
hsl(10, 65%, 69%)
HSB
hsb(10, 45%, 89%)
CMYK
cmyk(0%, 38%, 45%, 11%)
Oklch
oklch(72.9% 0.109 31.9)

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

#B86268

Crimson · Sienna · Passion Red

HEX
#B86268
RGB
rgb(184, 98, 104)
HSL
hsl(356, 38%, 55%)
HSB
hsb(356, 47%, 72%)
CMYK
cmyk(0%, 47%, 43%, 28%)
Oklch
oklch(59.8% 0.111 16.6)

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

#78475C

Dark Violet · DimGray · Camellia

HEX
#78475C
RGB
rgb(120, 71, 92)
HSL
hsl(334, 26%, 37%)
HSB
hsb(334, 41%, 47%)
CMYK
cmyk(0%, 41%, 23%, 53%)
Oklch
oklch(46.2% 0.073 353.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F4DC
E0DCF4

Analogous

F4ECDC
F0F4DC
E4F4DC

Triadic

F0F4DC
DCF0F4
F4DCF0

Split-Comp.

F0F4DC
DCE4F4
ECDCF4

Tetradic

F0F4DC
DCF4EC
E0DCF4
F4DCE4

Contrast Matrix WCAG 2.1 Contrast

F0F4DC
D3D79C
E38D7C
B86268
78475C
—
1.3
Fail
2.2
Fail
3.7
AA Large
6.5
AA
1.3
Fail
—
1.7
Fail
2.8
Fail
4.9
AA
2.2
Fail
1.7
Fail
—
1.7
Fail
2.9
Fail
3.7
AA Large
2.8
Fail
1.7
Fail
—
1.7
Fail
6.5
AA
4.9
AA
2.9
Fail
1.7
Fail
—
White BG
1.1Fail
1.5Fail
2.5Fail
4.2AA Large
7.4AAA
Black BG
18.7AAA
14.0AAA
8.4AAA
5.0AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E2
D5D5AA
BEBD80
939267
636257

Deuteranopia

F2F1E3
D5D4AE
C3C981
989E66
666956

Tritanopia

F0E6E7
D3B6B8
DF8384
B46565
765352

Achromatopsia

F0F0F0
CFCFCF
A5A5A5
7C7C7C
585858

Shades & Tints Shades & Tints

#F0F4DC

Dark
Light

#D3D79C

Dark
Light

#E38D7C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f4dc;
  --color-2: #d3d79c;
  --color-3: #e38d7c;
  --color-4: #b86268;
  --color-5: #78475c;
}

SCSS

$color-1: #f0f4dc;
$color-2: #d3d79c;
$color-3: #e38d7c;
$color-4: #b86268;
$color-5: #78475c;

TAILWIND

colors: {
  'brand-1': '#f0f4dc',
  'brand-2': '#d3d79c',
  'brand-3': '#e38d7c',
  'brand-4': '#b86268',
  'brand-5': '#78475c',
}

RGB Array

[240, 244, 220], [211, 215, 156], [227, 141, 124], [184, 98, 104], [120, 71, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F4DC, #D3D79C, #E38D7C, #B86268, #78475C 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: #f0f4dc; --color-2: #d3d79c; --color-3: #e38d7c; --color-4: #b86268; --color-5: #78475c. 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