← Back to Editor

#746B7D · #867896 · #AB8D93 · #CFA28F · #D1B1A3

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

#746B7D

Dark Plum · DimGray · Warm Gray

HEX
#746B7D
RGB
rgb(116, 107, 125)
HSL
hsl(270, 8%, 45%)
HSB
hsb(270, 14%, 49%)
CMYK
cmyk(7%, 14%, 0%, 51%)
Oklch
oklch(54.2% 0.030 307.9)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

#867896

Deep Indigo · LightSlateGray · Violet

HEX
#867896
RGB
rgb(134, 120, 150)
HSL
hsl(268, 13%, 53%)
HSB
hsb(268, 20%, 59%)
CMYK
cmyk(11%, 20%, 0%, 41%)
Oklch
oklch(59.6% 0.048 306.1)

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

#AB8D93

Peach Pink · DarkGray · Coral Red

HEX
#AB8D93
RGB
rgb(171, 141, 147)
HSL
hsl(348, 15%, 61%)
HSB
hsb(348, 18%, 67%)
CMYK
cmyk(0%, 18%, 14%, 33%)
Oklch
oklch(67.3% 0.037 4.6)

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

#CFA28F

Apricot · Tan · Warm Sun

HEX
#CFA28F
RGB
rgb(207, 162, 143)
HSL
hsl(18, 40%, 69%)
HSB
hsb(18, 31%, 81%)
CMYK
cmyk(0%, 22%, 31%, 19%)
Oklch
oklch(74.9% 0.060 44.0)

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

#D1B1A3

Apricot · Tan · Warm Sun

HEX
#D1B1A3
RGB
rgb(209, 177, 163)
HSL
hsl(18, 33%, 73%)
HSB
hsb(18, 22%, 82%)
CMYK
cmyk(0%, 15%, 22%, 18%)
Oklch
oklch(78.5% 0.042 45.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

746B7D
737C6A

Analogous

6A6A7C
746B7D
7C6A7C

Triadic

746B7D
7C736A
6A7C73

Split-Comp.

746B7D
7C7C6A
6A7C6A

Tetradic

746B7D
7C6A6A
737C6A
6A7C7C

Contrast Matrix WCAG 2.1 Contrast

746B7D
867896
AB8D93
CFA28F
D1B1A3
—
1.2
Fail
1.7
Fail
2.2
Fail
2.5
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
2.2
Fail
1.8
Fail
1.3
Fail
—
1.1
Fail
2.5
Fail
2.0
Fail
1.5
Fail
1.1
Fail
—
White BG
5.1AA
4.1AA Large
3.0AA Large
2.3Fail
2.0Fail
Black BG
4.1AA Large
5.1AA
7.0AA
9.2AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

707079
80808F
9E9E92
BCBB94
C3C3A6

Deuteranopia

717178
81828D
A0A291
BEC195
C5C7A7

Tritanopia

747574
858988
AA9090
CD9798
CFA9AA

Achromatopsia

707070
808080
979797
ADADAD
B9B9B9

Shades & Tints Shades & Tints

#746B7D

Dark
Light

#867896

Dark
Light

#AB8D93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #746b7d;
  --color-2: #867896;
  --color-3: #ab8d93;
  --color-4: #cfa28f;
  --color-5: #d1b1a3;
}

SCSS

$color-1: #746b7d;
$color-2: #867896;
$color-3: #ab8d93;
$color-4: #cfa28f;
$color-5: #d1b1a3;

TAILWIND

colors: {
  'brand-1': '#746b7d',
  'brand-2': '#867896',
  'brand-3': '#ab8d93',
  'brand-4': '#cfa28f',
  'brand-5': '#d1b1a3',
}

RGB Array

[116, 107, 125], [134, 120, 150], [171, 141, 147], [207, 162, 143], [209, 177, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #746B7D, #867896, #AB8D93, #CFA28F, #D1B1A3 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #746b7d; --color-2: #867896; --color-3: #ab8d93; --color-4: #cfa28f; --color-5: #d1b1a3. 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. Restrained colors convey professionalism and trust. 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