← Back to Editor

#69604F · #4D4543 · #33312E · #210F0A · #543B0A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#69604F

Ochre · DimGray · Amber Brown

HEX
#69604F
RGB
rgb(105, 96, 79)
HSL
hsl(39, 14%, 36%)
HSB
hsb(39, 25%, 41%)
CMYK
cmyk(0%, 9%, 25%, 59%)
Oklch
oklch(49.3% 0.028 83.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#4D4543

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4D4543
RGB
rgb(77, 69, 67)
HSL
hsl(12, 7%, 28%)
HSB
hsb(12, 13%, 30%)
CMYK
cmyk(0%, 10%, 13%, 70%)
Oklch
oklch(39.8% 0.011 34.3)

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

#33312E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#33312E
RGB
rgb(51, 49, 46)
HSL
hsl(36, 5%, 19%)
HSB
hsb(36, 10%, 20%)
CMYK
cmyk(0%, 4%, 10%, 80%)
Oklch
oklch(31.4% 0.006 78.2)

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

#210F0A

Crimson · Black · Deep Berry

HEX
#210F0A
RGB
rgb(33, 15, 10)
HSL
hsl(13, 53%, 8%)
HSB
hsb(13, 70%, 13%)
CMYK
cmyk(0%, 55%, 70%, 87%)
Oklch
oklch(19.3% 0.032 36.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#543B0A

Ochre · DarkOliveGreen · Amber Gold

HEX
#543B0A
RGB
rgb(84, 59, 10)
HSL
hsl(40, 79%, 18%)
HSB
hsb(40, 88%, 33%)
CMYK
cmyk(0%, 30%, 88%, 67%)
Oklch
oklch(37.1% 0.071 79.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69604F
4F5869

Analogous

69534F
69604F
65694F

Triadic

69604F
4F6960
604F69

Split-Comp.

69604F
4F6569
534F69

Tetradic

69604F
4F6953
4F5869
694F65

Contrast Matrix WCAG 2.1 Contrast

69604F
4D4543
33312E
210F0A
543B0A
—
1.5
Fail
2.1
Fail
3.0
Fail
1.7
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
1.1
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.2
Fail
3.0
Fail
2.0
Fail
1.4
Fail
—
1.8
Fail
1.7
Fail
1.1
Fail
1.2
Fail
1.8
Fail
—
White BG
6.2AA
9.3AAA
13.0AAA
18.5AAA
10.5AAA
Black BG
3.4AA Large
2.2Fail
1.6Fail
1.1Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

656553
4A4943
32322F
19190B
494916

Deuteranopia

666654
4A4B44
32322F
1A1C0C
4B4D19

Tritanopia

695657
4D4444
332F2F
200C0C
531F21

Achromatopsia

616161
474747
313131
141414
3D3D3D

Shades & Tints Shades & Tints

#69604F

Dark
Light

#4D4543

Dark
Light

#33312E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69604f;
  --color-2: #4d4543;
  --color-3: #33312e;
  --color-4: #210f0a;
  --color-5: #543b0a;
}

SCSS

$color-1: #69604f;
$color-2: #4d4543;
$color-3: #33312e;
$color-4: #210f0a;
$color-5: #543b0a;

TAILWIND

colors: {
  'brand-1': '#69604f',
  'brand-2': '#4d4543',
  'brand-3': '#33312e',
  'brand-4': '#210f0a',
  'brand-5': '#543b0a',
}

RGB Array

[105, 96, 79], [77, 69, 67], [51, 49, 46], [33, 15, 10], [84, 59, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #69604F, #4D4543, #33312E, #210F0A, #543B0A is ideal for: tech websites, dark mode UIs, game UIs. 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: #69604f; --color-2: #4d4543; --color-3: #33312e; --color-4: #210f0a; --color-5: #543b0a. 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. 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