← Back to Editor

#1D1333 · #4B465C · #566869 · #708A85 · #A0B9BA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1D1333

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1D1333
RGB
rgb(29, 19, 51)
HSL
hsl(259, 46%, 14%)
HSB
hsb(259, 63%, 20%)
CMYK
cmyk(43%, 63%, 0%, 80%)
Oklch
oklch(21.9% 0.061 295.3)

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

#4B465C

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#4B465C
RGB
rgb(75, 70, 92)
HSL
hsl(254, 14%, 32%)
HSB
hsb(254, 24%, 36%)
CMYK
cmyk(18%, 24%, 0%, 64%)
Oklch
oklch(40.8% 0.037 295.1)

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

#566869

Slate Blue · DimGray · Mint Ice

HEX
#566869
RGB
rgb(86, 104, 105)
HSL
hsl(183, 10%, 37%)
HSB
hsb(183, 18%, 41%)
CMYK
cmyk(18%, 1%, 0%, 59%)
Oklch
oklch(50.3% 0.022 200.6)

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

#708A85

Mineral Blue · SlateGray · Mint Ice

HEX
#708A85
RGB
rgb(112, 138, 133)
HSL
hsl(168, 10%, 49%)
HSB
hsb(168, 19%, 54%)
CMYK
cmyk(19%, 0%, 4%, 46%)
Oklch
oklch(61.2% 0.031 182.3)

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

#A0B9BA

Sky Blue · DarkGray · Lake Green

HEX
#A0B9BA
RGB
rgb(160, 185, 186)
HSL
hsl(182, 16%, 68%)
HSB
hsb(182, 14%, 73%)
CMYK
cmyk(14%, 1%, 0%, 27%)
Oklch
oklch(76.7% 0.027 199.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D1333
2A3413

Analogous

131934
1D1333
2E1334

Triadic

1D1333
341E13
13341E

Split-Comp.

1D1333
342E13
193413

Tetradic

1D1333
341319
2A3413
13342E

Contrast Matrix WCAG 2.1 Contrast

1D1333
4B465C
566869
708A85
A0B9BA
—
2.0
Fail
3.0
AA Large
4.7
AA
8.5
AAA
2.0
Fail
—
1.5
Fail
2.4
Fail
4.4
AA Large
3.0
AA Large
1.5
Fail
—
1.6
Fail
2.8
Fail
4.7
AA
2.4
Fail
1.6
Fail
—
1.8
Fail
8.5
AAA
4.4
AA Large
2.8
Fail
1.8
Fail
—
White BG
17.6AAA
9.0AAA
5.9AA
3.7AA Large
2.1Fail
Black BG
1.2Fail
2.3Fail
3.6AA Large
5.7AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

19192B
494957
5E5E69
7B7B86
ABABBA

Deuteranopia

191A29
494A55
5D5B69
7A7887
A9A8BA

Tritanopia

1C2524
4B5252
576969
718787
A1BABA

Achromatopsia

1A1A1A
4A4A4A
636363
828282
B2B2B2

Shades & Tints Shades & Tints

#1D1333

Dark
Light

#4B465C

Dark
Light

#566869

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d1333;
  --color-2: #4b465c;
  --color-3: #566869;
  --color-4: #708a85;
  --color-5: #a0b9ba;
}

SCSS

$color-1: #1d1333;
$color-2: #4b465c;
$color-3: #566869;
$color-4: #708a85;
$color-5: #a0b9ba;

TAILWIND

colors: {
  'brand-1': '#1d1333',
  'brand-2': '#4b465c',
  'brand-3': '#566869',
  'brand-4': '#708a85',
  'brand-5': '#a0b9ba',
}

RGB Array

[29, 19, 51], [75, 70, 92], [86, 104, 105], [112, 138, 133], [160, 185, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D1333, #4B465C, #566869, #708A85, #A0B9BA 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: #1d1333; --color-2: #4b465c; --color-3: #566869; --color-4: #708a85; --color-5: #a0b9ba. 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