← Back to Editor

#382F2A · #8B4C61 · #9A6D8E · #D2C7C1 · #FBF7EB

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

#382F2A

Tangerine · DarkSlateGray · Cinnamon

HEX
#382F2A
RGB
rgb(56, 47, 42)
HSL
hsl(21, 14%, 19%)
HSB
hsb(21, 25%, 22%)
CMYK
cmyk(0%, 16%, 25%, 78%)
Oklch
oklch(31.3% 0.016 50.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#8B4C61

Dark Violet · DimGray · Camellia

HEX
#8B4C61
RGB
rgb(139, 76, 97)
HSL
hsl(340, 29%, 42%)
HSB
hsb(340, 45%, 55%)
CMYK
cmyk(0%, 45%, 30%, 45%)
Oklch
oklch(49.8% 0.088 359.5)

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

#9A6D8E

Rose Purple · Gray · Violet

HEX
#9A6D8E
RGB
rgb(154, 109, 142)
HSL
hsl(316, 18%, 52%)
HSB
hsb(316, 29%, 60%)
CMYK
cmyk(0%, 29%, 8%, 40%)
Oklch
oklch(59.2% 0.073 336.6)

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

#D2C7C1

Apricot · Silver · Peach Orange

HEX
#D2C7C1
RGB
rgb(210, 199, 193)
HSL
hsl(21, 16%, 79%)
HSB
hsb(21, 8%, 82%)
CMYK
cmyk(0%, 5%, 8%, 18%)
Oklch
oklch(83.7% 0.015 50.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBF7EB

Goose Yellow · SeaShell · Lemon Cream

HEX
#FBF7EB
RGB
rgb(251, 247, 235)
HSL
hsl(45, 67%, 95%)
HSB
hsb(45, 6%, 98%)
CMYK
cmyk(0%, 2%, 6%, 2%)
Oklch
oklch(97.6% 0.016 91.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

382F2A
2A3237

Analogous

372A2C
382F2A
37352A

Triadic

382F2A
2A372E
2E2A37

Split-Comp.

382F2A
2A3735
2A2C37

Tetradic

382F2A
2C372A
2A3237
352A37

Contrast Matrix WCAG 2.1 Contrast

382F2A
8B4C61
9A6D8E
D2C7C1
FBF7EB
—
2.1
Fail
3.1
AA Large
7.9
AAA
12.2
AAA
2.1
Fail
—
1.5
Fail
3.8
AA Large
5.9
AA
3.1
AA Large
1.5
Fail
—
2.6
Fail
4.0
AA Large
7.9
AAA
3.8
AA Large
2.6
Fail
—
1.5
Fail
12.2
AAA
5.9
AA
4.0
AA Large
1.5
Fail
—
White BG
13.1AAA
6.4AA
4.2AA Large
1.7Fail
1.1Fail
Black BG
1.6Fail
3.3AA Large
5.0AA
12.7AAA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34342B
706F5C
878686
CDCDC2
F9F9EE

Deuteranopia

35352C
73785B
898D84
CECFC3
FAFAEF

Tritanopia

382C2C
885857
98807E
D1C4C4
FBF0F1

Achromatopsia

313131
616161
7E7E7E
CACACA
F7F7F7

Shades & Tints Shades & Tints

#382F2A

Dark
Light

#8B4C61

Dark
Light

#9A6D8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #382f2a;
  --color-2: #8b4c61;
  --color-3: #9a6d8e;
  --color-4: #d2c7c1;
  --color-5: #fbf7eb;
}

SCSS

$color-1: #382f2a;
$color-2: #8b4c61;
$color-3: #9a6d8e;
$color-4: #d2c7c1;
$color-5: #fbf7eb;

TAILWIND

colors: {
  'brand-1': '#382f2a',
  'brand-2': '#8b4c61',
  'brand-3': '#9a6d8e',
  'brand-4': '#d2c7c1',
  'brand-5': '#fbf7eb',
}

RGB Array

[56, 47, 42], [139, 76, 97], [154, 109, 142], [210, 199, 193], [251, 247, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #382F2A, #8B4C61, #9A6D8E, #D2C7C1, #FBF7EB 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: #382f2a; --color-2: #8b4c61; --color-3: #9a6d8e; --color-4: #d2c7c1; --color-5: #fbf7eb. 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