#D3DBCA + #DCCD9B + #F2B474 + #EA907E + #7B6978 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3DBCA

Willow Green · LightGray · Mint Green

HEX

#D3DBCA

RGB

rgb(211, 219, 202)

HSL

hsl(88, 19%, 83%)

HSB

hsb(88, 8%, 86%)

CMYK

cmyk(4%, 0%, 8%, 14%)

Oklch

oklch(88.1% 0.024 127.6)

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

#DCCD9B

Goose Yellow · BurlyWood · Sunflower

HEX

#DCCD9B

RGB

rgb(220, 205, 155)

HSL

hsl(46, 48%, 74%)

HSB

hsb(46, 30%, 86%)

CMYK

cmyk(0%, 7%, 30%, 14%)

Oklch

oklch(84.8% 0.068 93.4)

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

#F2B474

Ginger · LightSalmon · Warm Sun

HEX

#F2B474

RGB

rgb(242, 180, 116)

HSL

hsl(30, 83%, 70%)

HSB

hsb(30, 52%, 95%)

CMYK

cmyk(0%, 26%, 52%, 5%)

Oklch

oklch(81.4% 0.108 66.2)

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

#EA907E

Peach Pink · DarkSalmon · Coral Red

HEX

#EA907E

RGB

rgb(234, 144, 126)

HSL

hsl(10, 72%, 71%)

HSB

hsb(10, 46%, 92%)

CMYK

cmyk(0%, 38%, 46%, 8%)

Oklch

oklch(74.2% 0.113 32.1)

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

#7B6978

Rose Purple · DimGray · Warm Gray

HEX

#7B6978

RGB

rgb(123, 105, 120)

HSL

hsl(310, 8%, 45%)

HSB

hsb(310, 15%, 48%)

CMYK

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

Oklch

oklch(54.3% 0.032 331.6)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3DBCA

D3CBDC

Analogous

DCDBCB

D3DBCA

CCDCCB

Triadic

D3DBCA

CBD4DC

DCCBD4

Split-Comp.

D3DBCA

CBCCDC

DBCBDC

Tetradic

D3DBCA

CBDCDB

D3CBDC

DCCBCC

Contrast Matrix WCAG 2.1 Contrast

D3DBCA	DCCD9B	F2B474	EA907E	7B6978
—	1.1 Fail	1.3 Fail	1.7 Fail	3.6 AA Large
1.1 Fail	—	1.1 Fail	1.5 Fail	3.2 AA Large
1.3 Fail	1.1 Fail	—	1.3 Fail	2.8 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	2.1 Fail
3.6 AA Large	3.2 AA Large	2.8 Fail	2.1 Fail	—

White BG

1.4Fail

1.6Fail

1.8Fail

2.4Fail

5.1AA

Black BG

14.8AAA

13.2AAA

11.6AAA

8.8AAA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D7CE

D6D5A7

D7D783

C3C282

737374

Deuteranopia

D6D5CF

D6D8AA

DBDF87

C8CF83

747674

Tritanopia

D3D1D2

DBB1B3

EF9092

E58687

7A7271

Achromatopsia

D7D7D7

CCCCCC

BFBFBF

A9A9A9

707070

Shades & Tints Shades & Tints

#D3DBCA

Dark

Light

#DCCD9B

Dark

Light

#F2B474

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3dbca;
  --color-2: #dccd9b;
  --color-3: #f2b474;
  --color-4: #ea907e;
  --color-5: #7b6978;
}

SCSS

$color-1: #d3dbca;
$color-2: #dccd9b;
$color-3: #f2b474;
$color-4: #ea907e;
$color-5: #7b6978;

TAILWIND

colors: {
  'brand-1': '#d3dbca',
  'brand-2': '#dccd9b',
  'brand-3': '#f2b474',
  'brand-4': '#ea907e',
  'brand-5': '#7b6978',
}

RGB Array

[211, 219, 202], [220, 205, 155], [242, 180, 116], [234, 144, 126], [123, 105, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3DBCA, #DCCD9B, #F2B474, #EA907E, #7B6978 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: #d3dbca; --color-2: #dccd9b; --color-3: #f2b474; --color-4: #ea907e; --color-5: #7b6978. 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 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