← Back to Editor

#3C3042 · #AB7F96 · #BEAEAF · #D3C7AF · #EDD3AB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3C3042

Dark Plum · DarkSlateGray · Eggplant

HEX
#3C3042
RGB
rgb(60, 48, 66)
HSL
hsl(280, 16%, 22%)
HSB
hsb(280, 27%, 26%)
CMYK
cmyk(9%, 27%, 0%, 74%)
Oklch
oklch(33.0% 0.035 314.3)

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

#AB7F96

Rose Purple · DarkGray · Rose Pink

HEX
#AB7F96
RGB
rgb(171, 127, 150)
HSL
hsl(329, 21%, 58%)
HSB
hsb(329, 26%, 67%)
CMYK
cmyk(0%, 26%, 12%, 33%)
Oklch
oklch(64.7% 0.063 346.3)

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

#BEAEAF

Peach Pink · DarkGray · Coral Red

HEX
#BEAEAF
RGB
rgb(190, 174, 175)
HSL
hsl(356, 11%, 71%)
HSB
hsb(356, 8%, 75%)
CMYK
cmyk(0%, 8%, 8%, 25%)
Oklch
oklch(76.5% 0.018 13.2)

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

#D3C7AF

Goose Yellow · Silver · Lemon Cream

HEX
#D3C7AF
RGB
rgb(211, 199, 175)
HSL
hsl(40, 29%, 76%)
HSB
hsb(40, 17%, 83%)
CMYK
cmyk(0%, 6%, 17%, 17%)
Oklch
oklch(83.3% 0.035 84.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#EDD3AB

Goose Yellow · Wheat · Peach Orange

HEX
#EDD3AB
RGB
rgb(237, 211, 171)
HSL
hsl(36, 65%, 80%)
HSB
hsb(36, 28%, 93%)
CMYK
cmyk(0%, 11%, 28%, 7%)
Oklch
oklch(87.9% 0.060 78.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3042
35412F

Analogous

322F41
3C3042
412F3E

Triadic

3C3042
413B2F
2F413B

Split-Comp.

3C3042
3E412F
2F4132

Tetradic

3C3042
41322F
35412F
2F3E41

Contrast Matrix WCAG 2.1 Contrast

3C3042
AB7F96
BEAEAF
D3C7AF
EDD3AB
—
3.7
AA Large
5.8
AA
7.4
AAA
8.6
AAA
3.7
AA Large
—
1.6
Fail
2.0
Fail
2.3
Fail
5.8
AA
1.6
Fail
—
1.3
Fail
1.5
Fail
7.4
AAA
2.0
Fail
1.3
Fail
—
1.2
Fail
8.6
AAA
2.3
Fail
1.5
Fail
1.2
Fail
—
White BG
12.4AAA
3.4AA Large
2.1Fail
1.7Fail
1.4Fail
Black BG
1.7Fail
6.2AA
9.9AAA
12.6AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37373E
989890
B7B7AF
CECEB5
E2E2B5

Deuteranopia

38383D
9B9E8F
B8B9AF
CFCFB6
E3E5B7

Tritanopia

3B3A39
A98C8B
BDAFAF
D2B9BA
ECBCBE

Achromatopsia

363636
8F8F8F
B3B3B3
C8C8C8
D6D6D6

Shades & Tints Shades & Tints

#3C3042

Dark
Light

#AB7F96

Dark
Light

#BEAEAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3042;
  --color-2: #ab7f96;
  --color-3: #beaeaf;
  --color-4: #d3c7af;
  --color-5: #edd3ab;
}

SCSS

$color-1: #3c3042;
$color-2: #ab7f96;
$color-3: #beaeaf;
$color-4: #d3c7af;
$color-5: #edd3ab;

TAILWIND

colors: {
  'brand-1': '#3c3042',
  'brand-2': '#ab7f96',
  'brand-3': '#beaeaf',
  'brand-4': '#d3c7af',
  'brand-5': '#edd3ab',
}

RGB Array

[60, 48, 66], [171, 127, 150], [190, 174, 175], [211, 199, 175], [237, 211, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C3042, #AB7F96, #BEAEAF, #D3C7AF, #EDD3AB is ideal for: brand design, premium product pages, magazine layouts, 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: #3c3042; --color-2: #ab7f96; --color-3: #beaeaf; --color-4: #d3c7af; --color-5: #edd3ab. 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. 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. 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