#311A47 + #333666 + #2C596E + #48AB65 + #A2DE33 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#311A47

Dark Plum · MidnightBlue · Dark Purple

HEX

#311A47

RGB

rgb(49, 26, 71)

HSL

hsl(271, 46%, 19%)

HSB

hsb(271, 63%, 28%)

CMYK

cmyk(31%, 63%, 0%, 72%)

Oklch

oklch(27.4% 0.083 305.2)

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

#333666

Indigo · DarkSlateGray · Prussian Blue

HEX

#333666

RGB

rgb(51, 54, 102)

HSL

hsl(236, 33%, 30%)

HSB

hsb(236, 50%, 40%)

CMYK

cmyk(50%, 47%, 0%, 60%)

Oklch

oklch(35.5% 0.082 278.6)

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

#2C596E

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2C596E

RGB

rgb(44, 89, 110)

HSL

hsl(199, 43%, 30%)

HSB

hsb(199, 60%, 43%)

CMYK

cmyk(60%, 19%, 0%, 57%)

Oklch

oklch(44.1% 0.060 230.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#48AB65

Celadon · MediumSeaGreen · Olive Green

HEX

#48AB65

RGB

rgb(72, 171, 101)

HSL

hsl(138, 41%, 48%)

HSB

hsb(138, 58%, 67%)

CMYK

cmyk(58%, 0%, 41%, 33%)

Oklch

oklch(66.5% 0.139 150.5)

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

#A2DE33

Grass Green · GreenYellow · Olive Green

HEX

#A2DE33

RGB

rgb(162, 222, 51)

HSL

hsl(81, 72%, 54%)

HSB

hsb(81, 77%, 87%)

CMYK

cmyk(27%, 0%, 77%, 13%)

Oklch

oklch(83.0% 0.199 127.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

311A47

30471A

Analogous

1B1A47

311A47

471A46

Triadic

311A47

47311A

1A4731

Split-Comp.

311A47

46471A

1A471B

Tetradic

311A47

471B1A

30471A

1A4647

Contrast Matrix WCAG 2.1 Contrast

311A47	333666	2C596E	48AB65	A2DE33
—	1.4 Fail	2.0 Fail	5.3 AA	9.5 AAA
1.4 Fail	—	1.5 Fail	3.9 AA Large	7.0 AAA
2.0 Fail	1.5 Fail	—	2.6 Fail	4.7 AA
5.3 AA	3.9 AA Large	2.6 Fail	—	1.8 Fail
9.5 AAA	7.0 AAA	4.7 AA	1.8 Fail	—

White BG

15.3AAA

11.3AAA

7.6AAA

2.9Fail

1.6Fail

Black BG

1.4Fail

1.9Fail

2.8Fail

7.3AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27273C

34345A

3F4069

737476

BCBD5C

Deuteranopia

282A39

343458

3D3A68

6D667A

B9B466

Tritanopia

303432

33514F

2E6564

4D8386

A57D84

Achromatopsia

262626

3B3B3B

4E4E4E

858585

B9B9B9

Shades & Tints Shades & Tints

#311A47

Dark

Light

#333666

Dark

Light

#2C596E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #311a47;
  --color-2: #333666;
  --color-3: #2c596e;
  --color-4: #48ab65;
  --color-5: #a2de33;
}

SCSS

$color-1: #311a47;
$color-2: #333666;
$color-3: #2c596e;
$color-4: #48ab65;
$color-5: #a2de33;

TAILWIND

colors: {
  'brand-1': '#311a47',
  'brand-2': '#333666',
  'brand-3': '#2c596e',
  'brand-4': '#48ab65',
  'brand-5': '#a2de33',
}

RGB Array

[49, 26, 71], [51, 54, 102], [44, 89, 110], [72, 171, 101], [162, 222, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #311A47, #333666, #2C596E, #48AB65, #A2DE33 is ideal for: tech websites, dark mode UIs, game UIs. 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: #311a47; --color-2: #333666; --color-3: #2c596e; --color-4: #48ab65; --color-5: #a2de33. 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. 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 space-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