← Back to Editor

#454A60 · #1B1738 · #605354 · #C8BFBA · #E5E1DE

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

#454A60

Indigo · DarkSlateGray · Prussian Blue

HEX
#454A60
RGB
rgb(69, 74, 96)
HSL
hsl(229, 16%, 32%)
HSB
hsb(229, 28%, 38%)
CMYK
cmyk(28%, 23%, 0%, 62%)
Oklch
oklch(41.4% 0.037 274.7)

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

#1B1738

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1B1738
RGB
rgb(27, 23, 56)
HSL
hsl(247, 42%, 15%)
HSB
hsb(247, 59%, 22%)
CMYK
cmyk(52%, 59%, 0%, 78%)
Oklch
oklch(22.9% 0.062 286.0)

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

#605354

Ink Gray · DimGray · Charcoal

HEX
#605354
RGB
rgb(96, 83, 84)
HSL
hsl(355, 7%, 35%)
HSB
hsb(355, 14%, 38%)
CMYK
cmyk(0%, 14%, 13%, 62%)
Oklch
oklch(45.5% 0.017 12.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#C8BFBA

Apricot · Silver · Peach Orange

HEX
#C8BFBA
RGB
rgb(200, 191, 186)
HSL
hsl(21, 11%, 76%)
HSB
hsb(21, 7%, 78%)
CMYK
cmyk(0%, 4%, 7%, 22%)
Oklch
oklch(81.1% 0.012 51.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E5E1DE

Apricot · LightGray · Peach Orange

HEX
#E5E1DE
RGB
rgb(229, 225, 222)
HSL
hsl(26, 12%, 88%)
HSB
hsb(26, 3%, 90%)
CMYK
cmyk(0%, 2%, 3%, 10%)
Oklch
oklch(91.2% 0.006 59.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

454A60
5F5A45

Analogous

45565F
454A60
4D455F

Triadic

454A60
5F4549
495F45

Split-Comp.

454A60
5F4D45
565F45

Tetradic

454A60
5F4556
5F5A45
455F4D

Contrast Matrix WCAG 2.1 Contrast

454A60
1B1738
605354
C8BFBA
E5E1DE
—
2.0
Fail
1.2
Fail
4.8
AA
6.7
AA
2.0
Fail
—
2.3
Fail
9.5
AAA
13.2
AAA
1.2
Fail
2.3
Fail
—
4.1
AA Large
5.6
AA
4.8
AA
9.5
AAA
4.1
AA Large
—
1.4
Fail
6.7
AA
13.2
AAA
5.6
AA
1.4
Fail
—
White BG
8.7AAA
17.1AAA
7.3AAA
1.8Fail
1.3Fail
Black BG
2.4Fail
1.2Fail
2.9Fail
11.6AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47475B
191930
5A5A54
C4C4BB
E3E3DF

Deuteranopia

474759
1A1A2E
5B5C54
C5C5BC
E4E4DF

Tritanopia

455656
1B2A28
5F5454
C8BCBC
E5DFDF

Achromatopsia

4B4B4B
1C1C1C
575757
C1C1C1
E2E2E2

Shades & Tints Shades & Tints

#454A60

Dark
Light

#1B1738

Dark
Light

#605354

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #454a60;
  --color-2: #1b1738;
  --color-3: #605354;
  --color-4: #c8bfba;
  --color-5: #e5e1de;
}

SCSS

$color-1: #454a60;
$color-2: #1b1738;
$color-3: #605354;
$color-4: #c8bfba;
$color-5: #e5e1de;

TAILWIND

colors: {
  'brand-1': '#454a60',
  'brand-2': '#1b1738',
  'brand-3': '#605354',
  'brand-4': '#c8bfba',
  'brand-5': '#e5e1de',
}

RGB Array

[69, 74, 96], [27, 23, 56], [96, 83, 84], [200, 191, 186], [229, 225, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #454A60, #1B1738, #605354, #C8BFBA, #E5E1DE 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: #454a60; --color-2: #1b1738; --color-3: #605354; --color-4: #c8bfba; --color-5: #e5e1de. 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