← Back to Editor

#1D212A · #2E3B44 · #F6F2CF · #405767 · #96AAB5

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

#1D212A

Indigo · Black · Deep Sea Blue

HEX
#1D212A
RGB
rgb(29, 33, 42)
HSL
hsl(222, 18%, 14%)
HSB
hsb(222, 31%, 16%)
CMYK
cmyk(31%, 21%, 0%, 84%)
Oklch
oklch(24.8% 0.018 266.2)

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

#2E3B44

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#2E3B44
RGB
rgb(46, 59, 68)
HSL
hsl(205, 19%, 22%)
HSB
hsb(205, 32%, 27%)
CMYK
cmyk(32%, 13%, 0%, 73%)
Oklch
oklch(34.4% 0.023 238.6)

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

#F6F2CF

Fresh Green · Beige · Lemon Cream

HEX
#F6F2CF
RGB
rgb(246, 242, 207)
HSL
hsl(54, 68%, 89%)
HSB
hsb(54, 16%, 96%)
CMYK
cmyk(0%, 2%, 16%, 4%)
Oklch
oklch(95.5% 0.046 101.9)

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

#405767

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#405767
RGB
rgb(64, 87, 103)
HSL
hsl(205, 23%, 33%)
HSB
hsb(205, 38%, 40%)
CMYK
cmyk(38%, 16%, 0%, 60%)
Oklch
oklch(44.4% 0.038 239.1)

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

#96AAB5

Sky Blue · DarkGray · Cobalt Blue

HEX
#96AAB5
RGB
rgb(150, 170, 181)
HSL
hsl(201, 17%, 65%)
HSB
hsb(201, 17%, 71%)
CMYK
cmyk(17%, 6%, 0%, 29%)
Oklch
oklch(72.6% 0.027 231.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D212A
2A261D

Analogous

1D282A
1D212A
201D2A

Triadic

1D212A
2A1D21
212A1D

Split-Comp.

1D212A
2A201D
282A1D

Tetradic

1D212A
2A1D28
2A261D
1D2A20

Contrast Matrix WCAG 2.1 Contrast

1D212A
2E3B44
F6F2CF
405767
96AAB5
—
1.4
Fail
14.2
AAA
2.1
Fail
6.7
AA
1.4
Fail
—
10.1
AAA
1.5
Fail
4.8
AA
14.2
AAA
10.1
AAA
—
6.7
AA
2.1
Fail
2.1
Fail
1.5
Fail
6.7
AA
—
3.1
AA Large
6.7
AA
4.8
AA
2.1
Fail
3.1
AA Large
—
White BG
16.1AAA
11.5AAA
1.1Fail
7.6AAA
2.4Fail
Black BG
1.3Fail
1.8Fail
18.5AAA
2.8Fail
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F28
343442
F4F4D7
4A4A63
9F9FB2

Deuteranopia

1F1E27
333241
F5F5D9
494762
9E9CB2

Tritanopia

1D2626
2F4040
F6DEE0
41605F
97B0B0

Achromatopsia

212121
383838
EFEFEF
525252
A5A5A5

Shades & Tints Shades & Tints

#1D212A

Dark
Light

#2E3B44

Dark
Light

#F6F2CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d212a;
  --color-2: #2e3b44;
  --color-3: #f6f2cf;
  --color-4: #405767;
  --color-5: #96aab5;
}

SCSS

$color-1: #1d212a;
$color-2: #2e3b44;
$color-3: #f6f2cf;
$color-4: #405767;
$color-5: #96aab5;

TAILWIND

colors: {
  'brand-1': '#1d212a',
  'brand-2': '#2e3b44',
  'brand-3': '#f6f2cf',
  'brand-4': '#405767',
  'brand-5': '#96aab5',
}

RGB Array

[29, 33, 42], [46, 59, 68], [246, 242, 207], [64, 87, 103], [150, 170, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D212A, #2E3B44, #F6F2CF, #405767, #96AAB5 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: #1d212a; --color-2: #2e3b44; --color-3: #f6f2cf; --color-4: #405767; --color-5: #96aab5. 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