#D8578D + #B48897 + #C0BEAF + #889D96 + #388E8B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D8578D

Dark Violet · LightCoral · Rose Pink

HEX

#D8578D

RGB

rgb(216, 87, 141)

HSL

hsl(335, 62%, 59%)

HSB

hsb(335, 60%, 85%)

CMYK

cmyk(0%, 60%, 35%, 15%)

Oklch

oklch(63.8% 0.170 357.0)

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

#B48897

Rouge · DarkGray · Rose Pink

HEX

#B48897

RGB

rgb(180, 136, 151)

HSL

hsl(340, 23%, 62%)

HSB

hsb(340, 24%, 71%)

CMYK

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

Oklch

oklch(67.3% 0.057 356.5)

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

#C0BEAF

Fresh Green · Silver · Sunflower

HEX

#C0BEAF

RGB

rgb(192, 190, 175)

HSL

hsl(53, 12%, 72%)

HSB

hsb(53, 9%, 75%)

CMYK

cmyk(0%, 1%, 9%, 25%)

Oklch

oklch(79.9% 0.021 100.7)

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

#889D96

Mineral Blue · LightSlateGray · Lake Green

HEX

#889D96

RGB

rgb(136, 157, 150)

HSL

hsl(160, 10%, 57%)

HSB

hsb(160, 13%, 62%)

CMYK

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

Oklch

oklch(67.7% 0.026 173.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#388E8B

Mineral Blue · SteelBlue · Mint Ice

HEX

#388E8B

RGB

rgb(56, 142, 139)

HSL

hsl(178, 43%, 39%)

HSB

hsb(178, 61%, 56%)

CMYK

cmyk(61%, 0%, 2%, 44%)

Oklch

oklch(59.4% 0.082 192.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8578D

56D7A1

Analogous

D756CC

D8578D

D76056

Triadic

D8578D

8CD756

568CD7

Split-Comp.

D8578D

56D760

56CCD7

Tetradic

D8578D

CCD756

56D7A1

6056D7

Contrast Matrix WCAG 2.1 Contrast

D8578D	B48897	C0BEAF	889D96	388E8B
—	1.2 Fail	2.0 Fail	1.3 Fail	1.0 Fail
1.2 Fail	—	1.6 Fail	1.1 Fail	1.3 Fail
2.0 Fail	1.6 Fail	—	1.5 Fail	2.1 Fail
1.3 Fail	1.1 Fail	1.5 Fail	—	1.4 Fail
1.0 Fail	1.3 Fail	2.1 Fail	1.4 Fail	—

White BG

3.7AA Large

3.0AA Large

1.9Fail

2.9Fail

3.9AA Large

Black BG

5.7AA

6.9AA

11.2AAA

7.3AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F80

A1A193

BFBFB3

919198

5D5E8C

Deuteranopia

A8B17D

A4A793

BFBFB4

908E98

58528C

Tritanopia

D27673

B29190

C0B5B6

899999

3C8C8C

Achromatopsia

848484

979797

BDBDBD

969696

747474

Shades & Tints Shades & Tints

#D8578D

Dark

Light

#B48897

Dark

Light

#C0BEAF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8578d;
  --color-2: #b48897;
  --color-3: #c0beaf;
  --color-4: #889d96;
  --color-5: #388e8b;
}

SCSS

$color-1: #d8578d;
$color-2: #b48897;
$color-3: #c0beaf;
$color-4: #889d96;
$color-5: #388e8b;

TAILWIND

colors: {
  'brand-1': '#d8578d',
  'brand-2': '#b48897',
  'brand-3': '#c0beaf',
  'brand-4': '#889d96',
  'brand-5': '#388e8b',
}

RGB Array

[216, 87, 141], [180, 136, 151], [192, 190, 175], [136, 157, 150], [56, 142, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8578D, #B48897, #C0BEAF, #889D96, #388E8B is ideal for: corporate websites, product showcases, portfolios. 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: #d8578d; --color-2: #b48897; --color-3: #c0beaf; --color-4: #889d96; --color-5: #388e8b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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