#DFDAC6 + #E4BAA1 + #F98E9E + #C8819F + #785E7B · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFDAC6

Goose Yellow · LightGray · Lemon Cream

HEX

#DFDAC6

RGB

rgb(223, 218, 198)

HSL

hsl(48, 28%, 83%)

HSB

hsb(48, 11%, 87%)

CMYK

cmyk(0%, 2%, 11%, 13%)

Oklch

oklch(88.7% 0.027 95.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E4BAA1

Apricot · BurlyWood · Peach Orange

HEX

#E4BAA1

RGB

rgb(228, 186, 161)

HSL

hsl(22, 55%, 76%)

HSB

hsb(22, 29%, 89%)

CMYK

cmyk(0%, 18%, 29%, 11%)

Oklch

oklch(82.0% 0.059 52.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F98E9E

Peach Pink · LightCoral · Coral Red

HEX

#F98E9E

RGB

rgb(249, 142, 158)

HSL

hsl(351, 90%, 77%)

HSB

hsb(351, 43%, 98%)

CMYK

cmyk(0%, 43%, 37%, 2%)

Oklch

oklch(76.5% 0.130 11.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#C8819F

Rouge · LightCoral · Rose Pink

HEX

#C8819F

RGB

rgb(200, 129, 159)

HSL

hsl(335, 39%, 65%)

HSB

hsb(335, 36%, 78%)

CMYK

cmyk(0%, 36%, 21%, 22%)

Oklch

oklch(68.5% 0.095 353.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#785E7B

Dark Plum · DimGray · Violet

HEX

#785E7B

RGB

rgb(120, 94, 123)

HSL

hsl(294, 13%, 43%)

HSB

hsb(294, 24%, 48%)

CMYK

cmyk(2%, 24%, 0%, 52%)

Oklch

oklch(51.8% 0.055 322.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFDAC6

C8CCE0

Analogous

E0CFC8

DFDAC6

D9E0C8

Triadic

DFDAC6

C8E0DB

DBC8E0

Split-Comp.

DFDAC6

C8D9E0

CFC8E0

Tetradic

DFDAC6

C8E0CF

C8CCE0

E0C8D9

Contrast Matrix WCAG 2.1 Contrast

DFDAC6	E4BAA1	F98E9E	C8819F	785E7B
—	1.3 Fail	1.6 Fail	2.1 Fail	4.1 AA Large
1.3 Fail	—	1.3 Fail	1.7 Fail	3.2 AA Large
1.6 Fail	1.3 Fail	—	1.3 Fail	2.5 Fail
2.1 Fail	1.7 Fail	1.3 Fail	—	1.9 Fail
4.1 AA Large	3.2 AA Large	2.5 Fail	1.9 Fail	—

White BG

1.4Fail

1.8Fail

2.2Fail

3.0Fail

5.7AA

Black BG

15.0AAA

11.8AAA

9.4AAA

7.1AAA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDCB

D2D1A7

CBCA9A

A9A998

6D6D74

Deuteranopia

DDDECC

D4D7A9

D1D999

ADB396

6E7072

Tritanopia

DFCFD0

E2ACAD

F49796

C49291

776E6D

Achromatopsia

D9D9D9

C4C4C4

B0B0B0

9A9A9A

696969

Shades & Tints Shades & Tints

#DFDAC6

Dark

Light

#E4BAA1

Dark

Light

#F98E9E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfdac6;
  --color-2: #e4baa1;
  --color-3: #f98e9e;
  --color-4: #c8819f;
  --color-5: #785e7b;
}

SCSS

$color-1: #dfdac6;
$color-2: #e4baa1;
$color-3: #f98e9e;
$color-4: #c8819f;
$color-5: #785e7b;

TAILWIND

colors: {
  'brand-1': '#dfdac6',
  'brand-2': '#e4baa1',
  'brand-3': '#f98e9e',
  'brand-4': '#c8819f',
  'brand-5': '#785e7b',
}

RGB Array

[223, 218, 198], [228, 186, 161], [249, 142, 158], [200, 129, 159], [120, 94, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #DFDAC6, #E4BAA1, #F98E9E, #C8819F, #785E7B is ideal for: health products, baby brands, fresh-style blogs. 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: #dfdac6; --color-2: #e4baa1; --color-3: #f98e9e; --color-4: #c8819f; --color-5: #785e7b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 earth-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