← Back to Editor

#262D38 · #5C607A · #7C7C80 · #E0D94F · #30302E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#262D38

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#262D38
RGB
rgb(38, 45, 56)
HSL
hsl(217, 19%, 18%)
HSB
hsb(217, 32%, 22%)
CMYK
cmyk(32%, 20%, 0%, 78%)
Oklch
oklch(29.5% 0.022 259.4)

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

#5C607A

Indigo · DimGray · Navy Blue

HEX
#5C607A
RGB
rgb(92, 96, 122)
HSL
hsl(232, 14%, 42%)
HSB
hsb(232, 25%, 48%)
CMYK
cmyk(25%, 21%, 0%, 52%)
Oklch
oklch(49.6% 0.042 277.9)

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

#7C7C80

Ink Gray · Gray · Warm Gray

HEX
#7C7C80
RGB
rgb(124, 124, 128)
HSL
hsl(240, 2%, 49%)
HSB
hsb(240, 3%, 50%)
CMYK
cmyk(3%, 3%, 0%, 50%)
Oklch
oklch(58.8% 0.006 286.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#E0D94F

Autumn Sage · SandyBrown · Sunflower

HEX
#E0D94F
RGB
rgb(224, 217, 79)
HSL
hsl(57, 70%, 59%)
HSB
hsb(57, 65%, 88%)
CMYK
cmyk(0%, 3%, 65%, 12%)
Oklch
oklch(86.6% 0.156 106.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#30302E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#30302E
RGB
rgb(48, 48, 46)
HSL
hsl(60, 2%, 18%)
HSB
hsb(60, 4%, 19%)
CMYK
cmyk(0%, 0%, 4%, 81%)
Oklch
oklch(30.8% 0.004 106.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

262D38
373025

Analogous

253537
262D38
272537

Triadic

262D38
37252C
2C3725

Split-Comp.

262D38
372725
353725

Tetradic

262D38
372535
373025
253727

Contrast Matrix WCAG 2.1 Contrast

262D38
5C607A
7C7C80
E0D94F
30302E
—
2.3
Fail
3.3
AA Large
9.4
AAA
1.0
Fail
2.3
Fail
—
1.5
Fail
4.2
AA Large
2.1
Fail
3.3
AA Large
1.5
Fail
—
2.8
Fail
3.2
AA Large
9.4
AAA
4.2
AA Large
2.8
Fail
—
8.9
AAA
1.0
Fail
2.1
Fail
3.2
AA Large
8.9
AAA
—
White BG
13.9AAA
6.2AA
4.2AA Large
1.5Fail
13.2AAA
Black BG
1.5Fail
3.4AA Large
5.1AA
14.2AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292935
5E5E74
7C7C7F
DDDD70
30302E

Deuteranopia

292835
5E5D72
7C7C7F
DDDE78
30302F

Tritanopia

263333
5C6F6E
7C7E7E
E08B91
302F2F

Achromatopsia

2C2C2C
626262
7C7C7C
CBCBCB
303030

Shades & Tints Shades & Tints

#262D38

Dark
Light

#5C607A

Dark
Light

#7C7C80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #262d38;
  --color-2: #5c607a;
  --color-3: #7c7c80;
  --color-4: #e0d94f;
  --color-5: #30302e;
}

SCSS

$color-1: #262d38;
$color-2: #5c607a;
$color-3: #7c7c80;
$color-4: #e0d94f;
$color-5: #30302e;

TAILWIND

colors: {
  'brand-1': '#262d38',
  'brand-2': '#5c607a',
  'brand-3': '#7c7c80',
  'brand-4': '#e0d94f',
  'brand-5': '#30302e',
}

RGB Array

[38, 45, 56], [92, 96, 122], [124, 124, 128], [224, 217, 79], [48, 48, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #262D38, #5C607A, #7C7C80, #E0D94F, #30302E 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: #262d38; --color-2: #5c607a; --color-3: #7c7c80; --color-4: #e0d94f; --color-5: #30302e. 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