← Back to Editor

#281E32 · #321E46 · #FFDB78 · #461E46 · #321E32

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

#281E32

Dark Plum · DarkSlateGray · Dark Purple

HEX
#281E32
RGB
rgb(40, 30, 50)
HSL
hsl(270, 25%, 16%)
HSB
hsb(270, 40%, 20%)
CMYK
cmyk(20%, 40%, 0%, 80%)
Oklch
oklch(25.6% 0.039 306.7)

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

#321E46

Dark Plum · MidnightBlue · Dark Purple

HEX
#321E46
RGB
rgb(50, 30, 70)
HSL
hsl(270, 40%, 20%)
HSB
hsb(270, 57%, 27%)
CMYK
cmyk(29%, 57%, 0%, 73%)
Oklch
oklch(28.2% 0.074 305.2)

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

#FFDB78

Goose Yellow · Khaki · Sunflower

HEX
#FFDB78
RGB
rgb(255, 219, 120)
HSL
hsl(44, 100%, 74%)
HSB
hsb(44, 53%, 100%)
CMYK
cmyk(0%, 14%, 53%, 0%)
Oklch
oklch(90.2% 0.125 89.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#461E46

Rose Purple · DarkSlateGray · Dark Purple

HEX
#461E46
RGB
rgb(70, 30, 70)
HSL
hsl(300, 40%, 20%)
HSB
hsb(300, 57%, 27%)
CMYK
cmyk(0%, 57%, 0%, 73%)
Oklch
oklch(31.0% 0.085 327.4)

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

#321E32

Rose Purple · DarkSlateGray · Dark Purple

HEX
#321E32
RGB
rgb(50, 30, 50)
HSL
hsl(300, 25%, 16%)
HSB
hsb(300, 40%, 20%)
CMYK
cmyk(0%, 40%, 0%, 80%)
Oklch
oklch(26.9% 0.046 326.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281E32
29331F

Analogous

1F1F33
281E32
331F33

Triadic

281E32
33291F
1F3329

Split-Comp.

281E32
33331F
1F331F

Tetradic

281E32
331F1F
29331F
1F3333

Contrast Matrix WCAG 2.1 Contrast

281E32
321E46
FFDB78
461E46
321E32
—
1.1
Fail
11.8
AAA
1.2
Fail
1.0
Fail
1.1
Fail
—
11.1
AAA
1.1
Fail
1.0
Fail
11.8
AAA
11.1
AAA
—
10.2
AAA
11.4
AAA
1.2
Fail
1.1
Fail
10.2
AAA
—
1.1
Fail
1.0
Fail
1.0
Fail
11.4
AAA
1.1
Fail
—
White BG
15.9AAA
14.9AAA
1.3Fail
13.7AAA
15.4AAA
Black BG
1.3Fail
1.4Fail
15.7AAA
1.5Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

24242D
29293C
EFEF90
35343C
29292D

Deuteranopia

24252C
2B2C3A
F2F496
373A3A
2B2C2C

Tritanopia

282929
313533
FDA3A7
443533
312929

Achromatopsia

232323
292929
DADADA
2F2F2F
262626

Shades & Tints Shades & Tints

#281E32

Dark
Light

#321E46

Dark
Light

#FFDB78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281e32;
  --color-2: #321e46;
  --color-3: #ffdb78;
  --color-4: #461e46;
  --color-5: #321e32;
}

SCSS

$color-1: #281e32;
$color-2: #321e46;
$color-3: #ffdb78;
$color-4: #461e46;
$color-5: #321e32;

TAILWIND

colors: {
  'brand-1': '#281e32',
  'brand-2': '#321e46',
  'brand-3': '#ffdb78',
  'brand-4': '#461e46',
  'brand-5': '#321e32',
}

RGB Array

[40, 30, 50], [50, 30, 70], [255, 219, 120], [70, 30, 70], [50, 30, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281E32, #321E46, #FFDB78, #461E46, #321E32 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: #281e32; --color-2: #321e46; --color-3: #ffdb78; --color-4: #461e46; --color-5: #321e32. 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