#786D58 + #22221B + #BD4E2A + #9A3D24 + #682C21 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#786D58

Ochre · DimGray · Amber Brown

HEX

#786D58

RGB

rgb(120, 109, 88)

HSL

hsl(39, 15%, 41%)

HSB

hsb(39, 27%, 47%)

CMYK

cmyk(0%, 9%, 27%, 53%)

Oklch

oklch(53.9% 0.034 83.5)

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

#22221B

Autumn Sage · Black · Amber Gold

HEX

#22221B

RGB

rgb(34, 34, 27)

HSL

hsl(60, 11%, 12%)

HSB

hsb(60, 21%, 13%)

CMYK

cmyk(0%, 0%, 21%, 87%)

Oklch

oklch(24.9% 0.013 107.3)

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

#BD4E2A

Tangerine · Sienna · Amber Brown

HEX

#BD4E2A

RGB

rgb(189, 78, 42)

HSL

hsl(15, 64%, 45%)

HSB

hsb(15, 78%, 74%)

CMYK

cmyk(0%, 59%, 78%, 26%)

Oklch

oklch(56.4% 0.152 38.0)

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

#9A3D24

Vermilion · Brown · Wine Red

HEX

#9A3D24

RGB

rgb(154, 61, 36)

HSL

hsl(13, 62%, 37%)

HSB

hsb(13, 77%, 60%)

CMYK

cmyk(0%, 60%, 77%, 40%)

Oklch

oklch(48.3% 0.131 35.9)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#682C21

Crimson · Maroon · Wine Red

HEX

#682C21

RGB

rgb(104, 44, 33)

HSL

hsl(9, 52%, 27%)

HSB

hsb(9, 68%, 41%)

CMYK

cmyk(0%, 58%, 68%, 59%)

Oklch

oklch(37.5% 0.089 32.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

786D58

596478

Analogous

785E59

786D58

747859

Triadic

786D58

59786D

6D5978

Split-Comp.

786D58

597478

5E5978

Tetradic

786D58

59785E

596478

785974

Contrast Matrix WCAG 2.1 Contrast

786D58	22221B	BD4E2A	9A3D24	682C21
—	3.1 AA Large	1.0 Fail	1.3 Fail	2.1 Fail
3.1 AA Large	—	3.3 AA Large	2.3 Fail	1.5 Fail
1.0 Fail	3.3 AA Large	—	1.4 Fail	2.2 Fail
1.3 Fail	2.3 Fail	1.4 Fail	—	1.6 Fail
2.1 Fail	1.5 Fail	2.2 Fail	1.6 Fail	—

White BG

5.1AA

16.0AAA

4.9AA

6.8AA

10.7AAA

Black BG

4.1AA Large

1.3Fail

4.3AA Large

3.1AA Large

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

73735D

22221D

8D8C33

72712A

4E4D24

Deuteranopia

74755E

22221D

939C35

777E2C

525624

Tritanopia

776162

221E1E

B73A3B

952F30

652626

Achromatopsia

6E6E6E

212121

6B6B6B

565656

3D3D3D

Shades & Tints Shades & Tints

#786D58

Dark

Light

#22221B

Dark

Light

#BD4E2A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #786d58;
  --color-2: #22221b;
  --color-3: #bd4e2a;
  --color-4: #9a3d24;
  --color-5: #682c21;
}

SCSS

$color-1: #786d58;
$color-2: #22221b;
$color-3: #bd4e2a;
$color-4: #9a3d24;
$color-5: #682c21;

TAILWIND

colors: {
  'brand-1': '#786d58',
  'brand-2': '#22221b',
  'brand-3': '#bd4e2a',
  'brand-4': '#9a3d24',
  'brand-5': '#682c21',
}

RGB Array

[120, 109, 88], [34, 34, 27], [189, 78, 42], [154, 61, 36], [104, 44, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #786D58, #22221B, #BD4E2A, #9A3D24, #682C21 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: #786d58; --color-2: #22221b; --color-3: #bd4e2a; --color-4: #9a3d24; --color-5: #682c21. 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