← Back to Editor

#0A0A26 · #20132E · #322242 · #401773 · #F2D796

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

#0A0A26

Deep Indigo · Black · Deep Sea Blue

HEX
#0A0A26
RGB
rgb(10, 10, 38)
HSL
hsl(240, 58%, 9%)
HSB
hsb(240, 74%, 15%)
CMYK
cmyk(74%, 74%, 0%, 85%)
Oklch
oklch(16.6% 0.056 278.3)

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

#20132E

Deep Indigo · Black · Dark Purple

HEX
#20132E
RGB
rgb(32, 19, 46)
HSL
hsl(269, 42%, 13%)
HSB
hsb(269, 59%, 18%)
CMYK
cmyk(30%, 59%, 0%, 82%)
Oklch
oklch(21.9% 0.053 304.6)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#322242

Dark Plum · DarkSlateGray · Dark Purple

HEX
#322242
RGB
rgb(50, 34, 66)
HSL
hsl(270, 32%, 20%)
HSB
hsb(270, 48%, 26%)
CMYK
cmyk(24%, 48%, 0%, 74%)
Oklch
oklch(28.7% 0.060 306.0)

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

#401773

Deep Indigo · MidnightBlue · Eggplant

HEX
#401773
RGB
rgb(64, 23, 115)
HSL
hsl(267, 67%, 27%)
HSB
hsb(267, 80%, 45%)
CMYK
cmyk(44%, 80%, 0%, 55%)
Oklch
oklch(32.6% 0.145 297.9)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#F2D796

Goose Yellow · Khaki · Lemon Cream

HEX
#F2D796
RGB
rgb(242, 215, 150)
HSL
hsl(42, 78%, 77%)
HSB
hsb(42, 38%, 95%)
CMYK
cmyk(0%, 11%, 38%, 5%)
Oklch
oklch(88.7% 0.088 87.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0A0A26
24240A

Analogous

0A1724
0A0A26
170A24

Triadic

0A0A26
240A0A
0A240A

Split-Comp.

0A0A26
24170A
17240A

Tetradic

0A0A26
240A17
24240A
0A2417

Contrast Matrix WCAG 2.1 Contrast

0A0A26
20132E
322242
401773
F2D796
—
1.1
Fail
1.3
Fail
1.5
Fail
13.8
AAA
1.1
Fail
—
1.2
Fail
1.3
Fail
12.5
AAA
1.3
Fail
1.2
Fail
—
1.1
Fail
10.3
AAA
1.5
Fail
1.3
Fail
1.1
Fail
—
9.4
AAA
13.8
AAA
12.5
AAA
10.3
AAA
9.4
AAA
—
White BG
19.4AAA
17.6AAA
14.6AAA
13.2AAA
1.4Fail
Black BG
1.1Fail
1.2Fail
1.4Fail
1.6Fail
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A1F
1A1A27
2B2B3A
2E2E5D
E6E6A6

Deuteranopia

0A0A1E
1B1C26
2C2D38
313457
E8EAAA

Tritanopia

0A1A19
1F2221
313433
3E4B47
F1B2B5

Achromatopsia

0D0D0D
1A1A1A
2A2A2A
2E2E2E
D8D8D8

Shades & Tints Shades & Tints

#0A0A26

Dark
Light

#20132E

Dark
Light

#322242

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0a0a26;
  --color-2: #20132e;
  --color-3: #322242;
  --color-4: #401773;
  --color-5: #f2d796;
}

SCSS

$color-1: #0a0a26;
$color-2: #20132e;
$color-3: #322242;
$color-4: #401773;
$color-5: #f2d796;

TAILWIND

colors: {
  'brand-1': '#0a0a26',
  'brand-2': '#20132e',
  'brand-3': '#322242',
  'brand-4': '#401773',
  'brand-5': '#f2d796',
}

RGB Array

[10, 10, 38], [32, 19, 46], [50, 34, 66], [64, 23, 115], [242, 215, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0A0A26, #20132E, #322242, #401773, #F2D796 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: #0a0a26; --color-2: #20132e; --color-3: #322242; --color-4: #401773; --color-5: #f2d796. 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