← Back to Editor

#1D2A35 · #BB9E8C · #5A4844 · #15151F · #4A4F63

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#1D2A35

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#1D2A35
RGB
rgb(29, 42, 53)
HSL
hsl(208, 29%, 16%)
HSB
hsb(208, 45%, 21%)
CMYK
cmyk(45%, 21%, 0%, 79%)
Oklch
oklch(27.8% 0.027 244.5)

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

#BB9E8C

Apricot · Tan · Warm Sun

HEX
#BB9E8C
RGB
rgb(187, 158, 140)
HSL
hsl(23, 26%, 64%)
HSB
hsb(23, 25%, 73%)
CMYK
cmyk(0%, 16%, 25%, 27%)
Oklch
oklch(72.0% 0.043 53.7)

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

#5A4844

Crimson · DarkOliveGreen · Wine Red

HEX
#5A4844
RGB
rgb(90, 72, 68)
HSL
hsl(11, 14%, 31%)
HSB
hsb(11, 24%, 35%)
CMYK
cmyk(0%, 20%, 24%, 65%)
Oklch
oklch(41.9% 0.026 32.7)

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

#15151F

Deep Indigo · Black · Deep Sea Blue

HEX
#15151F
RGB
rgb(21, 21, 31)
HSL
hsl(240, 19%, 10%)
HSB
hsb(240, 32%, 12%)
CMYK
cmyk(32%, 32%, 0%, 88%)
Oklch
oklch(20.1% 0.020 284.5)

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

#4A4F63

Indigo · DarkSlateGray · Prussian Blue

HEX
#4A4F63
RGB
rgb(74, 79, 99)
HSL
hsl(228, 14%, 34%)
HSB
hsb(228, 25%, 39%)
CMYK
cmyk(25%, 20%, 0%, 61%)
Oklch
oklch(43.1% 0.034 273.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D2A35
35281D

Analogous

1D3534
1D2A35
1D1E35

Triadic

1D2A35
351D2A
2A351D

Split-Comp.

1D2A35
351D1E
35341D

Tetradic

1D2A35
341D35
35281D
1E351D

Contrast Matrix WCAG 2.1 Contrast

1D2A35
BB9E8C
5A4844
15151F
4A4F63
—
5.8
AA
1.7
Fail
1.2
Fail
1.8
Fail
5.8
AA
—
3.4
AA Large
7.2
AAA
3.2
AA Large
1.7
Fail
3.4
AA Large
—
2.1
Fail
1.1
Fail
1.2
Fail
7.2
AAA
2.1
Fail
—
2.2
Fail
1.8
Fail
3.2
AA Large
1.1
Fail
2.2
Fail
—
White BG
14.6AAA
2.5Fail
8.6AAA
18.1AAA
8.1AAA
Black BG
1.4Fail
8.4AAA
2.4Fail
1.2Fail
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

232332
AEAE90
525245
15151D
4C4C5E

Deuteranopia

222132
B0B291
535545
15151C
4C4C5D

Tritanopia

1E3030
BA9495
594646
151B1A
4A5A5A

Achromatopsia

272727
A5A5A5
4D4D4D
161616
505050

Shades & Tints Shades & Tints

#1D2A35

Dark
Light

#BB9E8C

Dark
Light

#5A4844

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d2a35;
  --color-2: #bb9e8c;
  --color-3: #5a4844;
  --color-4: #15151f;
  --color-5: #4a4f63;
}

SCSS

$color-1: #1d2a35;
$color-2: #bb9e8c;
$color-3: #5a4844;
$color-4: #15151f;
$color-5: #4a4f63;

TAILWIND

colors: {
  'brand-1': '#1d2a35',
  'brand-2': '#bb9e8c',
  'brand-3': '#5a4844',
  'brand-4': '#15151f',
  'brand-5': '#4a4f63',
}

RGB Array

[29, 42, 53], [187, 158, 140], [90, 72, 68], [21, 21, 31], [74, 79, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D2A35, #BB9E8C, #5A4844, #15151F, #4A4F63 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #1d2a35; --color-2: #bb9e8c; --color-3: #5a4844; --color-4: #15151f; --color-5: #4a4f63. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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