← Back to Editor

#101624 · #3C474B · #90867C · #BFB3A7 · #F1E4D4

dark

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

#101624

Indigo · Black · Deep Sea Blue

HEX
#101624
RGB
rgb(16, 22, 36)
HSL
hsl(222, 38%, 10%)
HSB
hsb(222, 56%, 14%)
CMYK
cmyk(56%, 39%, 0%, 86%)
Oklch
oklch(20.2% 0.030 266.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#3C474B

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3C474B
RGB
rgb(60, 71, 75)
HSL
hsl(196, 11%, 26%)
HSB
hsb(196, 20%, 29%)
CMYK
cmyk(20%, 5%, 0%, 71%)
Oklch
oklch(39.0% 0.016 221.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#90867C

Ginger · Gray · Warm Gray

HEX
#90867C
RGB
rgb(144, 134, 124)
HSL
hsl(30, 8%, 53%)
HSB
hsb(30, 14%, 56%)
CMYK
cmyk(0%, 7%, 14%, 44%)
Oklch
oklch(62.6% 0.019 67.5)

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

#BFB3A7

Ginger · DarkGray · Warm Sun

HEX
#BFB3A7
RGB
rgb(191, 179, 167)
HSL
hsl(30, 16%, 70%)
HSB
hsb(30, 13%, 75%)
CMYK
cmyk(0%, 6%, 13%, 25%)
Oklch
oklch(77.3% 0.022 67.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F1E4D4

Goose Yellow · Beige · Peach Orange

HEX
#F1E4D4
RGB
rgb(241, 228, 212)
HSL
hsl(33, 51%, 89%)
HSB
hsb(33, 12%, 95%)
CMYK
cmyk(0%, 5%, 12%, 5%)
Oklch
oklch(92.5% 0.026 73.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

101624
231D10

Analogous

101F23
101624
141023

Triadic

101624
231016
162310

Split-Comp.

101624
231410
1F2310

Tetradic

101624
23101F
231D10
102314

Contrast Matrix WCAG 2.1 Contrast

101624
3C474B
90867C
BFB3A7
F1E4D4
—
1.9
Fail
5.1
AA
8.8
AAA
14.4
AAA
1.9
Fail
—
2.7
Fail
4.7
AA
7.6
AAA
5.1
AA
2.7
Fail
—
1.7
Fail
2.9
Fail
8.8
AAA
4.7
AA
1.7
Fail
—
1.6
Fail
14.4
AAA
7.6
AAA
2.9
Fail
1.6
Fail
—
White BG
18.1AAA
9.6AAA
3.6AA Large
2.1Fail
1.3Fail
Black BG
1.2Fail
2.2Fail
5.9AA
10.2AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

131321
41414A
8C8C7E
BABAAA
EBEBD8

Deuteranopia

121220
403F4A
8C8D7F
BBBBAB
ECEDD9

Tritanopia

101E1D
3D4949
8F8081
BEACAD
F0DBDC

Achromatopsia

161616
444444
888888
B5B5B5
E6E6E6

Shades & Tints Shades & Tints

#101624

Dark
Light

#3C474B

Dark
Light

#90867C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #101624;
  --color-2: #3c474b;
  --color-3: #90867c;
  --color-4: #bfb3a7;
  --color-5: #f1e4d4;
}

SCSS

$color-1: #101624;
$color-2: #3c474b;
$color-3: #90867c;
$color-4: #bfb3a7;
$color-5: #f1e4d4;

TAILWIND

colors: {
  'brand-1': '#101624',
  'brand-2': '#3c474b',
  'brand-3': '#90867c',
  'brand-4': '#bfb3a7',
  'brand-5': '#f1e4d4',
}

RGB Array

[16, 22, 36], [60, 71, 75], [144, 134, 124], [191, 179, 167], [241, 228, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #101624, #3C474B, #90867C, #BFB3A7, #F1E4D4 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: #101624; --color-2: #3c474b; --color-3: #90867c; --color-4: #bfb3a7; --color-5: #f1e4d4. 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 dark-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