← Back to Editor

#696746 · #3B473D · #3D3E42 · #CCBFA1 · #7A5C4E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#696746

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#696746
RGB
rgb(105, 103, 70)
HSL
hsl(57, 20%, 34%)
HSB
hsb(57, 33%, 41%)
CMYK
cmyk(0%, 2%, 33%, 59%)
Oklch
oklch(50.7% 0.049 105.1)

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

#3B473D

Celadon · DarkSlateGray · Dark Stone

HEX
#3B473D
RGB
rgb(59, 71, 61)
HSL
hsl(130, 9%, 25%)
HSB
hsb(130, 17%, 28%)
CMYK
cmyk(17%, 0%, 14%, 72%)
Oklch
oklch(38.4% 0.023 150.0)

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

#3D3E42

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D3E42
RGB
rgb(61, 62, 66)
HSL
hsl(228, 4%, 25%)
HSB
hsb(228, 8%, 26%)
CMYK
cmyk(8%, 6%, 0%, 74%)
Oklch
oklch(36.4% 0.007 274.8)

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

#CCBFA1

Goose Yellow · Tan · Sunflower

HEX
#CCBFA1
RGB
rgb(204, 191, 161)
HSL
hsl(42, 30%, 72%)
HSB
hsb(42, 21%, 80%)
CMYK
cmyk(0%, 6%, 21%, 20%)
Oklch
oklch(80.8% 0.043 87.4)

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

#7A5C4E

Tangerine · DimGray · Amber Brown

HEX
#7A5C4E
RGB
rgb(122, 92, 78)
HSL
hsl(19, 22%, 39%)
HSB
hsb(19, 36%, 48%)
CMYK
cmyk(0%, 25%, 36%, 52%)
Oklch
oklch(50.2% 0.045 46.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

696746
454768

Analogous

685545
696746
586845

Triadic

696746
456866
664568

Split-Comp.

696746
455868
554568

Tetradic

696746
456855
454768
684558

Contrast Matrix WCAG 2.1 Contrast

696746
3B473D
3D3E42
CCBFA1
7A5C4E
—
1.7
Fail
1.8
Fail
3.2
AA Large
1.0
Fail
1.7
Fail
—
1.1
Fail
5.4
AA
1.6
Fail
1.8
Fail
1.1
Fail
—
5.9
AA
1.8
Fail
3.2
AA Large
5.4
AA
5.9
AA
—
3.3
AA Large
1.0
Fail
1.6
Fail
1.8
Fail
3.3
AA Large
—
White BG
5.8AA
9.7AAA
10.7AAA
1.8Fail
6.1AA
Black BG
3.6AA Large
2.2Fail
2.0Fail
11.5AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

68684E
40403F
3D3D41
C6C6A8
6D6D51

Deuteranopia

686850
403F40
3D3D41
C7C8AA
6F7152

Tritanopia

695456
3C4142
3D4040
CBAEAF
785455

Achromatopsia

646464
424242
3E3E3E
BFBFBF
636363

Shades & Tints Shades & Tints

#696746

Dark
Light

#3B473D

Dark
Light

#3D3E42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #696746;
  --color-2: #3b473d;
  --color-3: #3d3e42;
  --color-4: #ccbfa1;
  --color-5: #7a5c4e;
}

SCSS

$color-1: #696746;
$color-2: #3b473d;
$color-3: #3d3e42;
$color-4: #ccbfa1;
$color-5: #7a5c4e;

TAILWIND

colors: {
  'brand-1': '#696746',
  'brand-2': '#3b473d',
  'brand-3': '#3d3e42',
  'brand-4': '#ccbfa1',
  'brand-5': '#7a5c4e',
}

RGB Array

[105, 103, 70], [59, 71, 61], [61, 62, 66], [204, 191, 161], [122, 92, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #696746, #3B473D, #3D3E42, #CCBFA1, #7A5C4E 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: #696746; --color-2: #3b473d; --color-3: #3d3e42; --color-4: #ccbfa1; --color-5: #7a5c4e. 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