#6F5F3B + #AF8D4E + #9B4955 + #7C4354 + #31331B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6F5F3B

Ochre · DarkOliveGreen · Honey Gold

HEX

#6F5F3B

RGB

rgb(111, 95, 59)

HSL

hsl(42, 31%, 33%)

HSB

hsb(42, 47%, 44%)

CMYK

cmyk(0%, 14%, 47%, 56%)

Oklch

oklch(49.2% 0.056 86.4)

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

#AF8D4E

Ochre · GoldenRod · Amber Brown

HEX

#AF8D4E

RGB

rgb(175, 141, 78)

HSL

hsl(39, 38%, 50%)

HSB

hsb(39, 55%, 69%)

CMYK

cmyk(0%, 19%, 55%, 31%)

Oklch

oklch(66.2% 0.091 81.5)

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

#9B4955

Crimson · Sienna · Passion Red

HEX

#9B4955

RGB

rgb(155, 73, 85)

HSL

hsl(351, 36%, 45%)

HSB

hsb(351, 53%, 61%)

CMYK

cmyk(0%, 53%, 45%, 39%)

Oklch

oklch(51.2% 0.110 12.6)

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

#7C4354

Dark Violet · DimGray · Camellia

HEX

#7C4354

RGB

rgb(124, 67, 84)

HSL

hsl(342, 30%, 37%)

HSB

hsb(342, 46%, 49%)

CMYK

cmyk(0%, 46%, 32%, 51%)

Oklch

oklch(45.8% 0.081 1.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#31331B

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#31331B

RGB

rgb(49, 51, 27)

HSL

hsl(65, 31%, 15%)

HSB

hsb(65, 47%, 20%)

CMYK

cmyk(4%, 0%, 47%, 80%)

Oklch

oklch(31.2% 0.039 112.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F5F3B

3A4A6E

Analogous

6E443A

6F5F3B

646E3A

Triadic

6F5F3B

3A6E5F

5F3A6E

Split-Comp.

6F5F3B

3A646E

443A6E

Tetradic

6F5F3B

3A6E44

3A4A6E

6E3A64

Contrast Matrix WCAG 2.1 Contrast

6F5F3B	AF8D4E	9B4955	7C4354	31331B
—	2.0 Fail	1.0 Fail	1.2 Fail	2.1 Fail
2.0 Fail	—	1.9 Fail	2.4 Fail	4.2 AA Large
1.0 Fail	1.9 Fail	—	1.2 Fail	2.1 Fail
1.2 Fail	2.4 Fail	1.2 Fail	—	1.7 Fail
2.1 Fail	4.2 AA Large	2.1 Fail	1.7 Fail	—

White BG

6.2AA

3.1AA Large

6.0AA

7.5AAA

13.0AAA

Black BG

3.4AA Large

6.7AA

3.5AA Large

2.8Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686844

A0A05D

777752

636350

323221

Deuteranopia

696A46

A2A561

7C8251

676B4F

323222

Tritanopia

6E4B4C

AD696C

97504F

794D4C

312526

Achromatopsia

606060

909090

636363

565656

303030

Shades & Tints Shades & Tints

#6F5F3B

Dark

Light

#AF8D4E

Dark

Light

#9B4955

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f5f3b;
  --color-2: #af8d4e;
  --color-3: #9b4955;
  --color-4: #7c4354;
  --color-5: #31331b;
}

SCSS

$color-1: #6f5f3b;
$color-2: #af8d4e;
$color-3: #9b4955;
$color-4: #7c4354;
$color-5: #31331b;

TAILWIND

colors: {
  'brand-1': '#6f5f3b',
  'brand-2': '#af8d4e',
  'brand-3': '#9b4955',
  'brand-4': '#7c4354',
  'brand-5': '#31331b',
}

RGB Array

[111, 95, 59], [175, 141, 78], [155, 73, 85], [124, 67, 84], [49, 51, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F5F3B, #AF8D4E, #9B4955, #7C4354, #31331B 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: #6f5f3b; --color-2: #af8d4e; --color-3: #9b4955; --color-4: #7c4354; --color-5: #31331b. 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