← Back to Editor

#DFE0DA · #745F70 · #92818B · #A0AF84 · #687559

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

#DFE0DA

Willow Green · LightGray · Cloud White

HEX
#DFE0DA
RGB
rgb(223, 224, 218)
HSL
hsl(70, 9%, 87%)
HSB
hsb(70, 3%, 88%)
CMYK
cmyk(0%, 0%, 3%, 12%)
Oklch
oklch(90.4% 0.008 114.2)

Traditional「Willow Green」· Paint「Cloud White」· Creative Silver Lining

#745F70

Rose Purple · DimGray · Violet

HEX
#745F70
RGB
rgb(116, 95, 112)
HSL
hsl(311, 10%, 41%)
HSB
hsb(311, 18%, 45%)
CMYK
cmyk(0%, 18%, 3%, 55%)
Oklch
oklch(51.2% 0.037 332.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#92818B

Ash · Gray · Warm Gray

HEX
#92818B
RGB
rgb(146, 129, 139)
HSL
hsl(325, 7%, 54%)
HSB
hsb(325, 12%, 57%)
CMYK
cmyk(0%, 12%, 5%, 43%)
Oklch
oklch(62.2% 0.025 341.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#A0AF84

Grass Green · DarkSeaGreen · Olive Green

HEX
#A0AF84
RGB
rgb(160, 175, 132)
HSL
hsl(81, 21%, 60%)
HSB
hsb(81, 25%, 69%)
CMYK
cmyk(9%, 0%, 25%, 31%)
Oklch
oklch(73.1% 0.062 123.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#687559

Grass Green · DimGray · Forest Green

HEX
#687559
RGB
rgb(104, 117, 89)
HSL
hsl(88, 14%, 40%)
HSB
hsb(88, 24%, 46%)
CMYK
cmyk(11%, 0%, 24%, 54%)
Oklch
oklch(54.4% 0.045 128.1)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE0DA
DCDBE1

Analogous

E1DFDB
DFE0DA
DDE1DB

Triadic

DFE0DA
DBE0E1
E1DBE0

Split-Comp.

DFE0DA
DBDDE1
DFDBE1

Tetradic

DFE0DA
DBE1DF
DCDBE1
E1DBDD

Contrast Matrix WCAG 2.1 Contrast

DFE0DA
745F70
92818B
A0AF84
687559
—
4.4
AA Large
2.8
Fail
1.8
Fail
3.7
AA Large
4.4
AA Large
—
1.6
Fail
2.5
Fail
1.2
Fail
2.8
Fail
1.6
Fail
—
1.6
Fail
1.3
Fail
1.8
Fail
2.5
Fail
1.6
Fail
—
2.1
Fail
3.7
AA Large
1.2
Fail
1.3
Fail
2.1
Fail
—
White BG
1.3Fail
5.8AA
3.7AA Large
2.3Fail
4.9AA
Black BG
15.8AAA
3.6AA Large
5.7AA
9.0AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFDB
6B6B6C
8B8A89
A6A78E
6E6E60

Deuteranopia

DFDFDC
6C6E6B
8C8D88
A6A591
6D6C61

Tritanopia

DFDDDD
736968
918786
A19798
696566

Achromatopsia

DFDFDF
676767
878787
A6A6A6
6E6E6E

Shades & Tints Shades & Tints

#DFE0DA

Dark
Light

#745F70

Dark
Light

#92818B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe0da;
  --color-2: #745f70;
  --color-3: #92818b;
  --color-4: #a0af84;
  --color-5: #687559;
}

SCSS

$color-1: #dfe0da;
$color-2: #745f70;
$color-3: #92818b;
$color-4: #a0af84;
$color-5: #687559;

TAILWIND

colors: {
  'brand-1': '#dfe0da',
  'brand-2': '#745f70',
  'brand-3': '#92818b',
  'brand-4': '#a0af84',
  'brand-5': '#687559',
}

RGB Array

[223, 224, 218], [116, 95, 112], [146, 129, 139], [160, 175, 132], [104, 117, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFE0DA, #745F70, #92818B, #A0AF84, #687559 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfe0da; --color-2: #745f70; --color-3: #92818b; --color-4: #a0af84; --color-5: #687559. 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. Restrained colors convey professionalism and trust. 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