← Back to Editor

#372727 · #292E31 · #9BB0B2 · #E9E2DC · #9B4E70

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 LibraryData Visualization

Color Details Color Details

#372727

Crimson · DarkSlateGray · Deep Berry

HEX
#372727
RGB
rgb(55, 39, 39)
HSL
hsl(0, 17%, 18%)
HSB
hsb(0, 29%, 22%)
CMYK
cmyk(0%, 29%, 29%, 78%)
Oklch
oklch(29.2% 0.024 18.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#292E31

Slate Blue · DarkSlateGray · Dark Stone

HEX
#292E31
RGB
rgb(41, 46, 49)
HSL
hsl(203, 9%, 18%)
HSB
hsb(203, 16%, 19%)
CMYK
cmyk(16%, 6%, 0%, 81%)
Oklch
oklch(29.7% 0.009 234.0)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#9BB0B2

Sky Blue · DarkGray · Lake Green

HEX
#9BB0B2
RGB
rgb(155, 176, 178)
HSL
hsl(185, 13%, 65%)
HSB
hsb(185, 13%, 70%)
CMYK
cmyk(13%, 1%, 0%, 30%)
Oklch
oklch(74.2% 0.023 203.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#E9E2DC

Apricot · Beige · Peach Orange

HEX
#E9E2DC
RGB
rgb(233, 226, 220)
HSL
hsl(28, 23%, 89%)
HSB
hsb(28, 6%, 91%)
CMYK
cmyk(0%, 3%, 6%, 9%)
Oklch
oklch(91.7% 0.011 63.4)

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

#9B4E70

Dark Violet · DimGray · Camellia

HEX
#9B4E70
RGB
rgb(155, 78, 112)
HSL
hsl(334, 33%, 46%)
HSB
hsb(334, 50%, 61%)
CMYK
cmyk(0%, 50%, 28%, 39%)
Oklch
oklch(52.8% 0.110 353.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372727
263636

Analogous

36262E
372727
362E26

Triadic

372727
263626
262636

Split-Comp.

372727
26362E
262E36

Tetradic

372727
2E3626
263636
2E2636

Contrast Matrix WCAG 2.1 Contrast

372727
292E31
9BB0B2
E9E2DC
9B4E70
—
1.0
Fail
6.2
AA
11.1
AAA
2.5
Fail
1.0
Fail
—
6.0
AA
10.7
AAA
2.4
Fail
6.2
AA
6.0
AA
—
1.8
Fail
2.5
Fail
11.1
AAA
10.7
AAA
1.8
Fail
—
4.4
AA Large
2.5
Fail
2.4
Fail
2.5
Fail
4.4
AA Large
—
White BG
14.2AAA
13.7AAA
2.3Fail
1.3Fail
5.6AA
Black BG
1.5Fail
1.5Fail
9.2AAA
16.4AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

303027
2B2B30
A4A4B2
E6E6DD
7A7968

Deuteranopia

313227
2B2B30
A3A1B1
E6E7DE
7E8466

Tritanopia

362727
293030
9CB1B1
E9DFDF
976160

Achromatopsia

2C2C2C
2D2D2D
AAAAAA
E3E3E3
696969

Shades & Tints Shades & Tints

#372727

Dark
Light

#292E31

Dark
Light

#9BB0B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372727;
  --color-2: #292e31;
  --color-3: #9bb0b2;
  --color-4: #e9e2dc;
  --color-5: #9b4e70;
}

SCSS

$color-1: #372727;
$color-2: #292e31;
$color-3: #9bb0b2;
$color-4: #e9e2dc;
$color-5: #9b4e70;

TAILWIND

colors: {
  'brand-1': '#372727',
  'brand-2': '#292e31',
  'brand-3': '#9bb0b2',
  'brand-4': '#e9e2dc',
  'brand-5': '#9b4e70',
}

RGB Array

[55, 39, 39], [41, 46, 49], [155, 176, 178], [233, 226, 220], [155, 78, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #372727, #292E31, #9BB0B2, #E9E2DC, #9B4E70 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: #372727; --color-2: #292e31; --color-3: #9bb0b2; --color-4: #e9e2dc; --color-5: #9b4e70. 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