#4D213B + #57596E + #508761 + #94B538 + #D15F2E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4D213B

Rose Purple · DarkSlateGray · Raspberry

HEX

#4D213B

RGB

rgb(77, 33, 59)

HSL

hsl(325, 40%, 22%)

HSB

hsb(325, 57%, 30%)

CMYK

cmyk(0%, 57%, 23%, 70%)

Oklch

oklch(32.0% 0.075 345.7)

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

#57596E

Indigo · DimGray · Prussian Blue

HEX

#57596E

RGB

rgb(87, 89, 110)

HSL

hsl(235, 12%, 39%)

HSB

hsb(235, 21%, 43%)

CMYK

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

Oklch

oklch(47.0% 0.034 280.7)

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

#508761

Celadon · SeaGreen · Olive Green

HEX

#508761

RGB

rgb(80, 135, 97)

HSL

hsl(139, 26%, 42%)

HSB

hsb(139, 41%, 53%)

CMYK

cmyk(41%, 0%, 28%, 47%)

Oklch

oklch(57.4% 0.083 153.0)

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

#94B538

Grass Green · DarkGoldenRod · Olive Green

HEX

#94B538

RGB

rgb(148, 181, 56)

HSL

hsl(76, 53%, 46%)

HSB

hsb(76, 69%, 71%)

CMYK

cmyk(18%, 0%, 69%, 29%)

Oklch

oklch(72.5% 0.154 123.1)

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

#D15F2E

Tangerine · Chocolate · Amber Brown

HEX

#D15F2E

RGB

rgb(209, 95, 46)

HSL

hsl(18, 64%, 50%)

HSB

hsb(18, 78%, 82%)

CMYK

cmyk(0%, 55%, 78%, 18%)

Oklch

oklch(61.9% 0.157 41.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D213B

224F34

Analogous

4B224F

4D213B

4F2225

Triadic

4D213B

3C4F22

223C4F

Split-Comp.

4D213B

254F22

224F4B

Tetradic

4D213B

4F4B22

224F34

22254F

Contrast Matrix WCAG 2.1 Contrast

4D213B	57596E	508761	94B538	D15F2E
—	1.9 Fail	3.1 AA Large	5.6 AA	3.4 AA Large
1.9 Fail	—	1.6 Fail	2.9 Fail	1.8 Fail
3.1 AA Large	1.6 Fail	—	1.8 Fail	1.1 Fail
5.6 AA	2.9 Fail	1.8 Fail	—	1.7 Fail
3.4 AA Large	1.8 Fail	1.1 Fail	1.7 Fail	—

White BG

13.2AAA

6.9AA

4.2AA Large

2.4Fail

3.9AA Large

Black BG

1.6Fail

3.1AA Large

5.0AA

8.9AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A35

585869

68686A

A2A356

A09F3A

Deuteranopia

3D4033

585868

65616C

A09E5E

A6AF3D

Tritanopia

4B302F

576564

537173

966E73

CB4345

Achromatopsia

313131

5B5B5B

727272

9D9D9D

7C7C7C

Shades & Tints Shades & Tints

#4D213B

Dark

Light

#57596E

Dark

Light

#508761

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d213b;
  --color-2: #57596e;
  --color-3: #508761;
  --color-4: #94b538;
  --color-5: #d15f2e;
}

SCSS

$color-1: #4d213b;
$color-2: #57596e;
$color-3: #508761;
$color-4: #94b538;
$color-5: #d15f2e;

TAILWIND

colors: {
  'brand-1': '#4d213b',
  'brand-2': '#57596e',
  'brand-3': '#508761',
  'brand-4': '#94b538',
  'brand-5': '#d15f2e',
}

RGB Array

[77, 33, 59], [87, 89, 110], [80, 135, 97], [148, 181, 56], [209, 95, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D213B, #57596E, #508761, #94B538, #D15F2E 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: #4d213b; --color-2: #57596e; --color-3: #508761; --color-4: #94b538; --color-5: #d15f2e. 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 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