#F08396 + #866A90 + #D6CFBF + #8A8B9F + #EDD2B7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F08396

Peach Pink · LightCoral · Coral Red

HEX

#F08396

RGB

rgb(240, 131, 150)

HSL

hsl(350, 78%, 73%)

HSB

hsb(350, 45%, 94%)

CMYK

cmyk(0%, 45%, 37%, 6%)

Oklch

oklch(73.5% 0.134 9.8)

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

#866A90

Dark Plum · Gray · Violet

HEX

#866A90

RGB

rgb(134, 106, 144)

HSL

hsl(284, 15%, 49%)

HSB

hsb(284, 26%, 56%)

CMYK

cmyk(7%, 26%, 0%, 44%)

Oklch

oklch(56.5% 0.066 317.1)

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

#D6CFBF

Goose Yellow · LightGray · Lemon Cream

HEX

#D6CFBF

RGB

rgb(214, 207, 191)

HSL

hsl(42, 22%, 79%)

HSB

hsb(42, 11%, 84%)

CMYK

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

Oklch

oklch(85.6% 0.023 87.2)

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

#8A8B9F

Azure · LightSlateGray · Navy Blue

HEX

#8A8B9F

RGB

rgb(138, 139, 159)

HSL

hsl(237, 10%, 58%)

HSB

hsb(237, 13%, 62%)

CMYK

cmyk(13%, 13%, 0%, 38%)

Oklch

oklch(64.3% 0.030 283.3)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#EDD2B7

Goose Yellow · Wheat · Peach Orange

HEX

#EDD2B7

RGB

rgb(237, 210, 183)

HSL

hsl(30, 60%, 82%)

HSB

hsb(30, 23%, 93%)

CMYK

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

Oklch

oklch(87.9% 0.047 67.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F08396

84F0DE

Analogous

F084CC

F08396

F0A884

Triadic

F08396

96F084

8496F0

Split-Comp.

F08396

84F0A8

84CCF0

Tetradic

F08396

CCF084

84F0DE

A884F0

Contrast Matrix WCAG 2.1 Contrast

F08396	866A90	D6CFBF	8A8B9F	EDD2B7
—	1.9 Fail	1.6 Fail	1.3 Fail	1.7 Fail
1.9 Fail	—	3.0 AA Large	1.4 Fail	3.2 AA Large
1.6 Fail	3.0 AA Large	—	2.2 Fail	1.1 Fail
1.3 Fail	1.4 Fail	2.2 Fail	—	2.3 Fail
1.7 Fail	3.2 AA Large	1.1 Fail	2.3 Fail	—

White BG

2.5Fail

4.7AA

1.6Fail

3.3AA Large

1.4Fail

Black BG

8.4AAA

4.5AA Large

13.5AAA

6.3AA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C091

7A7A87

D3D3C3

8A8A9A

E1E1BE

Deuteranopia

C7CF90

7C7E85

D3D4C4

8A8A99

E3E5BF

Tritanopia

EB8E8D

85807E

D6C6C7

8A9696

ECC3C4

Achromatopsia

A6A6A6

777777

CFCFCF

8D8D8D

D7D7D7

Shades & Tints Shades & Tints

#F08396

Dark

Light

#866A90

Dark

Light

#D6CFBF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f08396;
  --color-2: #866a90;
  --color-3: #d6cfbf;
  --color-4: #8a8b9f;
  --color-5: #edd2b7;
}

SCSS

$color-1: #f08396;
$color-2: #866a90;
$color-3: #d6cfbf;
$color-4: #8a8b9f;
$color-5: #edd2b7;

TAILWIND

colors: {
  'brand-1': '#f08396',
  'brand-2': '#866a90',
  'brand-3': '#d6cfbf',
  'brand-4': '#8a8b9f',
  'brand-5': '#edd2b7',
}

RGB Array

[240, 131, 150], [134, 106, 144], [214, 207, 191], [138, 139, 159], [237, 210, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F08396, #866A90, #D6CFBF, #8A8B9F, #EDD2B7 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: #f08396; --color-2: #866a90; --color-3: #d6cfbf; --color-4: #8a8b9f; --color-5: #edd2b7. 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