#D1978A + #F07896 + #CC8AB9 + #A0A9CF + #8BC1CA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1978A

Peach Pink · DarkSalmon · Coral Red

HEX

#D1978A

RGB

rgb(209, 151, 138)

HSL

hsl(11, 44%, 68%)

HSB

hsb(11, 34%, 82%)

CMYK

cmyk(0%, 28%, 34%, 18%)

Oklch

oklch(72.9% 0.073 33.0)

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

#F07896

Peach Pink · LightCoral · Coral Red

HEX

#F07896

RGB

rgb(240, 120, 150)

HSL

hsl(345, 80%, 71%)

HSB

hsb(345, 50%, 94%)

CMYK

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

Oklch

oklch(71.8% 0.150 5.8)

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

#CC8AB9

Mauve · Orchid · Lilac Purple

HEX

#CC8AB9

RGB

rgb(204, 138, 185)

HSL

hsl(317, 39%, 67%)

HSB

hsb(317, 32%, 80%)

CMYK

cmyk(0%, 32%, 9%, 20%)

Oklch

oklch(71.4% 0.101 337.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#A0A9CF

Azure · LightSteelBlue · Cobalt Blue

HEX

#A0A9CF

RGB

rgb(160, 169, 207)

HSL

hsl(229, 33%, 72%)

HSB

hsb(229, 23%, 81%)

CMYK

cmyk(23%, 18%, 0%, 19%)

Oklch

oklch(74.1% 0.056 274.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#8BC1CA

Sky Blue · SkyBlue · Lake Green

HEX

#8BC1CA

RGB

rgb(139, 193, 202)

HSL

hsl(189, 37%, 67%)

HSB

hsb(189, 31%, 79%)

CMYK

cmyk(31%, 4%, 0%, 21%)

Oklch

oklch(77.7% 0.057 208.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1978A

89C4D1

Analogous

D189A0

D1978A

D1BB89

Triadic

D1978A

89D197

9789D1

Split-Comp.

D1978A

89D1BB

89A0D1

Tetradic

D1978A

A0D189

89C4D1

BB89D1

Contrast Matrix WCAG 2.1 Contrast

D1978A	F07896	CC8AB9	A0A9CF	8BC1CA
—	1.1 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.3 Fail
1.1 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

2.5Fail

2.7Fail

2.3Fail

2.0Fail

Black BG

8.5AAA

7.8AAA

7.9AAA

9.1AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B78D

BCBB8F

AFAFAE

A4A4C6

A2A3C8

Deuteranopia

BBC08E

C3CC8D

B3B8AB

A3A3C4

9F9BC7

Tritanopia

CE9090

EA8988

C9A5A3

A0BFBD

8EC6C6

Achromatopsia

A7A7A7

9F9F9F

A3A3A3

ABABAB

B2B2B2

Shades & Tints Shades & Tints

#D1978A

Dark

Light

#F07896

Dark

Light

#CC8AB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1978a;
  --color-2: #f07896;
  --color-3: #cc8ab9;
  --color-4: #a0a9cf;
  --color-5: #8bc1ca;
}

SCSS

$color-1: #d1978a;
$color-2: #f07896;
$color-3: #cc8ab9;
$color-4: #a0a9cf;
$color-5: #8bc1ca;

TAILWIND

colors: {
  'brand-1': '#d1978a',
  'brand-2': '#f07896',
  'brand-3': '#cc8ab9',
  'brand-4': '#a0a9cf',
  'brand-5': '#8bc1ca',
}

RGB Array

[209, 151, 138], [240, 120, 150], [204, 138, 185], [160, 169, 207], [139, 193, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1978A, #F07896, #CC8AB9, #A0A9CF, #8BC1CA 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: #d1978a; --color-2: #f07896; --color-3: #cc8ab9; --color-4: #a0a9cf; --color-5: #8bc1ca. 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