#DDD6CC + #D7B6A3 + #ED5355 + #E7364A + #DACBC8 · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDD6CC

Goose Yellow · LightGray · Peach Orange

HEX

#DDD6CC

RGB

rgb(221, 214, 204)

HSL

hsl(35, 20%, 83%)

HSB

hsb(35, 8%, 87%)

CMYK

cmyk(0%, 3%, 8%, 13%)

Oklch

oklch(87.9% 0.016 77.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D7B6A3

Apricot · Tan · Warm Sun

HEX

#D7B6A3

RGB

rgb(215, 182, 163)

HSL

hsl(22, 39%, 74%)

HSB

hsb(22, 24%, 84%)

CMYK

cmyk(0%, 15%, 24%, 16%)

Oklch

oklch(80.0% 0.046 51.7)

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

#ED5355

Peach Pink · Tomato · Coral Red

HEX

#ED5355

RGB

rgb(237, 83, 85)

HSL

hsl(359, 81%, 63%)

HSB

hsb(359, 65%, 93%)

CMYK

cmyk(0%, 65%, 64%, 7%)

Oklch

oklch(65.2% 0.190 23.4)

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

#E7364A

Vermilion · Crimson · Passion Red

HEX

#E7364A

RGB

rgb(231, 54, 74)

HSL

hsl(353, 79%, 56%)

HSB

hsb(353, 77%, 91%)

CMYK

cmyk(0%, 77%, 68%, 9%)

Oklch

oklch(61.2% 0.211 20.5)

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

#DACBC8

Peach Pink · LightGray · Cherry Blossom

HEX

#DACBC8

RGB

rgb(218, 203, 200)

HSL

hsl(10, 20%, 82%)

HSB

hsb(10, 8%, 85%)

CMYK

cmyk(0%, 7%, 8%, 15%)

Oklch

oklch(85.4% 0.017 31.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDD6CC

CBD2DC

Analogous

DCCCCB

DDD6CC

DBDCCB

Triadic

DDD6CC

CBDCD5

D5CBDC

Split-Comp.

DDD6CC

CBDBDC

CCCBDC

Tetradic

DDD6CC

CBDCCC

CBD2DC

DCCBDB

Contrast Matrix WCAG 2.1 Contrast

DDD6CC	D7B6A3	ED5355	E7364A	DACBC8
—	1.3 Fail	2.4 Fail	2.9 Fail	1.1 Fail
1.3 Fail	—	1.9 Fail	2.2 Fail	1.2 Fail
2.4 Fail	1.9 Fail	—	1.2 Fail	2.2 Fail
2.9 Fail	2.2 Fail	1.2 Fail	—	2.7 Fail
1.1 Fail	1.2 Fail	2.2 Fail	2.7 Fail	—

White BG

1.4Fail

1.9Fail

3.5AA Large

4.2AA Large

1.6Fail

Black BG

14.6AAA

11.1AAA

6.0AA

5.0AA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADACE

C9C8A8

AAA955

9A9945

D4D3C9

Deuteranopia

DADBCF

CBCDA9

B3BF54

A5B244

D4D6C9

Tritanopia

DDD0D1

D5ABAC

E55454

DE4141

D9C9C9

Achromatopsia

D7D7D7

BEBEBE

818181

6D6D6D

CFCFCF

Shades & Tints Shades & Tints

#DDD6CC

Dark

Light

#D7B6A3

Dark

Light

#ED5355

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddd6cc;
  --color-2: #d7b6a3;
  --color-3: #ed5355;
  --color-4: #e7364a;
  --color-5: #dacbc8;
}

SCSS

$color-1: #ddd6cc;
$color-2: #d7b6a3;
$color-3: #ed5355;
$color-4: #e7364a;
$color-5: #dacbc8;

TAILWIND

colors: {
  'brand-1': '#ddd6cc',
  'brand-2': '#d7b6a3',
  'brand-3': '#ed5355',
  'brand-4': '#e7364a',
  'brand-5': '#dacbc8',
}

RGB Array

[221, 214, 204], [215, 182, 163], [237, 83, 85], [231, 54, 74], [218, 203, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #DDD6CC, #D7B6A3, #ED5355, #E7364A, #DACBC8 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: #ddd6cc; --color-2: #d7b6a3; --color-3: #ed5355; --color-4: #e7364a; --color-5: #dacbc8. 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 bright-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