← Back to Editor

#240C24 · #3C435F · #4A6C76 · #65A3A2 · #687F85

A 5-color palette 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

#240C24

Rose Purple · Black · Dark Purple

HEX
#240C24
RGB
rgb(36, 12, 36)
HSL
hsl(300, 50%, 9%)
HSB
hsb(300, 67%, 14%)
CMYK
cmyk(0%, 67%, 0%, 86%)
Oklch
oklch(20.4% 0.057 327.4)

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

#3C435F

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C435F
RGB
rgb(60, 67, 95)
HSL
hsl(228, 23%, 30%)
HSB
hsb(228, 37%, 37%)
CMYK
cmyk(37%, 29%, 0%, 63%)
Oklch
oklch(38.9% 0.049 273.2)

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

#4A6C76

Slate Blue · DimGray · Mint Ice

HEX
#4A6C76
RGB
rgb(74, 108, 118)
HSL
hsl(194, 23%, 38%)
HSB
hsb(194, 37%, 46%)
CMYK
cmyk(37%, 8%, 0%, 54%)
Oklch
oklch(50.9% 0.042 218.1)

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

#65A3A2

Mineral Blue · CadetBlue · Lake Green

HEX
#65A3A2
RGB
rgb(101, 163, 162)
HSL
hsl(179, 25%, 52%)
HSB
hsb(179, 38%, 64%)
CMYK
cmyk(38%, 0%, 1%, 36%)
Oklch
oklch(67.3% 0.064 194.4)

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

#687F85

Slate Blue · SlateGray · Mint Ice

HEX
#687F85
RGB
rgb(104, 127, 133)
HSL
hsl(192, 12%, 46%)
HSB
hsb(192, 22%, 52%)
CMYK
cmyk(22%, 5%, 0%, 48%)
Oklch
oklch(58.0% 0.028 215.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

240C24
0B220B

Analogous

170B22
240C24
220B17

Triadic

240C24
22220B
0B2222

Split-Comp.

240C24
17220B
0B2217

Tetradic

240C24
22170B
0B220B
0B1722

Contrast Matrix WCAG 2.1 Contrast

240C24
3C435F
4A6C76
65A3A2
687F85
—
1.9
Fail
3.2
AA Large
6.3
AA
4.3
AA Large
1.9
Fail
—
1.7
Fail
3.4
AA Large
2.3
Fail
3.2
AA Large
1.7
Fail
—
2.0
Fail
1.3
Fail
6.3
AA
3.4
AA Large
2.0
Fail
—
1.5
Fail
4.3
AA Large
2.3
Fail
1.3
Fail
1.5
Fail
—
White BG
18.2AAA
9.7AAA
5.7AA
2.9Fail
4.2AA Large
Black BG
1.2Fail
2.2Fail
3.7AA Large
7.3AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1A191E
3F3F58
595974
8080A2
727284

Deuteranopia

1B1D1D
3F3E57
575473
7C78A2
716F83

Tritanopia

231A19
3C5352
4C7271
68A2A2
698282

Achromatopsia

161616
444444
636363
909090
797979

Shades & Tints Shades & Tints

#240C24

Dark
Light

#3C435F

Dark
Light

#4A6C76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #240c24;
  --color-2: #3c435f;
  --color-3: #4a6c76;
  --color-4: #65a3a2;
  --color-5: #687f85;
}

SCSS

$color-1: #240c24;
$color-2: #3c435f;
$color-3: #4a6c76;
$color-4: #65a3a2;
$color-5: #687f85;

TAILWIND

colors: {
  'brand-1': '#240c24',
  'brand-2': '#3c435f',
  'brand-3': '#4a6c76',
  'brand-4': '#65a3a2',
  'brand-5': '#687f85',
}

RGB Array

[36, 12, 36], [60, 67, 95], [74, 108, 118], [101, 163, 162], [104, 127, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #240C24, #3C435F, #4A6C76, #65A3A2, #687F85 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: #240c24; --color-2: #3c435f; --color-3: #4a6c76; --color-4: #65a3a2; --color-5: #687f85. 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