← Back to Editor

#372F3C · #847979 · #C3D3D8 · #E2EFE5 · #F5F6C5

dark

A 5-color dark 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

#372F3C

Dark Plum · DarkSlateGray · Eggplant

HEX
#372F3C
RGB
rgb(55, 47, 60)
HSL
hsl(277, 12%, 21%)
HSB
hsb(277, 22%, 24%)
CMYK
cmyk(8%, 22%, 0%, 76%)
Oklch
oklch(31.9% 0.025 312.4)

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

#847979

Ink Gray · Gray · Warm Gray

HEX
#847979
RGB
rgb(132, 121, 121)
HSL
hsl(0, 4%, 50%)
HSB
hsb(0, 8%, 52%)
CMYK
cmyk(0%, 8%, 8%, 48%)
Oklch
oklch(58.6% 0.014 17.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#C3D3D8

Sky Blue · LightGray · Glacier Blue

HEX
#C3D3D8
RGB
rgb(195, 211, 216)
HSL
hsl(194, 21%, 81%)
HSB
hsb(194, 10%, 85%)
CMYK
cmyk(10%, 2%, 0%, 15%)
Oklch
oklch(85.6% 0.019 218.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#E2EFE5

Celadon · Beige · Mint Green

HEX
#E2EFE5
RGB
rgb(226, 239, 229)
HSL
hsl(134, 29%, 91%)
HSB
hsb(134, 5%, 94%)
CMYK
cmyk(5%, 0%, 4%, 6%)
Oklch
oklch(94.0% 0.019 152.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F5F6C5

Fresh Green · Bisque · Lemon Cream

HEX
#F5F6C5
RGB
rgb(245, 246, 197)
HSL
hsl(61, 73%, 87%)
HSB
hsb(61, 20%, 96%)
CMYK
cmyk(0%, 0%, 20%, 4%)
Oklch
oklch(96.0% 0.063 108.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372F3C
343C2F

Analogous

312F3C
372F3C
3C2F3A

Triadic

372F3C
3C372F
2F3C37

Split-Comp.

372F3C
3A3C2F
2F3C31

Tetradic

372F3C
3C312F
343C2F
2F3A3C

Contrast Matrix WCAG 2.1 Contrast

372F3C
847979
C3D3D8
E2EFE5
F5F6C5
—
3.1
AA Large
8.3
AAA
10.8
AAA
11.5
AAA
3.1
AA Large
—
2.7
Fail
3.5
AA Large
3.8
AA Large
8.3
AAA
2.7
Fail
—
1.3
Fail
1.4
Fail
10.8
AAA
3.5
AA Large
1.3
Fail
—
1.1
Fail
11.5
AAA
3.8
AA Large
1.4
Fail
1.1
Fail
—
White BG
12.8AAA
4.2AA Large
1.5Fail
1.2Fail
1.1Fail
Black BG
1.6Fail
5.0AA
13.6AAA
17.7AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

343339
7F7F79
CACAD7
E8E8E7
F5F5D1

Deuteranopia

343538
808179
C9C8D7
E7E6E8
F5F5D4

Tritanopia

373636
837979
C4D6D6
E3E9EA
F5DADC

Achromatopsia

333333
7C7C7C
CFCFCF
EAEAEA
F0F0F0

Shades & Tints Shades & Tints

#372F3C

Dark
Light

#847979

Dark
Light

#C3D3D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372f3c;
  --color-2: #847979;
  --color-3: #c3d3d8;
  --color-4: #e2efe5;
  --color-5: #f5f6c5;
}

SCSS

$color-1: #372f3c;
$color-2: #847979;
$color-3: #c3d3d8;
$color-4: #e2efe5;
$color-5: #f5f6c5;

TAILWIND

colors: {
  'brand-1': '#372f3c',
  'brand-2': '#847979',
  'brand-3': '#c3d3d8',
  'brand-4': '#e2efe5',
  'brand-5': '#f5f6c5',
}

RGB Array

[55, 47, 60], [132, 121, 121], [195, 211, 216], [226, 239, 229], [245, 246, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #372F3C, #847979, #C3D3D8, #E2EFE5, #F5F6C5 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: #372f3c; --color-2: #847979; --color-3: #c3d3d8; --color-4: #e2efe5; --color-5: #f5f6c5. 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 dark-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