← Back to Editor

#393146 · #508387 · #829883 · #B6AF83 · #DFD095

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

#393146

Deep Indigo · DarkSlateGray · Eggplant

HEX
#393146
RGB
rgb(57, 49, 70)
HSL
hsl(263, 18%, 23%)
HSB
hsb(263, 30%, 27%)
CMYK
cmyk(19%, 30%, 0%, 73%)
Oklch
oklch(33.1% 0.038 301.8)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#508387

Slate Blue · SlateGray · Mint Ice

HEX
#508387
RGB
rgb(80, 131, 135)
HSL
hsl(184, 26%, 42%)
HSB
hsb(184, 41%, 53%)
CMYK
cmyk(41%, 3%, 0%, 47%)
Oklch
oklch(57.6% 0.055 202.1)

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

#829883

Celadon · Gray · Olive Green

HEX
#829883
RGB
rgb(130, 152, 131)
HSL
hsl(123, 10%, 55%)
HSB
hsb(123, 14%, 60%)
CMYK
cmyk(14%, 0%, 14%, 40%)
Oklch
oklch(65.6% 0.040 146.3)

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

#B6AF83

Fresh Green · Tan · Sunflower

HEX
#B6AF83
RGB
rgb(182, 175, 131)
HSL
hsl(52, 26%, 61%)
HSB
hsb(52, 28%, 71%)
CMYK
cmyk(0%, 4%, 28%, 29%)
Oklch
oklch(74.9% 0.060 100.1)

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

#DFD095

Goose Yellow · BurlyWood · Sunflower

HEX
#DFD095
RGB
rgb(223, 208, 149)
HSL
hsl(48, 54%, 73%)
HSB
hsb(48, 33%, 87%)
CMYK
cmyk(0%, 7%, 33%, 13%)
Oklch
oklch(85.6% 0.078 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

393146
3D4530

Analogous

303345
393146
433045

Triadic

393146
453830
304538

Split-Comp.

393146
454330
334530

Tetradic

393146
453033
3D4530
304543

Contrast Matrix WCAG 2.1 Contrast

393146
508387
829883
B6AF83
DFD095
—
2.9
Fail
4.0
AA Large
5.6
AA
8.0
AAA
2.9
Fail
—
1.4
Fail
1.9
Fail
2.8
Fail
4.0
AA Large
1.4
Fail
—
1.4
Fail
2.0
Fail
5.6
AA
1.9
Fail
1.4
Fail
—
1.4
Fail
8.0
AAA
2.8
Fail
2.0
Fail
1.4
Fail
—
White BG
12.3AAA
4.3AA Large
3.1AA Large
2.2Fail
1.5Fail
Black BG
1.7Fail
4.9AA
6.8AA
9.4AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363541
666786
8C8C88
B3B38E
D9D8A3

Deuteranopia

363740
635F86
8A8989
B3B490
D9DBA7

Tritanopia

393D3C
538585
838C8D
B69698
DEAFB1

Achromatopsia

363636
747474
8F8F8F
ACACAC
CECECE

Shades & Tints Shades & Tints

#393146

Dark
Light

#508387

Dark
Light

#829883

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #393146;
  --color-2: #508387;
  --color-3: #829883;
  --color-4: #b6af83;
  --color-5: #dfd095;
}

SCSS

$color-1: #393146;
$color-2: #508387;
$color-3: #829883;
$color-4: #b6af83;
$color-5: #dfd095;

TAILWIND

colors: {
  'brand-1': '#393146',
  'brand-2': '#508387',
  'brand-3': '#829883',
  'brand-4': '#b6af83',
  'brand-5': '#dfd095',
}

RGB Array

[57, 49, 70], [80, 131, 135], [130, 152, 131], [182, 175, 131], [223, 208, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #393146, #508387, #829883, #B6AF83, #DFD095 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #393146; --color-2: #508387; --color-3: #829883; --color-4: #b6af83; --color-5: #dfd095. 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. Restrained colors convey professionalism and trust. 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