#C4A583 + #D7B7B8 + #E1D5D9 + #FFD3D4 + #F8E7DD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4A583

Ginger · Tan · Warm Sun

HEX

#C4A583

RGB

rgb(196, 165, 131)

HSL

hsl(31, 36%, 64%)

HSB

hsb(31, 33%, 77%)

CMYK

cmyk(0%, 16%, 33%, 23%)

Oklch

oklch(74.1% 0.059 69.3)

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

#D7B7B8

Peach Pink · Silver · Coral Red

HEX

#D7B7B8

RGB

rgb(215, 183, 184)

HSL

hsl(358, 29%, 78%)

HSB

hsb(358, 15%, 84%)

CMYK

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

Oklch

oklch(80.7% 0.037 15.8)

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

#E1D5D9

Rouge · LightGray · Cherry Blossom

HEX

#E1D5D9

RGB

rgb(225, 213, 217)

HSL

hsl(340, 17%, 86%)

HSB

hsb(340, 5%, 88%)

CMYK

cmyk(0%, 5%, 4%, 12%)

Oklch

oklch(88.4% 0.014 355.0)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FFD3D4

Peach Pink · Pink · Cherry Blossom

HEX

#FFD3D4

RGB

rgb(255, 211, 212)

HSL

hsl(359, 100%, 91%)

HSB

hsb(359, 17%, 100%)

CMYK

cmyk(0%, 17%, 17%, 0%)

Oklch

oklch(90.5% 0.050 16.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F8E7DD

Apricot · Linen · Peach Orange

HEX

#F8E7DD

RGB

rgb(248, 231, 221)

HSL

hsl(22, 66%, 92%)

HSB

hsb(22, 11%, 97%)

CMYK

cmyk(0%, 7%, 11%, 3%)

Oklch

oklch(93.9% 0.023 52.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4A583

82A2C4

Analogous

C48382

C4A583

C3C482

Triadic

C4A583

82C4A4

A482C4

Split-Comp.

C4A583

82C3C4

8382C4

Tetradic

C4A583

82C483

82A2C4

C482C3

Contrast Matrix WCAG 2.1 Contrast

C4A583	D7B7B8	E1D5D9	FFD3D4	F8E7DD
—	1.3 Fail	1.6 Fail	1.7 Fail	1.9 Fail
1.3 Fail	—	1.3 Fail	1.4 Fail	1.5 Fail
1.6 Fail	1.3 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
1.9 Fail	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

2.3Fail

1.8Fail

1.4Fail

1.2Fail

Black BG

9.1AAA

11.4AAA

14.7AAA

15.5AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B68B

C9C9B8

DCDCD8

ECECD4

F1F0DF

Deuteranopia

B8BB8D

CBCDB8

DDDDD8

EFF2D4

F2F3E0

Tritanopia

C29293

D5B8B8

E0D7D7

FDD4D4

F7E1E2

Achromatopsia

AAAAAA

C1C1C1

D9D9D9

E0E0E0

EBEBEB

Shades & Tints Shades & Tints

#C4A583

Dark

Light

#D7B7B8

Dark

Light

#E1D5D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4a583;
  --color-2: #d7b7b8;
  --color-3: #e1d5d9;
  --color-4: #ffd3d4;
  --color-5: #f8e7dd;
}

SCSS

$color-1: #c4a583;
$color-2: #d7b7b8;
$color-3: #e1d5d9;
$color-4: #ffd3d4;
$color-5: #f8e7dd;

TAILWIND

colors: {
  'brand-1': '#c4a583',
  'brand-2': '#d7b7b8',
  'brand-3': '#e1d5d9',
  'brand-4': '#ffd3d4',
  'brand-5': '#f8e7dd',
}

RGB Array

[196, 165, 131], [215, 183, 184], [225, 213, 217], [255, 211, 212], [248, 231, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4A583, #D7B7B8, #E1D5D9, #FFD3D4, #F8E7DD 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: #c4a583; --color-2: #d7b7b8; --color-3: #e1d5d9; --color-4: #ffd3d4; --color-5: #f8e7dd. 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