← Back to Editor

#746780 · #858498 · #B2B3A4 · #CBB4C9 · #EDE3D4

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

#746780

Dark Plum · DimGray · Violet

HEX
#746780
RGB
rgb(116, 103, 128)
HSL
hsl(271, 11%, 45%)
HSB
hsb(271, 20%, 50%)
CMYK
cmyk(9%, 20%, 0%, 50%)
Oklch
oklch(53.5% 0.041 308.5)

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

#858498

Deep Indigo · LightSlateGray · Silver Sand

HEX
#858498
RGB
rgb(133, 132, 152)
HSL
hsl(243, 9%, 56%)
HSB
hsb(243, 13%, 60%)
CMYK
cmyk(12%, 13%, 0%, 40%)
Oklch
oklch(62.1% 0.030 287.8)

Traditional「Deep Indigo」· Paint「Silver Sand」· Creative Urban Concrete

#B2B3A4

Fresh Green · DarkGray · Silver Sand

HEX
#B2B3A4
RGB
rgb(178, 179, 164)
HSL
hsl(64, 9%, 67%)
HSB
hsb(64, 8%, 70%)
CMYK
cmyk(1%, 0%, 8%, 30%)
Oklch
oklch(76.2% 0.021 110.0)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#CBB4C9

Mauve · Silver · Lilac Purple

HEX
#CBB4C9
RGB
rgb(203, 180, 201)
HSL
hsl(305, 18%, 75%)
HSB
hsb(305, 11%, 80%)
CMYK
cmyk(0%, 11%, 1%, 20%)
Oklch
oklch(79.6% 0.039 328.7)

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

#EDE3D4

Goose Yellow · Beige · Peach Orange

HEX
#EDE3D4
RGB
rgb(237, 227, 212)
HSL
hsl(36, 41%, 88%)
HSB
hsb(36, 11%, 93%)
CMYK
cmyk(0%, 4%, 11%, 7%)
Oklch
oklch(92.0% 0.023 78.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

746780
727F66

Analogous

67667F
746780
7F667F

Triadic

746780
7F7366
667F73

Split-Comp.

746780
7F7F66
667F67

Tetradic

746780
7F6766
727F66
667F7F

Contrast Matrix WCAG 2.1 Contrast

746780
858498
B2B3A4
CBB4C9
EDE3D4
—
1.4
Fail
2.5
Fail
2.7
Fail
4.1
AA Large
1.4
Fail
—
1.7
Fail
1.9
Fail
2.9
Fail
2.5
Fail
1.7
Fail
—
1.1
Fail
1.7
Fail
2.7
Fail
1.9
Fail
1.1
Fail
—
1.5
Fail
4.1
AA Large
2.9
Fail
1.7
Fail
1.5
Fail
—
White BG
5.3AA
3.7AA Large
2.1Fail
1.9Fail
1.3Fail
Black BG
4.0AA Large
5.8AA
9.9AAA
10.9AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E7A
858593
B2B2A8
C1C1C4
E9E9D8

Deuteranopia

6F7079
858592
B2B2A9
C2C4C3
E9EAD8

Tritanopia

737574
858F8F
B2AAAB
CAC0BF
ECDADB

Achromatopsia

6E6E6E
878787
B1B1B1
BDBDBD
E4E4E4

Shades & Tints Shades & Tints

#746780

Dark
Light

#858498

Dark
Light

#B2B3A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #746780;
  --color-2: #858498;
  --color-3: #b2b3a4;
  --color-4: #cbb4c9;
  --color-5: #ede3d4;
}

SCSS

$color-1: #746780;
$color-2: #858498;
$color-3: #b2b3a4;
$color-4: #cbb4c9;
$color-5: #ede3d4;

TAILWIND

colors: {
  'brand-1': '#746780',
  'brand-2': '#858498',
  'brand-3': '#b2b3a4',
  'brand-4': '#cbb4c9',
  'brand-5': '#ede3d4',
}

RGB Array

[116, 103, 128], [133, 132, 152], [178, 179, 164], [203, 180, 201], [237, 227, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #746780, #858498, #B2B3A4, #CBB4C9, #EDE3D4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #746780; --color-2: #858498; --color-3: #b2b3a4; --color-4: #cbb4c9; --color-5: #ede3d4. 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 beauty, lifestyle, arts 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