← Back to Editor

#373B44 · #A36371 · #9EA37B · #BFA0A8 · #DFCEBC

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

#373B44

Indigo · DarkSlateGray · Prussian Blue

HEX
#373B44
RGB
rgb(55, 59, 68)
HSL
hsl(222, 11%, 24%)
HSB
hsb(222, 19%, 27%)
CMYK
cmyk(19%, 13%, 0%, 73%)
Oklch
oklch(35.2% 0.017 266.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#A36371

Crimson · Gray · Passion Red

HEX
#A36371
RGB
rgb(163, 99, 113)
HSL
hsl(347, 26%, 51%)
HSB
hsb(347, 39%, 64%)
CMYK
cmyk(0%, 39%, 31%, 36%)
Oklch
oklch(57.4% 0.084 5.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#9EA37B

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9EA37B
RGB
rgb(158, 163, 123)
HSL
hsl(67, 18%, 56%)
HSB
hsb(67, 25%, 64%)
CMYK
cmyk(3%, 0%, 25%, 36%)
Oklch
oklch(70.1% 0.056 113.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#BFA0A8

Peach Pink · DarkGray · Coral Red

HEX
#BFA0A8
RGB
rgb(191, 160, 168)
HSL
hsl(345, 19%, 69%)
HSB
hsb(345, 16%, 75%)
CMYK
cmyk(0%, 16%, 12%, 25%)
Oklch
oklch(73.6% 0.038 0.8)

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

#DFCEBC

Goose Yellow · LightGray · Peach Orange

HEX
#DFCEBC
RGB
rgb(223, 206, 188)
HSL
hsl(31, 35%, 81%)
HSB
hsb(31, 16%, 87%)
CMYK
cmyk(0%, 8%, 16%, 13%)
Oklch
oklch(86.1% 0.031 69.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

373B44
444036

Analogous

364144
373B44
393644

Triadic

373B44
44363B
3B4436

Split-Comp.

373B44
443936
414436

Tetradic

373B44
443641
444036
364439

Contrast Matrix WCAG 2.1 Contrast

373B44
A36371
9EA37B
BFA0A8
DFCEBC
—
2.4
Fail
4.3
AA Large
4.7
AA
7.3
AAA
2.4
Fail
—
1.7
Fail
1.9
Fail
3.0
Fail
4.3
AA Large
1.7
Fail
—
1.1
Fail
1.7
Fail
4.7
AA
1.9
Fail
1.1
Fail
—
1.6
Fail
7.3
AAA
3.0
Fail
1.7
Fail
1.6
Fail
—
White BG
11.2AAA
4.6AA
2.6Fail
2.4Fail
1.5Fail
Black BG
1.9Fail
4.6AA
8.0AAA
8.8AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393942
87876E
A0A085
B2B1A6
D8D7C0

Deuteranopia

393841
8B906D
A0A087
B3B6A6
D9DAC1

Tritanopia

374040
A06B6A
9E8C8E
BDA5A4
DEC4C5

Achromatopsia

3B3B3B
787878
9D9D9D
AAAAAA
D1D1D1

Shades & Tints Shades & Tints

#373B44

Dark
Light

#A36371

Dark
Light

#9EA37B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #373b44;
  --color-2: #a36371;
  --color-3: #9ea37b;
  --color-4: #bfa0a8;
  --color-5: #dfcebc;
}

SCSS

$color-1: #373b44;
$color-2: #a36371;
$color-3: #9ea37b;
$color-4: #bfa0a8;
$color-5: #dfcebc;

TAILWIND

colors: {
  'brand-1': '#373b44',
  'brand-2': '#a36371',
  'brand-3': '#9ea37b',
  'brand-4': '#bfa0a8',
  'brand-5': '#dfcebc',
}

RGB Array

[55, 59, 68], [163, 99, 113], [158, 163, 123], [191, 160, 168], [223, 206, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #373B44, #A36371, #9EA37B, #BFA0A8, #DFCEBC 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: #373b44; --color-2: #a36371; --color-3: #9ea37b; --color-4: #bfa0a8; --color-5: #dfcebc. 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