← Back to Editor

#334747 · #38281A · #706223 · #7A0000 · #DEC894

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

#334747

Slate Blue · DarkSlateGray · Peacock Green

HEX
#334747
RGB
rgb(51, 71, 71)
HSL
hsl(180, 16%, 24%)
HSB
hsb(180, 28%, 28%)
CMYK
cmyk(28%, 0%, 0%, 72%)
Oklch
oklch(38.1% 0.025 196.1)

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

#38281A

Tangerine · DarkSlateGray · Cinnamon

HEX
#38281A
RGB
rgb(56, 40, 26)
HSL
hsl(28, 37%, 16%)
HSB
hsb(28, 54%, 22%)
CMYK
cmyk(0%, 29%, 54%, 78%)
Oklch
oklch(29.2% 0.034 62.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#706223

Ochre · DarkOliveGreen · Honey Gold

HEX
#706223
RGB
rgb(112, 98, 35)
HSL
hsl(49, 52%, 29%)
HSB
hsb(49, 69%, 44%)
CMYK
cmyk(0%, 13%, 69%, 56%)
Oklch
oklch(49.7% 0.084 96.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#7A0000

Vermilion · Maroon · Wine Red

HEX
#7A0000
RGB
rgb(122, 0, 0)
HSL
hsl(0, 100%, 24%)
HSB
hsb(0, 100%, 48%)
CMYK
cmyk(0%, 100%, 100%, 52%)
Oklch
oklch(36.4% 0.149 29.2)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#DEC894

Goose Yellow · BurlyWood · Sunflower

HEX
#DEC894
RGB
rgb(222, 200, 148)
HSL
hsl(42, 53%, 73%)
HSB
hsb(42, 33%, 87%)
CMYK
cmyk(0%, 10%, 33%, 13%)
Oklch
oklch(83.9% 0.072 87.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

334747
473333

Analogous

33473D
334747
333D47

Triadic

334747
473347
474733

Split-Comp.

334747
47333D
473D33

Tetradic

334747
3D3347
473333
3D4733

Contrast Matrix WCAG 2.1 Contrast

334747
38281A
706223
7A0000
DEC894
—
1.4
Fail
1.6
Fail
1.2
Fail
6.0
AA
1.4
Fail
—
2.3
Fail
1.2
Fail
8.6
AAA
1.6
Fail
2.3
Fail
—
1.9
Fail
3.7
AA Large
1.2
Fail
1.2
Fail
1.9
Fail
—
7.0
AAA
6.0
AA
8.6
AAA
3.7
AA Large
7.0
AAA
—
White BG
9.8AAA
14.1AAA
6.1AA
11.5AAA
1.6Fail
Black BG
2.1Fail
1.5Fail
3.5AA Large
1.8Fail
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C47
31311D
6A6A32
454400
D4D4A1

Deuteranopia

3B3947
32331E
6B6C36
4C5500
D6D7A4

Tritanopia

344747
372021
6F3E41
740000
DDABAD

Achromatopsia

414141
2B2B2B
5F5F5F
242424
C9C9C9

Shades & Tints Shades & Tints

#334747

Dark
Light

#38281A

Dark
Light

#706223

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #334747;
  --color-2: #38281a;
  --color-3: #706223;
  --color-4: #7a0000;
  --color-5: #dec894;
}

SCSS

$color-1: #334747;
$color-2: #38281a;
$color-3: #706223;
$color-4: #7a0000;
$color-5: #dec894;

TAILWIND

colors: {
  'brand-1': '#334747',
  'brand-2': '#38281a',
  'brand-3': '#706223',
  'brand-4': '#7a0000',
  'brand-5': '#dec894',
}

RGB Array

[51, 71, 71], [56, 40, 26], [112, 98, 35], [122, 0, 0], [222, 200, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #334747, #38281A, #706223, #7A0000, #DEC894 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: #334747; --color-2: #38281a; --color-3: #706223; --color-4: #7a0000; --color-5: #dec894. 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