← Back to Editor

#3F3B47 · #0C0D0E · #ECB118 · #FF0C47 · #666670

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

#3F3B47

Deep Indigo · DarkSlateGray · Dark Stone

HEX
#3F3B47
RGB
rgb(63, 59, 71)
HSL
hsl(260, 9%, 25%)
HSB
hsb(260, 17%, 28%)
CMYK
cmyk(11%, 17%, 0%, 72%)
Oklch
oklch(36.1% 0.021 300.6)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#0C0D0E

Indigo · Black · Jet Black

HEX
#0C0D0E
RGB
rgb(12, 13, 14)
HSL
hsl(210, 8%, 5%)
HSB
hsb(210, 14%, 5%)
CMYK
cmyk(14%, 7%, 0%, 95%)
Oklch
oklch(15.8% 0.003 248.0)

Traditional「Indigo」· Paint「Jet Black」· Creative Midnight Shadow

#ECB118

Ginger · GoldenRod · Sunflower

HEX
#ECB118
RGB
rgb(236, 177, 24)
HSL
hsl(43, 85%, 51%)
HSB
hsb(43, 90%, 93%)
CMYK
cmyk(0%, 25%, 90%, 7%)
Oklch
oklch(79.4% 0.159 83.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FF0C47

Vermilion · Crimson · Passion Red

HEX
#FF0C47
RGB
rgb(255, 12, 71)
HSL
hsl(345, 100%, 52%)
HSB
hsb(345, 95%, 100%)
CMYK
cmyk(0%, 95%, 72%, 0%)
Oklch
oklch(63.5% 0.252 19.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#666670

Ink Gray · DimGray · Warm Gray

HEX
#666670
RGB
rgb(102, 102, 112)
HSL
hsl(240, 5%, 42%)
HSB
hsb(240, 9%, 44%)
CMYK
cmyk(9%, 9%, 0%, 56%)
Oklch
oklch(51.4% 0.016 285.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F3B47
42453A

Analogous

3A3C45
3F3B47
443A45

Triadic

3F3B47
453E3A
3A453E

Split-Comp.

3F3B47
45443A
3C453A

Tetradic

3F3B47
453A3C
42453A
3A4544

Contrast Matrix WCAG 2.1 Contrast

3F3B47
0C0D0E
ECB118
FF0C47
666670
—
1.8
Fail
5.6
AA
2.8
Fail
1.9
Fail
1.8
Fail
—
10.1
AAA
5.0
AA
3.4
AA Large
5.6
AA
10.1
AAA
—
2.0
Fail
2.9
Fail
2.8
Fail
5.0
AA
2.0
Fail
—
1.5
Fail
1.9
Fail
3.4
AA Large
2.9
Fail
1.5
Fail
—
White BG
10.9AAA
19.5AAA
1.9Fail
3.9AA Large
5.7AA
Black BG
1.9Fail
1.1Fail
10.9AAA
5.4AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D44
0C0C0E
D2D23D
969439
66666E

Deuteranopia

3E3E43
0C0C0E
D6DA46
A4B635
66666D

Tritanopia

3F4241
0C0E0E
E95A61
F32D2B
666C6B

Achromatopsia

3E3E3E
0D0D0D
B1B1B1
5B5B5B
676767

Shades & Tints Shades & Tints

#3F3B47

Dark
Light

#0C0D0E

Dark
Light

#ECB118

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f3b47;
  --color-2: #0c0d0e;
  --color-3: #ecb118;
  --color-4: #ff0c47;
  --color-5: #666670;
}

SCSS

$color-1: #3f3b47;
$color-2: #0c0d0e;
$color-3: #ecb118;
$color-4: #ff0c47;
$color-5: #666670;

TAILWIND

colors: {
  'brand-1': '#3f3b47',
  'brand-2': '#0c0d0e',
  'brand-3': '#ecb118',
  'brand-4': '#ff0c47',
  'brand-5': '#666670',
}

RGB Array

[63, 59, 71], [12, 13, 14], [236, 177, 24], [255, 12, 71], [102, 102, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F3B47, #0C0D0E, #ECB118, #FF0C47, #666670 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3f3b47; --color-2: #0c0d0e; --color-3: #ecb118; --color-4: #ff0c47; --color-5: #666670. 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 tech, SaaS, healthcare, eco industries. 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