← Back to Editor

#3D1C33 · #454957 · #57999B · #A5C7A5 · #E2E09A

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

#3D1C33

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3D1C33
RGB
rgb(61, 28, 51)
HSL
hsl(318, 37%, 17%)
HSB
hsb(318, 54%, 24%)
CMYK
cmyk(0%, 54%, 16%, 76%)
Oklch
oklch(28.2% 0.062 339.8)

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

#454957

Indigo · DarkSlateGray · Prussian Blue

HEX
#454957
RGB
rgb(69, 73, 87)
HSL
hsl(227, 12%, 31%)
HSB
hsb(227, 21%, 34%)
CMYK
cmyk(21%, 16%, 0%, 66%)
Oklch
oklch(40.7% 0.024 272.7)

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

#57999B

Slate Blue · CadetBlue · Mint Ice

HEX
#57999B
RGB
rgb(87, 153, 155)
HSL
hsl(182, 28%, 47%)
HSB
hsb(182, 44%, 61%)
CMYK
cmyk(44%, 1%, 0%, 39%)
Oklch
oklch(64.0% 0.068 198.1)

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

#A5C7A5

Celadon · DarkGray · Apple Green

HEX
#A5C7A5
RGB
rgb(165, 199, 165)
HSL
hsl(120, 23%, 71%)
HSB
hsb(120, 17%, 78%)
CMYK
cmyk(17%, 0%, 17%, 22%)
Oklch
oklch(79.5% 0.060 145.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#E2E09A

Fresh Green · Khaki · Sunflower

HEX
#E2E09A
RGB
rgb(226, 224, 154)
HSL
hsl(58, 55%, 75%)
HSB
hsb(58, 32%, 89%)
CMYK
cmyk(0%, 1%, 32%, 11%)
Oklch
oklch(89.2% 0.090 106.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D1C33
1B3B25

Analogous

351B3B
3D1C33
3B1B22

Triadic

3D1C33
323B1B
1B323B

Split-Comp.

3D1C33
223B1B
1B3B35

Tetradic

3D1C33
3B351B
1B3B25
1B223B

Contrast Matrix WCAG 2.1 Contrast

3D1C33
454957
57999B
A5C7A5
E2E09A
—
1.7
Fail
4.6
AA
8.0
AAA
10.9
AAA
1.7
Fail
—
2.7
Fail
4.8
AA
6.6
AA
4.6
AA
2.7
Fail
—
1.8
Fail
2.4
Fail
8.0
AAA
4.8
AA
1.8
Fail
—
1.4
Fail
10.9
AAA
6.6
AA
2.4
Fail
1.4
Fail
—
White BG
14.9AAA
9.0AAA
3.3AA Large
1.9Fail
1.4Fail
Black BG
1.4Fail
2.3Fail
6.4AA
11.3AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2E2D
474754
74749B
B4B4AD
E1E1AB

Deuteranopia

31332C
474653
706B9A
B2AFAF
E1E1AF

Tritanopia

3B2928
455150
5A9A9A
A7B4B5
E2B8BB

Achromatopsia

282828
494949
858585
B9B9B9
D9D9D9

Shades & Tints Shades & Tints

#3D1C33

Dark
Light

#454957

Dark
Light

#57999B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d1c33;
  --color-2: #454957;
  --color-3: #57999b;
  --color-4: #a5c7a5;
  --color-5: #e2e09a;
}

SCSS

$color-1: #3d1c33;
$color-2: #454957;
$color-3: #57999b;
$color-4: #a5c7a5;
$color-5: #e2e09a;

TAILWIND

colors: {
  'brand-1': '#3d1c33',
  'brand-2': '#454957',
  'brand-3': '#57999b',
  'brand-4': '#a5c7a5',
  'brand-5': '#e2e09a',
}

RGB Array

[61, 28, 51], [69, 73, 87], [87, 153, 155], [165, 199, 165], [226, 224, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D1C33, #454957, #57999B, #A5C7A5, #E2E09A is ideal for: 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: #3d1c33; --color-2: #454957; --color-3: #57999b; --color-4: #a5c7a5; --color-5: #e2e09a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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