#875D45 + #794932 + #472E1F + #331808 + #660322 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#875D45

Tangerine · Sienna · Amber Brown

HEX

#875D45

RGB

rgb(135, 93, 69)

HSL

hsl(22, 32%, 40%)

HSB

hsb(22, 49%, 53%)

CMYK

cmyk(0%, 31%, 49%, 47%)

Oklch

oklch(51.7% 0.066 50.5)

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

#794932

Tangerine · Sienna · Amber Brown

HEX

#794932

RGB

rgb(121, 73, 50)

HSL

hsl(19, 42%, 34%)

HSB

hsb(19, 59%, 47%)

CMYK

cmyk(0%, 40%, 59%, 53%)

Oklch

oklch(45.6% 0.075 46.0)

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

#472E1F

Tangerine · DarkSlateGray · Cinnamon

HEX

#472E1F

RGB

rgb(71, 46, 31)

HSL

hsl(23, 39%, 20%)

HSB

hsb(23, 56%, 28%)

CMYK

cmyk(0%, 35%, 56%, 72%)

Oklch

oklch(32.7% 0.045 51.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#331808

Tangerine · Black · Cinnamon

HEX

#331808

RGB

rgb(51, 24, 8)

HSL

hsl(22, 73%, 12%)

HSB

hsb(22, 84%, 20%)

CMYK

cmyk(0%, 53%, 84%, 80%)

Oklch

oklch(24.4% 0.050 49.4)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#660322

Dark Violet · Maroon · Raspberry

HEX

#660322

RGB

rgb(102, 3, 34)

HSL

hsl(341, 94%, 21%)

HSB

hsb(341, 97%, 40%)

CMYK

cmyk(0%, 97%, 67%, 60%)

Oklch

oklch(32.7% 0.128 12.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

875D45

456F87

Analogous

87454E

875D45

877E45

Triadic

875D45

45875D

5D4587

Split-Comp.

875D45

45877E

454E87

Tetradic

875D45

4E8745

456F87

7E4587

Contrast Matrix WCAG 2.1 Contrast

875D45	794932	472E1F	331808	660322
—	1.3 Fail	2.2 Fail	2.9 Fail	2.3 Fail
1.3 Fail	—	1.7 Fail	2.2 Fail	1.8 Fail
2.2 Fail	1.7 Fail	—	1.3 Fail	1.0 Fail
2.9 Fail	2.2 Fail	1.3 Fail	—	1.3 Fail
2.3 Fail	1.8 Fail	1.0 Fail	1.3 Fail	—

White BG

5.7AA

7.5AAA

12.5AAA

16.5AAA

13.1AAA

Black BG

3.7AA Large

2.8Fail

1.7Fail

1.3Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

75744B

646438

3C3C23

27270C

3B3A1A

Deuteranopia

777A4C

676B39

3E3F24

292B0D

414819

Tritanopia

854F50

773C3D

462526

320F10

611513

Achromatopsia

676767

555555

343434

1E1E1E

242424

Shades & Tints Shades & Tints

#875D45

Dark

Light

#794932

Dark

Light

#472E1F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #875d45;
  --color-2: #794932;
  --color-3: #472e1f;
  --color-4: #331808;
  --color-5: #660322;
}

SCSS

$color-1: #875d45;
$color-2: #794932;
$color-3: #472e1f;
$color-4: #331808;
$color-5: #660322;

TAILWIND

colors: {
  'brand-1': '#875d45',
  'brand-2': '#794932',
  'brand-3': '#472e1f',
  'brand-4': '#331808',
  'brand-5': '#660322',
}

RGB Array

[135, 93, 69], [121, 73, 50], [71, 46, 31], [51, 24, 8], [102, 3, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #875D45, #794932, #472E1F, #331808, #660322 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: #875d45; --color-2: #794932; --color-3: #472e1f; --color-4: #331808; --color-5: #660322. 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 coffee-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