#B17086 + #FC5398 + #FD9C97 + #C1C4AE + #DBD3A4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B17086

Dark Violet · Gray · Rose Pink

HEX

#B17086

RGB

rgb(177, 112, 134)

HSL

hsl(340, 29%, 57%)

HSB

hsb(340, 37%, 69%)

CMYK

cmyk(0%, 37%, 24%, 31%)

Oklch

oklch(62.1% 0.087 358.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FC5398

Rouge · LightCoral · Rose Pink

HEX

#FC5398

RGB

rgb(252, 83, 152)

HSL

hsl(336, 97%, 66%)

HSB

hsb(336, 67%, 99%)

CMYK

cmyk(0%, 67%, 40%, 1%)

Oklch

oklch(69.1% 0.212 359.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FD9C97

Peach Pink · LightSalmon · Coral Red

HEX

#FD9C97

RGB

rgb(253, 156, 151)

HSL

hsl(3, 96%, 79%)

HSB

hsb(3, 40%, 99%)

CMYK

cmyk(0%, 38%, 40%, 1%)

Oklch

oklch(79.0% 0.117 23.2)

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

#C1C4AE

Fresh Green · Silver · Sunflower

HEX

#C1C4AE

RGB

rgb(193, 196, 174)

HSL

hsl(68, 16%, 73%)

HSB

hsb(68, 11%, 77%)

CMYK

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

Oklch

oklch(81.2% 0.030 113.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DBD3A4

Fresh Green · Wheat · Sunflower

HEX

#DBD3A4

RGB

rgb(219, 211, 164)

HSL

hsl(51, 43%, 75%)

HSB

hsb(51, 25%, 86%)

CMYK

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

Oklch

oklch(86.2% 0.063 99.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B17086

72B19C

Analogous

B172A7

B17086

B17C72

Triadic

B17086

87B172

7287B1

Split-Comp.

B17086

72B17C

72A7B1

Tetradic

B17086

A7B172

72B19C

7C72B1

Contrast Matrix WCAG 2.1 Contrast

B17086	FC5398	FD9C97	C1C4AE	DBD3A4
—	1.2 Fail	1.9 Fail	2.1 Fail	2.5 Fail
1.2 Fail	—	1.5 Fail	1.7 Fail	2.0 Fail
1.9 Fail	1.5 Fail	—	1.1 Fail	1.3 Fail
2.1 Fail	1.7 Fail	1.1 Fail	—	1.2 Fail
2.5 Fail	2.0 Fail	1.3 Fail	1.2 Fail	—

White BG

3.8AA Large

3.1AA Large

2.0Fail

1.8Fail

1.5Fail

Black BG

5.5AA

6.8AA

10.4AAA

11.8AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959481

B3B187

D3D298

C2C2B3

D8D7AF

Deuteranopia

999E7F

BDC983

D9E099

C2C2B5

D8D9B2

Tritanopia

AE7C7C

F47A77

F89999

C1B8B8

DBB8BA

Achromatopsia

868686

8D8D8D

B8B8B8

C1C1C1

D0D0D0

Shades & Tints Shades & Tints

#B17086

Dark

Light

#FC5398

Dark

Light

#FD9C97

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b17086;
  --color-2: #fc5398;
  --color-3: #fd9c97;
  --color-4: #c1c4ae;
  --color-5: #dbd3a4;
}

SCSS

$color-1: #b17086;
$color-2: #fc5398;
$color-3: #fd9c97;
$color-4: #c1c4ae;
$color-5: #dbd3a4;

TAILWIND

colors: {
  'brand-1': '#b17086',
  'brand-2': '#fc5398',
  'brand-3': '#fd9c97',
  'brand-4': '#c1c4ae',
  'brand-5': '#dbd3a4',
}

RGB Array

[177, 112, 134], [252, 83, 152], [253, 156, 151], [193, 196, 174], [219, 211, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B17086, #FC5398, #FD9C97, #C1C4AE, #DBD3A4 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: #b17086; --color-2: #fc5398; --color-3: #fd9c97; --color-4: #c1c4ae; --color-5: #dbd3a4. 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