← Back to Editor

#D0DCB3 · #DABD90 · #DF7670 · #F4065E · #837D72

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 Library

Color Details Color Details

#D0DCB3

Willow Green · LightGray · Apple Green

HEX
#D0DCB3
RGB
rgb(208, 220, 179)
HSL
hsl(78, 37%, 78%)
HSB
hsb(78, 19%, 86%)
CMYK
cmyk(5%, 0%, 19%, 14%)
Oklch
oklch(87.5% 0.056 120.8)

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

#DABD90

Goose Yellow · BurlyWood · Warm Sun

HEX
#DABD90
RGB
rgb(218, 189, 144)
HSL
hsl(36, 50%, 71%)
HSB
hsb(36, 34%, 85%)
CMYK
cmyk(0%, 13%, 34%, 15%)
Oklch
oklch(81.2% 0.068 78.5)

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

#DF7670

Peach Pink · LightCoral · Coral Red

HEX
#DF7670
RGB
rgb(223, 118, 112)
HSL
hsl(3, 63%, 66%)
HSB
hsb(3, 50%, 87%)
CMYK
cmyk(0%, 47%, 50%, 13%)
Oklch
oklch(68.3% 0.132 24.5)

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

#F4065E

Dark Violet · Crimson · Camellia

HEX
#F4065E
RGB
rgb(244, 6, 94)
HSL
hsl(338, 95%, 49%)
HSB
hsb(338, 98%, 96%)
CMYK
cmyk(0%, 98%, 61%, 4%)
Oklch
oklch(61.8% 0.245 11.7)

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

#837D72

Ink Gray · Gray · Warm Gray

HEX
#837D72
RGB
rgb(131, 125, 114)
HSL
hsl(39, 7%, 48%)
HSB
hsb(39, 13%, 51%)
CMYK
cmyk(0%, 5%, 13%, 49%)
Oklch
oklch(59.2% 0.018 82.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0DCB3
BFB2DC

Analogous

DCD3B2
D0DCB3
BADCB2

Triadic

D0DCB3
B2CFDC
DCB2CF

Split-Comp.

D0DCB3
B2BADC
D3B2DC

Tetradic

D0DCB3
B2DCD3
BFB2DC
DCB2BA

Contrast Matrix WCAG 2.1 Contrast

D0DCB3
DABD90
DF7670
F4065E
837D72
—
1.2
Fail
2.1
Fail
2.9
Fail
2.8
Fail
1.2
Fail
—
1.7
Fail
2.3
Fail
2.3
Fail
2.1
Fail
1.7
Fail
—
1.4
Fail
1.4
Fail
2.9
Fail
2.3
Fail
1.4
Fail
—
1.0
Fail
2.8
Fail
2.3
Fail
1.4
Fail
1.0
Fail
—
White BG
1.4Fail
1.8Fail
3.0AA Large
4.2AA Large
4.1AA Large
Black BG
14.6AAA
11.7AAA
7.0AA
5.0AA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5BD
CDCD9B
B2B171
8D8B49
808075

Deuteranopia

D5D4BF
CFD19E
B8C072
9BAD44
818175

Tritanopia

D1C5C6
D9A3A5
DA7373
E83834
837777

Achromatopsia

D4D4D4
C1C1C1
959595
575757
7E7E7E

Shades & Tints Shades & Tints

#D0DCB3

Dark
Light

#DABD90

Dark
Light

#DF7670

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0dcb3;
  --color-2: #dabd90;
  --color-3: #df7670;
  --color-4: #f4065e;
  --color-5: #837d72;
}

SCSS

$color-1: #d0dcb3;
$color-2: #dabd90;
$color-3: #df7670;
$color-4: #f4065e;
$color-5: #837d72;

TAILWIND

colors: {
  'brand-1': '#d0dcb3',
  'brand-2': '#dabd90',
  'brand-3': '#df7670',
  'brand-4': '#f4065e',
  'brand-5': '#837d72',
}

RGB Array

[208, 220, 179], [218, 189, 144], [223, 118, 112], [244, 6, 94], [131, 125, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0DCB3, #DABD90, #DF7670, #F4065E, #837D72 is ideal for: corporate websites, product showcases, portfolios. 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: #d0dcb3; --color-2: #dabd90; --color-3: #df7670; --color-4: #f4065e; --color-5: #837d72. 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. 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