#C8D8B4 + #F4AADF + #BE829E + #AB87AB + #77668A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8D8B4

Willow Green · Silver · Apple Green

HEX

#C8D8B4

RGB

rgb(200, 216, 180)

HSL

hsl(87, 32%, 78%)

HSB

hsb(87, 17%, 85%)

CMYK

cmyk(7%, 0%, 17%, 15%)

Oklch

oklch(86.1% 0.051 127.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#F4AADF

Mauve · Pink · Lavender

HEX

#F4AADF

RGB

rgb(244, 170, 223)

HSL

hsl(317, 77%, 81%)

HSB

hsb(317, 30%, 96%)

CMYK

cmyk(0%, 30%, 9%, 4%)

Oklch

oklch(82.5% 0.110 337.5)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#BE829E

Rouge · DarkGray · Rose Pink

HEX

#BE829E

RGB

rgb(190, 130, 158)

HSL

hsl(332, 32%, 63%)

HSB

hsb(332, 32%, 75%)

CMYK

cmyk(0%, 32%, 17%, 25%)

Oklch

oklch(67.5% 0.082 350.0)

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

#AB87AB

Rose Purple · DarkGray · Violet

HEX

#AB87AB

RGB

rgb(171, 135, 171)

HSL

hsl(300, 18%, 60%)

HSB

hsb(300, 21%, 67%)

CMYK

cmyk(0%, 21%, 0%, 33%)

Oklch

oklch(66.9% 0.067 326.3)

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

#77668A

Deep Indigo · SlateGray · Violet

HEX

#77668A

RGB

rgb(119, 102, 138)

HSL

hsl(268, 15%, 47%)

HSB

hsb(268, 26%, 54%)

CMYK

cmyk(14%, 26%, 0%, 46%)

Oklch

oklch(54.0% 0.059 306.0)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8D8B4

C5B5D9

Analogous

D9D7B5

C8D8B4

B7D9B5

Triadic

C8D8B4

B5C9D9

D9B5C9

Split-Comp.

C8D8B4

B5B7D9

D7B5D9

Tetradic

C8D8B4

B5D9D7

C5B5D9

D9B5B7

Contrast Matrix WCAG 2.1 Contrast

C8D8B4	F4AADF	BE829E	AB87AB	77668A
—	1.2 Fail	2.0 Fail	2.1 Fail	3.4 AA Large
1.2 Fail	—	1.7 Fail	1.7 Fail	2.9 Fail
2.0 Fail	1.7 Fail	—	1.0 Fail	1.7 Fail
2.1 Fail	1.7 Fail	1.0 Fail	—	1.7 Fail
3.4 AA Large	2.9 Fail	1.7 Fail	1.7 Fail	—

White BG

1.5Fail

1.8Fail

3.1AA Large

5.2AA

Black BG

13.9AAA

11.7AAA

6.9AA

6.8AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFBD

D4D3D2

A4A397

9B9BA2

706F81

Deuteranopia

CECDBF

D8DECF

A8AC96

9EA0A0

71727F

Tritanopia

C9C4C5

F0C8C6

BB9291

A99B9A

767A79

Achromatopsia

CFCFCF

C6C6C6

979797

969696

6F6F6F

Shades & Tints Shades & Tints

#C8D8B4

Dark

Light

#F4AADF

Dark

Light

#BE829E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8d8b4;
  --color-2: #f4aadf;
  --color-3: #be829e;
  --color-4: #ab87ab;
  --color-5: #77668a;
}

SCSS

$color-1: #c8d8b4;
$color-2: #f4aadf;
$color-3: #be829e;
$color-4: #ab87ab;
$color-5: #77668a;

TAILWIND

colors: {
  'brand-1': '#c8d8b4',
  'brand-2': '#f4aadf',
  'brand-3': '#be829e',
  'brand-4': '#ab87ab',
  'brand-5': '#77668a',
}

RGB Array

[200, 216, 180], [244, 170, 223], [190, 130, 158], [171, 135, 171], [119, 102, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8D8B4, #F4AADF, #BE829E, #AB87AB, #77668A 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: #c8d8b4; --color-2: #f4aadf; --color-3: #be829e; --color-4: #ab87ab; --color-5: #77668a. 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