#F4D3B8 + #E9B8A6 + #CD959D + #9F7C96 + #765B87 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4D3B8

Apricot · Wheat · Peach Orange

HEX

#F4D3B8

RGB

rgb(244, 211, 184)

HSL

hsl(27, 73%, 84%)

HSB

hsb(27, 25%, 96%)

CMYK

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

Oklch

oklch(88.8% 0.052 61.4)

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

#E9B8A6

Apricot · BurlyWood · Peach Orange

HEX

#E9B8A6

RGB

rgb(233, 184, 166)

HSL

hsl(16, 60%, 78%)

HSB

hsb(16, 29%, 91%)

CMYK

cmyk(0%, 21%, 29%, 9%)

Oklch

oklch(82.2% 0.062 41.1)

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

#CD959D

Peach Pink · Tan · Coral Red

HEX

#CD959D

RGB

rgb(205, 149, 157)

HSL

hsl(351, 36%, 69%)

HSB

hsb(351, 27%, 80%)

CMYK

cmyk(0%, 27%, 23%, 20%)

Oklch

oklch(72.6% 0.068 9.4)

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

#9F7C96

Rose Purple · Gray · Violet

HEX

#9F7C96

RGB

rgb(159, 124, 150)

HSL

hsl(315, 15%, 55%)

HSB

hsb(315, 22%, 62%)

CMYK

cmyk(0%, 22%, 6%, 38%)

Oklch

oklch(62.8% 0.057 335.6)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#765B87

Dark Plum · DimGray · Violet

HEX

#765B87

RGB

rgb(118, 91, 135)

HSL

hsl(277, 19%, 44%)

HSB

hsb(277, 33%, 53%)

CMYK

cmyk(13%, 33%, 0%, 47%)

Oklch

oklch(51.5% 0.075 311.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4D3B8

B8D9F4

Analogous

F4B8BB

F4D3B8

F4F1B8

Triadic

F4D3B8

B8F4D3

D3B8F4

Split-Comp.

F4D3B8

B8F4F1

B8BBF4

Tetradic

F4D3B8

BBF4B8

B8D9F4

F1B8F4

Contrast Matrix WCAG 2.1 Contrast

F4D3B8	E9B8A6	CD959D	9F7C96	765B87
—	1.3 Fail	1.8 Fail	2.6 Fail	4.1 AA Large
1.3 Fail	—	1.4 Fail	2.0 Fail	3.3 AA Large
1.8 Fail	1.4 Fail	—	1.4 Fail	2.3 Fail
2.6 Fail	2.0 Fail	1.4 Fail	—	1.6 Fail
4.1 AA Large	3.3 AA Large	2.3 Fail	1.6 Fail	—

White BG

1.4Fail

1.8Fail

2.5Fail

3.6AA Large

5.8AA

Black BG

14.9AAA

11.9AAA

8.4AAA

5.8AA

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E5BF

D4D3AA

B5B49B

909090

6A6A7C

Deuteranopia

E8EAC0

D7DAAB

B8BC9B

92958E

6C6E7A

Tritanopia

F2C4C5

E7AEAF

CA9A99

9D8B8A

757472

Achromatopsia

DADADA

C5C5C5

A7A7A7

898989

686868

Shades & Tints Shades & Tints

#F4D3B8

Dark

Light

#E9B8A6

Dark

Light

#CD959D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4d3b8;
  --color-2: #e9b8a6;
  --color-3: #cd959d;
  --color-4: #9f7c96;
  --color-5: #765b87;
}

SCSS

$color-1: #f4d3b8;
$color-2: #e9b8a6;
$color-3: #cd959d;
$color-4: #9f7c96;
$color-5: #765b87;

TAILWIND

colors: {
  'brand-1': '#f4d3b8',
  'brand-2': '#e9b8a6',
  'brand-3': '#cd959d',
  'brand-4': '#9f7c96',
  'brand-5': '#765b87',
}

RGB Array

[244, 211, 184], [233, 184, 166], [205, 149, 157], [159, 124, 150], [118, 91, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4D3B8, #E9B8A6, #CD959D, #9F7C96, #765B87 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: #f4d3b8; --color-2: #e9b8a6; --color-3: #cd959d; --color-4: #9f7c96; --color-5: #765b87. 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