#9D7D0F + #735C18 + #573141 + #6D3454 + #9E9492 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9D7D0F

Ochre · DarkGoldenRod · Honey Gold

HEX

#9D7D0F

RGB

rgb(157, 125, 15)

HSL

hsl(46, 83%, 34%)

HSB

hsb(46, 90%, 62%)

CMYK

cmyk(0%, 20%, 90%, 38%)

Oklch

oklch(60.3% 0.120 90.0)

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

#735C18

Ochre · DarkOliveGreen · Honey Gold

HEX

#735C18

RGB

rgb(115, 92, 24)

HSL

hsl(45, 65%, 27%)

HSB

hsb(45, 79%, 45%)

CMYK

cmyk(0%, 20%, 79%, 55%)

Oklch

oklch(48.5% 0.088 89.2)

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

#573141

Dark Violet · DarkSlateGray · Camellia

HEX

#573141

RGB

rgb(87, 49, 65)

HSL

hsl(335, 28%, 27%)

HSB

hsb(335, 44%, 34%)

CMYK

cmyk(0%, 44%, 25%, 66%)

Oklch

oklch(36.6% 0.059 353.7)

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

#6D3454

Rose Purple · DimGray · Camellia

HEX

#6D3454

RGB

rgb(109, 52, 84)

HSL

hsl(326, 35%, 32%)

HSB

hsb(326, 52%, 43%)

CMYK

cmyk(0%, 52%, 23%, 57%)

Oklch

oklch(41.1% 0.091 347.0)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#9E9492

Ash · DarkGray · Silver Sand

HEX

#9E9492

RGB

rgb(158, 148, 146)

HSL

hsl(10, 6%, 60%)

HSB

hsb(10, 8%, 62%)

CMYK

cmyk(0%, 6%, 8%, 38%)

Oklch

oklch(67.5% 0.012 31.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D7D0F

0F309F

Analogous

9F350F

9D7D0F

789F0F

Triadic

9D7D0F

0F9F7D

7D0F9F

Split-Comp.

9D7D0F

0F789F

350F9F

Tetradic

9D7D0F

0F9F35

0F309F

9F0F78

Contrast Matrix WCAG 2.1 Contrast

9D7D0F	735C18	573141	6D3454	9E9492
—	1.6 Fail	2.8 Fail	2.4 Fail	1.3 Fail
1.6 Fail	—	1.7 Fail	1.4 Fail	2.2 Fail
2.8 Fail	1.7 Fail	—	1.2 Fail	3.7 AA Large
2.4 Fail	1.4 Fail	1.2 Fail	—	3.1 AA Large
1.3 Fail	2.2 Fail	3.7 AA Large	3.1 AA Large	—

White BG

3.9AA Large

6.4AA

10.9AAA

9.3AAA

3.0Fail

Black BG

5.4AA

3.3AA Large

1.9Fail

2.3Fail

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F2A

696928

47463D

54544C

9A9A92

Deuteranopia

919330

6A6C2C

494C3C

585C4A

9A9B93

Tritanopia

9B3F43

723538

553A39

6A4645

9E9393

Achromatopsia

7A7A7A

5B5B5B

3E3E3E

494949

979797

Shades & Tints Shades & Tints

#9D7D0F

Dark

Light

#735C18

Dark

Light

#573141

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d7d0f;
  --color-2: #735c18;
  --color-3: #573141;
  --color-4: #6d3454;
  --color-5: #9e9492;
}

SCSS

$color-1: #9d7d0f;
$color-2: #735c18;
$color-3: #573141;
$color-4: #6d3454;
$color-5: #9e9492;

TAILWIND

colors: {
  'brand-1': '#9d7d0f',
  'brand-2': '#735c18',
  'brand-3': '#573141',
  'brand-4': '#6d3454',
  'brand-5': '#9e9492',
}

RGB Array

[157, 125, 15], [115, 92, 24], [87, 49, 65], [109, 52, 84], [158, 148, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D7D0F, #735C18, #573141, #6D3454, #9E9492 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: #9d7d0f; --color-2: #735c18; --color-3: #573141; --color-4: #6d3454; --color-5: #9e9492. 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