← Back to Editor

#38303B · #3E373F · #E0CDAC · #658475 · #344346

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#38303B

Dark Plum · DarkSlateGray · Eggplant

HEX
#38303B
RGB
rgb(56, 48, 59)
HSL
hsl(284, 10%, 21%)
HSB
hsb(284, 19%, 23%)
CMYK
cmyk(5%, 19%, 0%, 77%)
Oklch
oklch(32.2% 0.022 316.8)

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

#3E373F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3E373F
RGB
rgb(62, 55, 63)
HSL
hsl(293, 7%, 23%)
HSB
hsb(293, 13%, 25%)
CMYK
cmyk(2%, 13%, 0%, 75%)
Oklch
oklch(34.7% 0.017 322.0)

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

#E0CDAC

Goose Yellow · Wheat · Peach Orange

HEX
#E0CDAC
RGB
rgb(224, 205, 172)
HSL
hsl(38, 46%, 78%)
HSB
hsb(38, 23%, 88%)
CMYK
cmyk(0%, 8%, 23%, 12%)
Oklch
oklch(85.6% 0.049 81.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#658475

Mineral Blue · Gray · Olive Green

HEX
#658475
RGB
rgb(101, 132, 117)
HSL
hsl(151, 13%, 46%)
HSB
hsb(151, 23%, 52%)
CMYK
cmyk(23%, 0%, 11%, 48%)
Oklch
oklch(58.5% 0.042 163.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#344346

Slate Blue · DarkSlateGray · Peacock Green

HEX
#344346
RGB
rgb(52, 67, 70)
HSL
hsl(190, 15%, 24%)
HSB
hsb(190, 26%, 27%)
CMYK
cmyk(26%, 4%, 0%, 73%)
Oklch
oklch(37.1% 0.020 211.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38303B
333B30

Analogous

33303B
38303B
3B3038

Triadic

38303B
3B3830
303B38

Split-Comp.

38303B
383B30
303B33

Tetradic

38303B
3B3330
333B30
30383B

Contrast Matrix WCAG 2.1 Contrast

38303B
3E373F
E0CDAC
658475
344346
—
1.1
Fail
8.2
AAA
3.1
AA Large
1.2
Fail
1.1
Fail
—
7.4
AAA
2.8
Fail
1.1
Fail
8.2
AAA
7.4
AAA
—
2.6
Fail
6.6
AA
3.1
AA Large
2.8
Fail
2.6
Fail
—
2.5
Fail
1.2
Fail
1.1
Fail
6.6
AA
2.5
Fail
—
White BG
12.7AAA
11.5AAA
1.6Fail
4.1AA Large
10.3AAA
Black BG
1.7Fail
1.8Fail
13.5AAA
5.1AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

353438
3B3B3D
D8D8B4
727379
3A3B45

Deuteranopia

353638
3B3C3D
D9DAB6
716E7A
3A3945

Tritanopia

383636
3E3C3B
DFBABC
677B7C
354545

Achromatopsia

343434
3A3A3A
CFCFCF
797979
3F3F3F

Shades & Tints Shades & Tints

#38303B

Dark
Light

#3E373F

Dark
Light

#E0CDAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38303b;
  --color-2: #3e373f;
  --color-3: #e0cdac;
  --color-4: #658475;
  --color-5: #344346;
}

SCSS

$color-1: #38303b;
$color-2: #3e373f;
$color-3: #e0cdac;
$color-4: #658475;
$color-5: #344346;

TAILWIND

colors: {
  'brand-1': '#38303b',
  'brand-2': '#3e373f',
  'brand-3': '#e0cdac',
  'brand-4': '#658475',
  'brand-5': '#344346',
}

RGB Array

[56, 48, 59], [62, 55, 63], [224, 205, 172], [101, 132, 117], [52, 67, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #38303B, #3E373F, #E0CDAC, #658475, #344346 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #38303b; --color-2: #3e373f; --color-3: #e0cdac; --color-4: #658475; --color-5: #344346. 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 finance, legal, luxury 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