← Back to Editor

#675E59 · #413624 · #A9A196 · #21221D · #7F7F73

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

#675E59

Ink Gray · DimGray · Charcoal

HEX
#675E59
RGB
rgb(103, 94, 89)
HSL
hsl(21, 7%, 38%)
HSB
hsb(21, 14%, 40%)
CMYK
cmyk(0%, 9%, 14%, 60%)
Oklch
oklch(48.9% 0.014 51.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#413624

Ochre · DarkSlateGray · Cinnamon

HEX
#413624
RGB
rgb(65, 54, 36)
HSL
hsl(37, 29%, 20%)
HSB
hsb(37, 45%, 25%)
CMYK
cmyk(0%, 17%, 45%, 75%)
Oklch
oklch(34.0% 0.033 79.6)

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

#A9A196

Ginger · DarkGray · Warm Sun

HEX
#A9A196
RGB
rgb(169, 161, 150)
HSL
hsl(35, 10%, 63%)
HSB
hsb(35, 11%, 66%)
CMYK
cmyk(0%, 5%, 11%, 34%)
Oklch
oklch(71.3% 0.018 76.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#21221D

Grass Green · Black · Dark Stone

HEX
#21221D
RGB
rgb(33, 34, 29)
HSL
hsl(72, 8%, 12%)
HSB
hsb(72, 15%, 13%)
CMYK
cmyk(3%, 0%, 15%, 87%)
Oklch
oklch(24.9% 0.009 116.3)

Traditional「Grass Green」· Paint「Dark Stone」· Creative Midnight Shadow

#7F7F73

Ink Gray · Gray · Warm Gray

HEX
#7F7F73
RGB
rgb(127, 127, 115)
HSL
hsl(60, 5%, 47%)
HSB
hsb(60, 9%, 50%)
CMYK
cmyk(0%, 0%, 9%, 50%)
Oklch
oklch(59.3% 0.018 106.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

675E59
5A6368

Analogous

685A5C
675E59
68665A

Triadic

675E59
5A685F
5F5A68

Split-Comp.

675E59
5A6866
5A5C68

Tetradic

675E59
5C685A
5A6368
665A68

Contrast Matrix WCAG 2.1 Contrast

675E59
413624
A9A196
21221D
7F7F73
—
1.9
Fail
2.5
Fail
2.5
Fail
1.6
Fail
1.9
Fail
—
4.6
AA
1.4
Fail
2.9
Fail
2.5
Fail
4.6
AA
—
6.3
AA
1.6
Fail
2.5
Fail
1.4
Fail
6.3
AA
—
4.0
AA Large
1.6
Fail
2.9
Fail
1.6
Fail
4.0
AA Large
—
White BG
6.3AA
11.8AAA
2.6Fail
16.0AAA
4.0AA Large
Black BG
3.3AA Large
1.8Fail
8.2AAA
1.3Fail
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

63635A
3C3C28
A6A599
21211E
7F7F76

Deuteranopia

64645B
3D3E29
A6A799
21211E
7F7F77

Tritanopia

675B5B
402C2D
A99B9B
211F1F
7F7879

Achromatopsia

606060
373737
A2A2A2
212121
7E7E7E

Shades & Tints Shades & Tints

#675E59

Dark
Light

#413624

Dark
Light

#A9A196

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #675e59;
  --color-2: #413624;
  --color-3: #a9a196;
  --color-4: #21221d;
  --color-5: #7f7f73;
}

SCSS

$color-1: #675e59;
$color-2: #413624;
$color-3: #a9a196;
$color-4: #21221d;
$color-5: #7f7f73;

TAILWIND

colors: {
  'brand-1': '#675e59',
  'brand-2': '#413624',
  'brand-3': '#a9a196',
  'brand-4': '#21221d',
  'brand-5': '#7f7f73',
}

RGB Array

[103, 94, 89], [65, 54, 36], [169, 161, 150], [33, 34, 29], [127, 127, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #675E59, #413624, #A9A196, #21221D, #7F7F73 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: #675e59; --color-2: #413624; --color-3: #a9a196; --color-4: #21221d; --color-5: #7f7f73. 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