← Back to Editor

#381020 · #39213B · #546E75 · #9DB381 · #D1CA8E

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

#381020

Dark Violet · Black · Raspberry

HEX
#381020
RGB
rgb(56, 16, 32)
HSL
hsl(336, 56%, 14%)
HSB
hsb(336, 71%, 22%)
CMYK
cmyk(0%, 71%, 43%, 78%)
Oklch
oklch(24.5% 0.066 358.3)

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

#39213B

Dark Plum · DarkSlateGray · Dark Purple

HEX
#39213B
RGB
rgb(57, 33, 59)
HSL
hsl(295, 28%, 18%)
HSB
hsb(295, 44%, 23%)
CMYK
cmyk(3%, 44%, 0%, 77%)
Oklch
oklch(29.0% 0.056 324.2)

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

#546E75

Slate Blue · DimGray · Mint Ice

HEX
#546E75
RGB
rgb(84, 110, 117)
HSL
hsl(193, 16%, 39%)
HSB
hsb(193, 28%, 46%)
CMYK
cmyk(28%, 6%, 0%, 54%)
Oklch
oklch(52.0% 0.032 216.0)

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

#9DB381

Grass Green · DarkSeaGreen · Olive Green

HEX
#9DB381
RGB
rgb(157, 179, 129)
HSL
hsl(86, 25%, 60%)
HSB
hsb(86, 28%, 70%)
CMYK
cmyk(12%, 0%, 28%, 30%)
Oklch
oklch(73.7% 0.073 127.4)

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

#D1CA8E

Fresh Green · Tan · Sunflower

HEX
#D1CA8E
RGB
rgb(209, 202, 142)
HSL
hsl(54, 42%, 69%)
HSB
hsb(54, 32%, 82%)
CMYK
cmyk(0%, 3%, 32%, 18%)
Oklch
oklch(83.0% 0.079 102.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

381020
103828

Analogous

381034
381020
381410

Triadic

381020
203810
102038

Split-Comp.

381020
103814
103438

Tetradic

381020
343810
103828
141038

Contrast Matrix WCAG 2.1 Contrast

381020
39213B
546E75
9DB381
D1CA8E
—
1.2
Fail
3.1
AA Large
7.3
AAA
9.9
AAA
1.2
Fail
—
2.7
Fail
6.3
AA
8.6
AAA
3.1
AA Large
2.7
Fail
—
2.4
Fail
3.2
AA Large
7.3
AAA
6.3
AA
2.4
Fail
—
1.4
Fail
9.9
AAA
8.6
AAA
3.2
AA Large
1.4
Fail
—
White BG
16.6AAA
14.4AAA
5.4AA
2.3Fail
1.7Fail
Black BG
1.3Fail
1.5Fail
3.9AA Large
9.2AAA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

27261C
2F2E35
5F5F73
A7A78D
CECE9D

Deuteranopia

292C1B
303233
5E5C73
A5A490
CECFA0

Tritanopia

361918
38302F
557272
9E9799
D1A8AB

Achromatopsia

1E1E1E
2B2B2B
676767
A7A7A7
C5C5C5

Shades & Tints Shades & Tints

#381020

Dark
Light

#39213B

Dark
Light

#546E75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #381020;
  --color-2: #39213b;
  --color-3: #546e75;
  --color-4: #9db381;
  --color-5: #d1ca8e;
}

SCSS

$color-1: #381020;
$color-2: #39213b;
$color-3: #546e75;
$color-4: #9db381;
$color-5: #d1ca8e;

TAILWIND

colors: {
  'brand-1': '#381020',
  'brand-2': '#39213b',
  'brand-3': '#546e75',
  'brand-4': '#9db381',
  'brand-5': '#d1ca8e',
}

RGB Array

[56, 16, 32], [57, 33, 59], [84, 110, 117], [157, 179, 129], [209, 202, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #381020, #39213B, #546E75, #9DB381, #D1CA8E 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: #381020; --color-2: #39213b; --color-3: #546e75; --color-4: #9db381; --color-5: #d1ca8e. 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