← Back to Editor

#3D3838 · #69683A · #D8CD98 · #99893B · #607624

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 LibraryData Visualization

Color Details Color Details

#3D3838

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D3838
RGB
rgb(61, 56, 56)
HSL
hsl(0, 4%, 23%)
HSB
hsb(0, 8%, 24%)
CMYK
cmyk(0%, 8%, 8%, 76%)
Oklch
oklch(34.6% 0.007 17.5)

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

#69683A

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#69683A
RGB
rgb(105, 104, 58)
HSL
hsl(59, 29%, 32%)
HSB
hsb(59, 45%, 41%)
CMYK
cmyk(0%, 1%, 45%, 59%)
Oklch
oklch(50.7% 0.066 107.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D8CD98

Fresh Green · BurlyWood · Sunflower

HEX
#D8CD98
RGB
rgb(216, 205, 152)
HSL
hsl(50, 45%, 72%)
HSB
hsb(50, 30%, 85%)
CMYK
cmyk(0%, 5%, 30%, 15%)
Oklch
oklch(84.4% 0.071 97.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#99893B

Autumn Sage · Sienna · Honey Gold

HEX
#99893B
RGB
rgb(153, 137, 59)
HSL
hsl(50, 44%, 42%)
HSB
hsb(50, 61%, 60%)
CMYK
cmyk(0%, 10%, 61%, 40%)
Oklch
oklch(62.8% 0.100 97.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#607624

Grass Green · DarkOliveGreen · Forest Green

HEX
#607624
RGB
rgb(96, 118, 36)
HSL
hsl(76, 53%, 30%)
HSB
hsb(76, 69%, 46%)
CMYK
cmyk(19%, 0%, 69%, 54%)
Oklch
oklch(53.1% 0.110 123.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D3838
383D3D

Analogous

3D383B
3D3838
3D3B38

Triadic

3D3838
383D38
38383D

Split-Comp.

3D3838
383D3B
383B3D

Tetradic

3D3838
3B3D38
383D3D
3B383D

Contrast Matrix WCAG 2.1 Contrast

3D3838
69683A
D8CD98
99893B
607624
—
2.0
Fail
7.2
AAA
3.3
AA Large
2.3
Fail
2.0
Fail
—
3.6
AA Large
1.6
Fail
1.1
Fail
7.2
AAA
3.6
AA Large
—
2.2
Fail
3.2
AA Large
3.3
AA Large
1.6
Fail
2.2
Fail
—
1.5
Fail
2.3
Fail
1.1
Fail
3.2
AA Large
1.5
Fail
—
White BG
11.5AAA
5.8AA
1.6Fail
3.5AA Large
5.1AA
Black BG
1.8Fail
3.6AA Large
13.1AAA
6.0AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B38
696945
D3D3A5
92924E
6A6A38

Deuteranopia

3B3C38
696948
D4D5A8
939452
68673D

Tritanopia

3D3838
694E50
D7AFB1
985D60
61484B

Achromatopsia

393939
636363
CACACA
858585
666666

Shades & Tints Shades & Tints

#3D3838

Dark
Light

#69683A

Dark
Light

#D8CD98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d3838;
  --color-2: #69683a;
  --color-3: #d8cd98;
  --color-4: #99893b;
  --color-5: #607624;
}

SCSS

$color-1: #3d3838;
$color-2: #69683a;
$color-3: #d8cd98;
$color-4: #99893b;
$color-5: #607624;

TAILWIND

colors: {
  'brand-1': '#3d3838',
  'brand-2': '#69683a',
  'brand-3': '#d8cd98',
  'brand-4': '#99893b',
  'brand-5': '#607624',
}

RGB Array

[61, 56, 56], [105, 104, 58], [216, 205, 152], [153, 137, 59], [96, 118, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D3838, #69683A, #D8CD98, #99893B, #607624 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: #3d3838; --color-2: #69683a; --color-3: #d8cd98; --color-4: #99893b; --color-5: #607624. 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