#A16D2F + #87592A + #6B482D + #363D40 + #C43D58 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A16D2F

Ochre · Sienna · Amber Brown

HEX

#A16D2F

RGB

rgb(161, 109, 47)

HSL

hsl(33, 55%, 41%)

HSB

hsb(33, 71%, 63%)

CMYK

cmyk(0%, 32%, 71%, 37%)

Oklch

oklch(57.7% 0.102 67.9)

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

#87592A

Ochre · Sienna · Amber Brown

HEX

#87592A

RGB

rgb(135, 89, 42)

HSL

hsl(30, 53%, 35%)

HSB

hsb(30, 69%, 53%)

CMYK

cmyk(0%, 34%, 69%, 47%)

Oklch

oklch(50.5% 0.087 64.0)

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

#6B482D

Tangerine · DarkOliveGreen · Amber Brown

HEX

#6B482D

RGB

rgb(107, 72, 45)

HSL

hsl(26, 41%, 30%)

HSB

hsb(26, 58%, 42%)

CMYK

cmyk(0%, 33%, 58%, 58%)

Oklch

oklch(43.4% 0.063 57.8)

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

#363D40

Slate Blue · DarkSlateGray · Dark Stone

HEX

#363D40

RGB

rgb(54, 61, 64)

HSL

hsl(198, 8%, 23%)

HSB

hsb(198, 16%, 25%)

CMYK

cmyk(16%, 5%, 0%, 75%)

Oklch

oklch(35.5% 0.011 225.4)

Traditional「Slate Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#C43D58

Crimson · Crimson · Passion Red

HEX

#C43D58

RGB

rgb(196, 61, 88)

HSL

hsl(348, 53%, 50%)

HSB

hsb(348, 69%, 77%)

CMYK

cmyk(0%, 69%, 55%, 23%)

Oklch

oklch(56.2% 0.171 12.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A16D2F

2F63A2

Analogous

A2352F

A16D2F

9CA22F

Triadic

A16D2F

2FA26E

6E2FA2

Split-Comp.

A16D2F

2F9CA2

352FA2

Tetradic

A16D2F

2FA235

2F63A2

A22F9C

Contrast Matrix WCAG 2.1 Contrast

A16D2F	87592A	6B482D	363D40	C43D58
—	1.4 Fail	1.8 Fail	2.5 Fail	1.1 Fail
1.4 Fail	—	1.3 Fail	1.8 Fail	1.2 Fail
1.8 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
2.5 Fail	1.8 Fail	1.4 Fail	—	2.2 Fail
1.1 Fail	1.2 Fail	1.6 Fail	2.2 Fail	—

White BG

4.4AA Large

6.0AA

8.1AAA

11.1AAA

5.1AA

Black BG

4.7AA

3.5AA Large

2.6Fail

1.9Fail

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A3E

737335

5C5C34

39393F

8A8851

Deuteranopia

8E9142

767938

5E6035

39383F

919C50

Tritanopia

9E4A4C

853E40

69393A

363F3F

BD4C4B

Achromatopsia

757575

616161

4F4F4F

3B3B3B

686868

Shades & Tints Shades & Tints

#A16D2F

Dark

Light

#87592A

Dark

Light

#6B482D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a16d2f;
  --color-2: #87592a;
  --color-3: #6b482d;
  --color-4: #363d40;
  --color-5: #c43d58;
}

SCSS

$color-1: #a16d2f;
$color-2: #87592a;
$color-3: #6b482d;
$color-4: #363d40;
$color-5: #c43d58;

TAILWIND

colors: {
  'brand-1': '#a16d2f',
  'brand-2': '#87592a',
  'brand-3': '#6b482d',
  'brand-4': '#363d40',
  'brand-5': '#c43d58',
}

RGB Array

[161, 109, 47], [135, 89, 42], [107, 72, 45], [54, 61, 64], [196, 61, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #A16D2F, #87592A, #6B482D, #363D40, #C43D58 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: #a16d2f; --color-2: #87592a; --color-3: #6b482d; --color-4: #363d40; --color-5: #c43d58. 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