← Back to Editor

#C8B8AC · #EC888C · #C69686 · #578A7B · #76647D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C8B8AC

Apricot · Silver · Warm Sun

HEX
#C8B8AC
RGB
rgb(200, 184, 172)
HSL
hsl(26, 20%, 73%)
HSB
hsb(26, 14%, 78%)
CMYK
cmyk(0%, 8%, 14%, 22%)
Oklch
oklch(79.3% 0.025 59.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#EC888C

Peach Pink · LightCoral · Coral Red

HEX
#EC888C
RGB
rgb(236, 136, 140)
HSL
hsl(358, 72%, 73%)
HSB
hsb(358, 42%, 93%)
CMYK
cmyk(0%, 42%, 41%, 7%)
Oklch
oklch(73.5% 0.122 17.9)

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

#C69686

Apricot · Tan · Warm Sun

HEX
#C69686
RGB
rgb(198, 150, 134)
HSL
hsl(15, 36%, 65%)
HSB
hsb(15, 32%, 78%)
CMYK
cmyk(0%, 24%, 32%, 22%)
Oklch
oklch(71.4% 0.063 39.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#578A7B

Mineral Blue · SlateGray · Mint Ice

HEX
#578A7B
RGB
rgb(87, 138, 123)
HSL
hsl(162, 23%, 44%)
HSB
hsb(162, 37%, 54%)
CMYK
cmyk(37%, 0%, 11%, 46%)
Oklch
oklch(59.3% 0.060 173.6)

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

#76647D

Dark Plum · DimGray · Violet

HEX
#76647D
RGB
rgb(118, 100, 125)
HSL
hsl(283, 11%, 44%)
HSB
hsb(283, 20%, 49%)
CMYK
cmyk(6%, 20%, 0%, 51%)
Oklch
oklch(52.9% 0.044 316.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8B8AC
ACBCC8

Analogous

C8ACAE
C8B8AC
C8C6AC

Triadic

C8B8AC
ACC8B8
B8ACC8

Split-Comp.

C8B8AC
ACC8C6
ACAEC8

Tetradic

C8B8AC
AEC8AC
ACBCC8
C6ACC8

Contrast Matrix WCAG 2.1 Contrast

C8B8AC
EC888C
C69686
578A7B
76647D
—
1.3
Fail
1.3
Fail
2.0
Fail
2.8
Fail
1.3
Fail
—
1.0
Fail
1.6
Fail
2.2
Fail
1.3
Fail
1.0
Fail
—
1.5
Fail
2.1
Fail
2.0
Fail
1.6
Fail
1.5
Fail
—
1.4
Fail
2.8
Fail
2.2
Fail
2.1
Fail
1.4
Fail
—
White BG
1.9Fail
2.5Fail
2.6Fail
3.9AA Large
5.4AA
Black BG
10.9AAA
8.5AAA
8.1AAA
5.3AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1AF
C1C08B
B1B18A
6D6E7F
6E6E77

Deuteranopia

C2C3B0
C7CE8B
B4B88B
6A6680
6F7176

Tritanopia

C7B1B2
E78A8A
C48D8E
5A8182
757271

Achromatopsia

BBBBBB
A6A6A6
A3A3A3
797979
6C6C6C

Shades & Tints Shades & Tints

#C8B8AC

Dark
Light

#EC888C

Dark
Light

#C69686

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8b8ac;
  --color-2: #ec888c;
  --color-3: #c69686;
  --color-4: #578a7b;
  --color-5: #76647d;
}

SCSS

$color-1: #c8b8ac;
$color-2: #ec888c;
$color-3: #c69686;
$color-4: #578a7b;
$color-5: #76647d;

TAILWIND

colors: {
  'brand-1': '#c8b8ac',
  'brand-2': '#ec888c',
  'brand-3': '#c69686',
  'brand-4': '#578a7b',
  'brand-5': '#76647d',
}

RGB Array

[200, 184, 172], [236, 136, 140], [198, 150, 134], [87, 138, 123], [118, 100, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8B8AC, #EC888C, #C69686, #578A7B, #76647D 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: #c8b8ac; --color-2: #ec888c; --color-3: #c69686; --color-4: #578a7b; --color-5: #76647d. 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