← Back to Editor

#260C29 · #3D3F54 · #405D63 · #4D8778 · #65A58D

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#260C29

Royal Purple · Black · Dark Purple

HEX
#260C29
RGB
rgb(38, 12, 41)
HSL
hsl(294, 55%, 10%)
HSB
hsb(294, 71%, 16%)
CMYK
cmyk(7%, 71%, 0%, 84%)
Oklch
oklch(21.1% 0.064 323.4)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#3D3F54

Indigo · DarkSlateGray · Prussian Blue

HEX
#3D3F54
RGB
rgb(61, 63, 84)
HSL
hsl(235, 16%, 28%)
HSB
hsb(235, 27%, 33%)
CMYK
cmyk(27%, 25%, 0%, 67%)
Oklch
oklch(37.5% 0.036 280.3)

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

#405D63

Slate Blue · DarkSlateGray · Mint Ice

HEX
#405D63
RGB
rgb(64, 93, 99)
HSL
hsl(190, 21%, 32%)
HSB
hsb(190, 35%, 39%)
CMYK
cmyk(35%, 6%, 0%, 61%)
Oklch
oklch(45.8% 0.036 211.9)

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

#4D8778

Mineral Blue · SlateGray · Mint Ice

HEX
#4D8778
RGB
rgb(77, 135, 120)
HSL
hsl(164, 27%, 42%)
HSB
hsb(164, 43%, 53%)
CMYK
cmyk(43%, 0%, 11%, 47%)
Oklch
oklch(57.9% 0.066 175.4)

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

#65A58D

Mineral Blue · CadetBlue · Olive Green

HEX
#65A58D
RGB
rgb(101, 165, 141)
HSL
hsl(158, 26%, 52%)
HSB
hsb(158, 39%, 65%)
CMYK
cmyk(39%, 0%, 15%, 35%)
Oklch
oklch(67.2% 0.076 168.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

260C29
0E280B

Analogous

170B28
260C29
280B1C

Triadic

260C29
28250B
0B2825

Split-Comp.

260C29
1C280B
0B2817

Tetradic

260C29
28170B
0E280B
0B1C28

Contrast Matrix WCAG 2.1 Contrast

260C29
3D3F54
405D63
4D8778
65A58D
—
1.7
Fail
2.5
Fail
4.3
AA Large
6.3
AA
1.7
Fail
—
1.5
Fail
2.5
Fail
3.6
AA Large
2.5
Fail
1.5
Fail
—
1.7
Fail
2.5
Fail
4.3
AA Large
2.5
Fail
1.7
Fail
—
1.4
Fail
6.3
AA
3.6
AA Large
2.5
Fail
1.4
Fail
—
White BG
18.0AAA
10.3AAA
7.1AAA
4.2AA Large
2.9Fail
Black BG
1.2Fail
2.0Fail
3.0Fail
5.1AA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B22
3E3E4F
4D4D62
66677C
818193

Deuteranopia

1C1E20
3E3E4E
4B4961
635E7D
7D7894

Tritanopia

251C1B
3D4B4A
416060
507E7F
689798

Achromatopsia

171717
414141
555555
747474
8F8F8F

Shades & Tints Shades & Tints

#260C29

Dark
Light

#3D3F54

Dark
Light

#405D63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #260c29;
  --color-2: #3d3f54;
  --color-3: #405d63;
  --color-4: #4d8778;
  --color-5: #65a58d;
}

SCSS

$color-1: #260c29;
$color-2: #3d3f54;
$color-3: #405d63;
$color-4: #4d8778;
$color-5: #65a58d;

TAILWIND

colors: {
  'brand-1': '#260c29',
  'brand-2': '#3d3f54',
  'brand-3': '#405d63',
  'brand-4': '#4d8778',
  'brand-5': '#65a58d',
}

RGB Array

[38, 12, 41], [61, 63, 84], [64, 93, 99], [77, 135, 120], [101, 165, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #260C29, #3D3F54, #405D63, #4D8778, #65A58D 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: #260c29; --color-2: #3d3f54; --color-3: #405d63; --color-4: #4d8778; --color-5: #65a58d. 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 space-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