← Back to Editor

#8C768E · #8D91AE · #8FA8C8 · #CFE4B2 · #F9F4EE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#8C768E

Dark Plum · Gray · Violet

HEX
#8C768E
RGB
rgb(140, 118, 142)
HSL
hsl(295, 10%, 51%)
HSB
hsb(295, 17%, 56%)
CMYK
cmyk(1%, 17%, 0%, 44%)
Oklch
oklch(59.5% 0.044 323.5)

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

#8D91AE

Azure · LightSlateGray · Cobalt Blue

HEX
#8D91AE
RGB
rgb(141, 145, 174)
HSL
hsl(233, 17%, 62%)
HSB
hsb(233, 19%, 68%)
CMYK
cmyk(19%, 17%, 0%, 32%)
Oklch
oklch(66.3% 0.043 279.0)

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

#8FA8C8

Azure · DarkGray · Cobalt Blue

HEX
#8FA8C8
RGB
rgb(143, 168, 200)
HSL
hsl(214, 34%, 67%)
HSB
hsb(214, 28%, 78%)
CMYK
cmyk(28%, 16%, 0%, 22%)
Oklch
oklch(72.4% 0.054 254.7)

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

#CFE4B2

Willow Green · LightGray · Apple Green

HEX
#CFE4B2
RGB
rgb(207, 228, 178)
HSL
hsl(85, 48%, 80%)
HSB
hsb(85, 22%, 89%)
CMYK
cmyk(9%, 0%, 22%, 11%)
Oklch
oklch(89.1% 0.070 126.3)

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

#F9F4EE

Goose Yellow · SeaShell · Peach Orange

HEX
#F9F4EE
RGB
rgb(249, 244, 238)
HSL
hsl(33, 48%, 95%)
HSB
hsb(33, 4%, 98%)
CMYK
cmyk(0%, 2%, 4%, 2%)
Oklch
oklch(96.9% 0.010 72.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C768E
788F76

Analogous

80768F
8C768E
8F7684

Triadic

8C768E
8F8C76
768F8C

Split-Comp.

8C768E
848F76
768F80

Tetradic

8C768E
8F8076
788F76
76848F

Contrast Matrix WCAG 2.1 Contrast

8C768E
8D91AE
8FA8C8
CFE4B2
F9F4EE
—
1.3
Fail
1.7
Fail
3.0
AA Large
3.8
AA Large
1.3
Fail
—
1.3
Fail
2.3
Fail
2.8
Fail
1.7
Fail
1.3
Fail
—
1.8
Fail
2.2
Fail
3.0
AA Large
2.3
Fail
1.8
Fail
—
1.2
Fail
3.8
AA Large
2.8
Fail
2.2
Fail
1.2
Fail
—
White BG
4.1AA Large
3.1AA Large
2.4Fail
1.4Fail
1.1Fail
Black BG
5.1AA
6.8AA
8.6AAA
15.4AAA
19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828288
8F8FA7
9A9AC0
D8D8BE
F7F7EF

Deuteranopia

848587
8F8EA5
9897BE
D7D5C1
F7F8F0

Tritanopia

8B8483
8DA1A0
90BAB9
D0C8CA
F9F1F1

Achromatopsia

7F7F7F
939393
A4A4A4
D8D8D8
F5F5F5

Shades & Tints Shades & Tints

#8C768E

Dark
Light

#8D91AE

Dark
Light

#8FA8C8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c768e;
  --color-2: #8d91ae;
  --color-3: #8fa8c8;
  --color-4: #cfe4b2;
  --color-5: #f9f4ee;
}

SCSS

$color-1: #8c768e;
$color-2: #8d91ae;
$color-3: #8fa8c8;
$color-4: #cfe4b2;
$color-5: #f9f4ee;

TAILWIND

colors: {
  'brand-1': '#8c768e',
  'brand-2': '#8d91ae',
  'brand-3': '#8fa8c8',
  'brand-4': '#cfe4b2',
  'brand-5': '#f9f4ee',
}

RGB Array

[140, 118, 142], [141, 145, 174], [143, 168, 200], [207, 228, 178], [249, 244, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C768E, #8D91AE, #8FA8C8, #CFE4B2, #F9F4EE is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8c768e; --color-2: #8d91ae; --color-3: #8fa8c8; --color-4: #cfe4b2; --color-5: #f9f4ee. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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