← Back to Editor

#381B30 · #74113D · #9C7668 · #A8BEA7 · #0D76A3

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

#381B30

Rose Purple · DarkSlateGray · Dark Purple

HEX
#381B30
RGB
rgb(56, 27, 48)
HSL
hsl(317, 35%, 16%)
HSB
hsb(317, 52%, 22%)
CMYK
cmyk(0%, 52%, 14%, 78%)
Oklch
oklch(27.1% 0.056 338.3)

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

#74113D

Dark Violet · Brown · Camellia

HEX
#74113D
RGB
rgb(116, 17, 61)
HSL
hsl(333, 74%, 26%)
HSB
hsb(333, 85%, 45%)
CMYK
cmyk(0%, 85%, 47%, 55%)
Oklch
oklch(37.2% 0.136 0.2)

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

#9C7668

Tangerine · Gray · Warm Sun

HEX
#9C7668
RGB
rgb(156, 118, 104)
HSL
hsl(16, 21%, 51%)
HSB
hsb(16, 33%, 61%)
CMYK
cmyk(0%, 24%, 33%, 39%)
Oklch
oklch(59.9% 0.052 41.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#A8BEA7

Celadon · DarkGray · Apple Green

HEX
#A8BEA7
RGB
rgb(168, 190, 167)
HSL
hsl(117, 15%, 70%)
HSB
hsb(117, 12%, 75%)
CMYK
cmyk(12%, 0%, 12%, 25%)
Oklch
oklch(77.8% 0.040 144.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#0D76A3

Lake Blue · Teal · Mint Ice

HEX
#0D76A3
RGB
rgb(13, 118, 163)
HSL
hsl(198, 85%, 35%)
HSB
hsb(198, 92%, 64%)
CMYK
cmyk(92%, 28%, 0%, 36%)
Oklch
oklch(53.4% 0.110 234.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

381B30
1B3723

Analogous

311B37
381B30
371B21

Triadic

381B30
2F371B
1B2F37

Split-Comp.

381B30
21371B
1B3731

Tetradic

381B30
37311B
1B3723
1B2137

Contrast Matrix WCAG 2.1 Contrast

381B30
74113D
9C7668
A8BEA7
0D76A3
—
1.4
Fail
3.8
AA Large
7.7
AAA
3.0
AA Large
1.4
Fail
—
2.8
Fail
5.6
AA
2.2
Fail
3.8
AA Large
2.8
Fail
—
2.0
Fail
1.3
Fail
7.7
AAA
5.6
AA
2.0
Fail
—
2.6
Fail
3.0
AA Large
2.2
Fail
1.3
Fail
2.6
Fail
—
White BG
15.4AAA
11.1AAA
4.0AA Large
2.0Fail
5.1AA
Black BG
1.4Fail
1.9Fail
5.2AA
10.6AAA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B2B
494832
8C8B6B
B2B2AD
3A3B98

Deuteranopia

2D2F2A
4F5630
8E916C
B0AFAE
342D96

Tritanopia

372726
6F2A28
9A6E6F
A9B1B2
12908E

Achromatopsia

262626
343434
808080
B5B5B5
5C5C5C

Shades & Tints Shades & Tints

#381B30

Dark
Light

#74113D

Dark
Light

#9C7668

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #381b30;
  --color-2: #74113d;
  --color-3: #9c7668;
  --color-4: #a8bea7;
  --color-5: #0d76a3;
}

SCSS

$color-1: #381b30;
$color-2: #74113d;
$color-3: #9c7668;
$color-4: #a8bea7;
$color-5: #0d76a3;

TAILWIND

colors: {
  'brand-1': '#381b30',
  'brand-2': '#74113d',
  'brand-3': '#9c7668',
  'brand-4': '#a8bea7',
  'brand-5': '#0d76a3',
}

RGB Array

[56, 27, 48], [116, 17, 61], [156, 118, 104], [168, 190, 167], [13, 118, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #381B30, #74113D, #9C7668, #A8BEA7, #0D76A3 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: #381b30; --color-2: #74113d; --color-3: #9c7668; --color-4: #a8bea7; --color-5: #0d76a3. 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