← Back to Editor

#2E183D · #4B153D · #BD083B · #907D59 · #D4E0AA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2E183D

Dark Plum · MidnightBlue · Dark Purple

HEX
#2E183D
RGB
rgb(46, 24, 61)
HSL
hsl(276, 44%, 17%)
HSB
hsb(276, 61%, 24%)
CMYK
cmyk(25%, 61%, 0%, 76%)
Oklch
oklch(25.9% 0.071 309.8)

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

#4B153D

Rose Purple · DarkSlateGray · Dark Purple

HEX
#4B153D
RGB
rgb(75, 21, 61)
HSL
hsl(316, 56%, 19%)
HSB
hsb(316, 72%, 29%)
CMYK
cmyk(0%, 72%, 19%, 71%)
Oklch
oklch(30.0% 0.096 339.5)

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

#BD083B

Dark Violet · Crimson · Camellia

HEX
#BD083B
RGB
rgb(189, 8, 59)
HSL
hsl(343, 92%, 39%)
HSB
hsb(343, 96%, 74%)
CMYK
cmyk(0%, 96%, 69%, 26%)
Oklch
oklch(50.9% 0.200 16.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#907D59

Ochre · Gray · Amber Brown

HEX
#907D59
RGB
rgb(144, 125, 89)
HSL
hsl(39, 24%, 46%)
HSB
hsb(39, 38%, 56%)
CMYK
cmyk(0%, 13%, 38%, 44%)
Oklch
oklch(59.8% 0.056 83.1)

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

#D4E0AA

Willow Green · Wheat · Apple Green

HEX
#D4E0AA
RGB
rgb(212, 224, 170)
HSL
hsl(73, 47%, 77%)
HSB
hsb(73, 24%, 88%)
CMYK
cmyk(5%, 0%, 24%, 12%)
Oklch
oklch(88.4% 0.072 118.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E183D
283E18

Analogous

1C183E
2E183D
3E183B

Triadic

2E183D
3E2F18
183E2F

Split-Comp.

2E183D
3B3E18
183E1C

Tetradic

2E183D
3E1C18
283E18
183B3E

Contrast Matrix WCAG 2.1 Contrast

2E183D
4B153D
BD083B
907D59
D4E0AA
—
1.1
Fail
2.5
Fail
4.0
AA Large
11.4
AAA
1.1
Fail
—
2.2
Fail
3.6
AA Large
10.2
AAA
2.5
Fail
2.2
Fail
—
1.6
Fail
4.6
AA
4.0
AA Large
3.6
AA Large
1.6
Fail
—
2.9
Fail
11.4
AAA
10.2
AAA
4.6
AA
2.9
Fail
—
White BG
16.0AAA
14.2AAA
6.4AA
4.0AA Large
1.4Fail
Black BG
1.3Fail
1.5Fail
3.3AA Large
5.3AA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242434
343333
6F6D2F
888862
D9D9B7

Deuteranopia

262732
373B31
79872C
898A64
D9D8BA

Tritanopia

2D2D2B
482C2A
B42523
8F696A
D5C1C4

Achromatopsia

232323
2A2A2A
444444
7F7F7F
D6D6D6

Shades & Tints Shades & Tints

#2E183D

Dark
Light

#4B153D

Dark
Light

#BD083B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e183d;
  --color-2: #4b153d;
  --color-3: #bd083b;
  --color-4: #907d59;
  --color-5: #d4e0aa;
}

SCSS

$color-1: #2e183d;
$color-2: #4b153d;
$color-3: #bd083b;
$color-4: #907d59;
$color-5: #d4e0aa;

TAILWIND

colors: {
  'brand-1': '#2e183d',
  'brand-2': '#4b153d',
  'brand-3': '#bd083b',
  'brand-4': '#907d59',
  'brand-5': '#d4e0aa',
}

RGB Array

[46, 24, 61], [75, 21, 61], [189, 8, 59], [144, 125, 89], [212, 224, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E183D, #4B153D, #BD083B, #907D59, #D4E0AA 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: #2e183d; --color-2: #4b153d; --color-3: #bd083b; --color-4: #907d59; --color-5: #d4e0aa. 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