← Back to Editor

#622D2C · #35251F · #404D3E · #776B3F · #B39575

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#622D2C

Crimson · DarkOliveGreen · Wine Red

HEX
#622D2C
RGB
rgb(98, 45, 44)
HSL
hsl(1, 38%, 28%)
HSB
hsb(1, 55%, 38%)
CMYK
cmyk(0%, 54%, 55%, 62%)
Oklch
oklch(36.9% 0.077 22.7)

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

#35251F

Tangerine · DarkSlateGray · Cinnamon

HEX
#35251F
RGB
rgb(53, 37, 31)
HSL
hsl(16, 26%, 16%)
HSB
hsb(16, 42%, 21%)
CMYK
cmyk(0%, 30%, 42%, 79%)
Oklch
oklch(28.2% 0.027 41.5)

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

#404D3E

Celadon · DarkSlateGray · Forest Green

HEX
#404D3E
RGB
rgb(64, 77, 62)
HSL
hsl(112, 11%, 27%)
HSB
hsb(112, 19%, 30%)
CMYK
cmyk(17%, 0%, 19%, 70%)
Oklch
oklch(40.4% 0.030 141.4)

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

#776B3F

Ochre · DarkOliveGreen · Honey Gold

HEX
#776B3F
RGB
rgb(119, 107, 63)
HSL
hsl(47, 31%, 36%)
HSB
hsb(47, 47%, 47%)
CMYK
cmyk(0%, 10%, 47%, 53%)
Oklch
oklch(52.8% 0.064 94.6)

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

#B39575

Ginger · Tan · Warm Sun

HEX
#B39575
RGB
rgb(179, 149, 117)
HSL
hsl(31, 29%, 58%)
HSB
hsb(31, 35%, 70%)
CMYK
cmyk(0%, 17%, 35%, 30%)
Oklch
oklch(68.9% 0.057 68.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

622D2C
2C6263

Analogous

632C46
622D2C
63482C

Triadic

622D2C
2C632D
2D2C63

Split-Comp.

622D2C
2C6348
2C4663

Tetradic

622D2C
46632C
2C6263
482C63

Contrast Matrix WCAG 2.1 Contrast

622D2C
35251F
404D3E
776B3F
B39575
—
1.3
Fail
1.2
Fail
2.1
Fail
3.9
AA Large
1.3
Fail
—
1.6
Fail
2.8
Fail
5.2
AA
1.2
Fail
1.6
Fail
—
1.7
Fail
3.2
AA Large
2.1
Fail
2.8
Fail
1.7
Fail
—
1.9
Fail
3.9
AA Large
5.2
AA
3.2
AA Large
1.9
Fail
—
White BG
10.9AAA
14.6AAA
8.9AAA
5.3AA
2.8Fail
Black BG
1.9Fail
1.4Fail
2.3Fail
4.0AA Large
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B2C
2E2E20
464642
72724A
A6A67D

Deuteranopia

4E522C
2F3021
454443
73734C
A8AA7F

Tritanopia

5F2C2C
342222
414445
765254
B18384

Achromatopsia

3D3D3D
292929
474747
6A6A6A
9A9A9A

Shades & Tints Shades & Tints

#622D2C

Dark
Light

#35251F

Dark
Light

#404D3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #622d2c;
  --color-2: #35251f;
  --color-3: #404d3e;
  --color-4: #776b3f;
  --color-5: #b39575;
}

SCSS

$color-1: #622d2c;
$color-2: #35251f;
$color-3: #404d3e;
$color-4: #776b3f;
$color-5: #b39575;

TAILWIND

colors: {
  'brand-1': '#622d2c',
  'brand-2': '#35251f',
  'brand-3': '#404d3e',
  'brand-4': '#776b3f',
  'brand-5': '#b39575',
}

RGB Array

[98, 45, 44], [53, 37, 31], [64, 77, 62], [119, 107, 63], [179, 149, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #622D2C, #35251F, #404D3E, #776B3F, #B39575 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: #622d2c; --color-2: #35251f; --color-3: #404d3e; --color-4: #776b3f; --color-5: #b39575. 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