← Back to Editor

#383339 · #9C8396 · #EBEAD5 · #A9A1A6 · #D0DFBD

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

#383339

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#383339
RGB
rgb(56, 51, 57)
HSL
hsl(290, 6%, 21%)
HSB
hsb(290, 11%, 22%)
CMYK
cmyk(2%, 11%, 0%, 78%)
Oklch
oklch(32.9% 0.012 320.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#9C8396

Rose Purple · Gray · Violet

HEX
#9C8396
RGB
rgb(156, 131, 150)
HSL
hsl(314, 11%, 56%)
HSB
hsb(314, 16%, 61%)
CMYK
cmyk(0%, 16%, 4%, 39%)
Oklch
oklch(63.9% 0.041 334.5)

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

#EBEAD5

Fresh Green · Beige · Lemon Cream

HEX
#EBEAD5
RGB
rgb(235, 234, 213)
HSL
hsl(57, 35%, 88%)
HSB
hsb(57, 9%, 92%)
CMYK
cmyk(0%, 0%, 9%, 8%)
Oklch
oklch(93.2% 0.028 104.7)

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

#A9A1A6

Ash · DarkGray · Silver Sand

HEX
#A9A1A6
RGB
rgb(169, 161, 166)
HSL
hsl(322, 4%, 65%)
HSB
hsb(322, 5%, 66%)
CMYK
cmyk(0%, 5%, 2%, 34%)
Oklch
oklch(71.7% 0.012 339.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D0DFBD

Willow Green · LightGray · Mint Green

HEX
#D0DFBD
RGB
rgb(208, 223, 189)
HSL
hsl(86, 35%, 81%)
HSB
hsb(86, 15%, 87%)
CMYK
cmyk(7%, 0%, 15%, 13%)
Oklch
oklch(88.3% 0.048 126.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

383339
333932

Analogous

343239
383339
393237

Triadic

383339
393832
323938

Split-Comp.

383339
373932
323934

Tetradic

383339
393432
333932
323739

Contrast Matrix WCAG 2.1 Contrast

383339
9C8396
EBEAD5
A9A1A6
D0DFBD
—
3.6
AA Large
10.1
AAA
4.9
AA
8.8
AAA
3.6
AA Large
—
2.8
Fail
1.4
Fail
2.5
Fail
10.1
AAA
2.8
Fail
—
2.1
Fail
1.2
Fail
4.9
AA
1.4
Fail
2.1
Fail
—
1.8
Fail
8.8
AAA
2.5
Fail
1.2
Fail
1.8
Fail
—
White BG
12.3AAA
3.4AA Large
1.2Fail
2.5Fail
1.4Fail
Black BG
1.7Fail
6.1AA
17.3AAA
8.3AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363638
919191
EBEBDA
A6A5A5
D6D7C5

Deuteranopia

363637
939590
EBEBDB
A6A7A5
D6D5C7

Tritanopia

383636
9B8E8D
EBDEDF
A9A4A4
D1CCCD

Achromatopsia

353535
8D8D8D
E8E8E8
A4A4A4
D7D7D7

Shades & Tints Shades & Tints

#383339

Dark
Light

#9C8396

Dark
Light

#EBEAD5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #383339;
  --color-2: #9c8396;
  --color-3: #ebead5;
  --color-4: #a9a1a6;
  --color-5: #d0dfbd;
}

SCSS

$color-1: #383339;
$color-2: #9c8396;
$color-3: #ebead5;
$color-4: #a9a1a6;
$color-5: #d0dfbd;

TAILWIND

colors: {
  'brand-1': '#383339',
  'brand-2': '#9c8396',
  'brand-3': '#ebead5',
  'brand-4': '#a9a1a6',
  'brand-5': '#d0dfbd',
}

RGB Array

[56, 51, 57], [156, 131, 150], [235, 234, 213], [169, 161, 166], [208, 223, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #383339, #9C8396, #EBEAD5, #A9A1A6, #D0DFBD 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: #383339; --color-2: #9c8396; --color-3: #ebead5; --color-4: #a9a1a6; --color-5: #d0dfbd. 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