← Back to Editor

#020035 · #2A2B45 · #535555 · #7B8065 · #A3AA75

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#020035

Deep Indigo · Black · Deep Sea Blue

HEX
#020035
RGB
rgb(2, 0, 53)
HSL
hsl(242, 100%, 10%)
HSB
hsb(242, 100%, 21%)
CMYK
cmyk(96%, 100%, 0%, 79%)
Oklch
oklch(15.1% 0.101 267.6)

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

#2A2B45

Indigo · DarkSlateGray · Prussian Blue

HEX
#2A2B45
RGB
rgb(42, 43, 69)
HSL
hsl(238, 24%, 22%)
HSB
hsb(238, 39%, 27%)
CMYK
cmyk(39%, 38%, 0%, 73%)
Oklch
oklch(30.1% 0.047 281.5)

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

#535555

Ink Gray · DimGray · Charcoal

HEX
#535555
RGB
rgb(83, 85, 85)
HSL
hsl(180, 1%, 33%)
HSB
hsb(180, 2%, 33%)
CMYK
cmyk(2%, 0%, 0%, 67%)
Oklch
oklch(44.8% 0.003 197.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7B8065

Grass Green · Gray · Olive Green

HEX
#7B8065
RGB
rgb(123, 128, 101)
HSL
hsl(71, 12%, 45%)
HSB
hsb(71, 21%, 50%)
CMYK
cmyk(4%, 0%, 21%, 50%)
Oklch
oklch(58.8% 0.040 116.2)

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

#A3AA75

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A3AA75
RGB
rgb(163, 170, 117)
HSL
hsl(68, 24%, 56%)
HSB
hsb(68, 31%, 67%)
CMYK
cmyk(4%, 0%, 31%, 33%)
Oklch
oklch(71.9% 0.073 114.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020035
313300

Analogous

001833
020035
1B0033

Triadic

020035
330200
003302

Split-Comp.

020035
331B00
183300

Tetradic

020035
330018
313300
00331B

Contrast Matrix WCAG 2.1 Contrast

020035
2A2B45
535555
7B8065
A3AA75
—
1.5
Fail
2.7
Fail
4.9
AA
8.1
AAA
1.5
Fail
—
1.8
Fail
3.3
AA Large
5.6
AA
2.7
Fail
1.8
Fail
—
1.8
Fail
3.1
AA Large
4.9
AA
3.3
AA Large
1.8
Fail
—
1.7
Fail
8.1
AAA
5.6
AA
3.1
AA Large
1.7
Fail
—
White BG
19.9AAA
13.7AAA
7.5AAA
4.1AA Large
2.5Fail
Black BG
1.1Fail
1.5Fail
2.8Fail
5.1AA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

010128
2A2A3F
545455
7D7D6C
A6A682

Deuteranopia

010125
2A2A3D
545455
7D7D6D
A6A585

Tritanopia

021E1C
2A3A39
535555
7B7172
A38C8E

Achromatopsia

070707
2E2E2E
545454
7B7B7B
A2A2A2

Shades & Tints Shades & Tints

#020035

Dark
Light

#2A2B45

Dark
Light

#535555

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020035;
  --color-2: #2a2b45;
  --color-3: #535555;
  --color-4: #7b8065;
  --color-5: #a3aa75;
}

SCSS

$color-1: #020035;
$color-2: #2a2b45;
$color-3: #535555;
$color-4: #7b8065;
$color-5: #a3aa75;

TAILWIND

colors: {
  'brand-1': '#020035',
  'brand-2': '#2a2b45',
  'brand-3': '#535555',
  'brand-4': '#7b8065',
  'brand-5': '#a3aa75',
}

RGB Array

[2, 0, 53], [42, 43, 69], [83, 85, 85], [123, 128, 101], [163, 170, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #020035, #2A2B45, #535555, #7B8065, #A3AA75 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: #020035; --color-2: #2a2b45; --color-3: #535555; --color-4: #7b8065; --color-5: #a3aa75. 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