← Back to Editor

#13111E · #2F2E52 · #5B7063 · #86A669 · #D3CB8D

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

#13111E

Deep Indigo · Black · Deep Sea Blue

HEX
#13111E
RGB
rgb(19, 17, 30)
HSL
hsl(249, 28%, 9%)
HSB
hsb(249, 43%, 12%)
CMYK
cmyk(37%, 43%, 0%, 88%)
Oklch
oklch(18.7% 0.026 290.7)

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

#2F2E52

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2F2E52
RGB
rgb(47, 46, 82)
HSL
hsl(242, 28%, 25%)
HSB
hsb(242, 44%, 32%)
CMYK
cmyk(43%, 44%, 0%, 68%)
Oklch
oklch(32.1% 0.063 283.5)

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

#5B7063

Celadon · DimGray · Forest Green

HEX
#5B7063
RGB
rgb(91, 112, 99)
HSL
hsl(143, 10%, 40%)
HSB
hsb(143, 19%, 44%)
CMYK
cmyk(19%, 0%, 12%, 56%)
Oklch
oklch(52.4% 0.032 157.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#86A669

Celadon · Gray · Olive Green

HEX
#86A669
RGB
rgb(134, 166, 105)
HSL
hsl(91, 26%, 53%)
HSB
hsb(91, 37%, 65%)
CMYK
cmyk(19%, 0%, 37%, 35%)
Oklch
oklch(68.6% 0.092 131.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#D3CB8D

Fresh Green · BurlyWood · Sunflower

HEX
#D3CB8D
RGB
rgb(211, 203, 141)
HSL
hsl(53, 44%, 69%)
HSB
hsb(53, 33%, 83%)
CMYK
cmyk(0%, 4%, 33%, 17%)
Oklch
oklch(83.4% 0.081 101.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

13111E
1B1D11

Analogous

11151D
13111E
19111D

Triadic

13111E
1D1211
111D12

Split-Comp.

13111E
1D1911
151D11

Tetradic

13111E
1D1115
1B1D11
111D19

Contrast Matrix WCAG 2.1 Contrast

13111E
2F2E52
5B7063
86A669
D3CB8D
—
1.4
Fail
3.5
AA Large
6.8
AA
11.3
AAA
1.4
Fail
—
2.4
Fail
4.7
AA
7.8
AAA
3.5
AA Large
2.4
Fail
—
1.9
Fail
3.2
AA Large
6.8
AA
4.7
AA
1.9
Fail
—
1.7
Fail
11.3
AAA
7.8
AAA
3.2
AA Large
1.7
Fail
—
White BG
18.6AAA
12.9AAA
5.3AA
2.7Fail
1.7Fail
Black BG
1.1Fail
1.6Fail
3.9AA Large
7.7AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

12121B
2F2F49
646466
949478
D0CF9C

Deuteranopia

12121A
2F2F47
636167
92907B
D0D1A0

Tritanopia

131818
2F4241
5C6969
888386
D3A8AA

Achromatopsia

131313
323232
686868
959595
C6C6C6

Shades & Tints Shades & Tints

#13111E

Dark
Light

#2F2E52

Dark
Light

#5B7063

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #13111e;
  --color-2: #2f2e52;
  --color-3: #5b7063;
  --color-4: #86a669;
  --color-5: #d3cb8d;
}

SCSS

$color-1: #13111e;
$color-2: #2f2e52;
$color-3: #5b7063;
$color-4: #86a669;
$color-5: #d3cb8d;

TAILWIND

colors: {
  'brand-1': '#13111e',
  'brand-2': '#2f2e52',
  'brand-3': '#5b7063',
  'brand-4': '#86a669',
  'brand-5': '#d3cb8d',
}

RGB Array

[19, 17, 30], [47, 46, 82], [91, 112, 99], [134, 166, 105], [211, 203, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #13111E, #2F2E52, #5B7063, #86A669, #D3CB8D 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: #13111e; --color-2: #2f2e52; --color-3: #5b7063; --color-4: #86a669; --color-5: #d3cb8d. 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