#8F4C36 + #A86030 + #789048 + #607830 + #486018 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8F4C36

Tangerine · Sienna · Amber Brown

HEX

#8F4C36

RGB

rgb(143, 76, 54)

HSL

hsl(15, 45%, 39%)

HSB

hsb(15, 62%, 56%)

CMYK

cmyk(0%, 47%, 62%, 44%)

Oklch

oklch(49.3% 0.097 38.8)

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

#A86030

Tangerine · Sienna · Amber Brown

HEX

#A86030

RGB

rgb(168, 96, 48)

HSL

hsl(24, 56%, 42%)

HSB

hsb(24, 71%, 66%)

CMYK

cmyk(0%, 43%, 71%, 34%)

Oklch

oklch(56.2% 0.112 52.0)

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

#789048

Grass Green · DimGray · Olive Green

HEX

#789048

RGB

rgb(120, 144, 72)

HSL

hsl(80, 33%, 42%)

HSB

hsb(80, 50%, 56%)

CMYK

cmyk(17%, 0%, 50%, 44%)

Oklch

oklch(61.8% 0.102 124.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#607830

Grass Green · DarkOliveGreen · Forest Green

HEX

#607830

RGB

rgb(96, 120, 48)

HSL

hsl(80, 43%, 33%)

HSB

hsb(80, 60%, 47%)

CMYK

cmyk(20%, 0%, 60%, 53%)

Oklch

oklch(53.7% 0.103 125.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#486018

Grass Green · DarkOliveGreen · Forest Green

HEX

#486018

RGB

rgb(72, 96, 24)

HSL

hsl(80, 60%, 24%)

HSB

hsb(80, 75%, 38%)

CMYK

cmyk(25%, 0%, 75%, 62%)

Oklch

oklch(45.4% 0.101 126.3)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F4C36

377A90

Analogous

90374D

8F4C36

907A37

Triadic

8F4C36

37904D

4D3790

Split-Comp.

8F4C36

37907A

374D90

Tetradic

8F4C36

4D9037

377A90

7A3790

Contrast Matrix WCAG 2.1 Contrast

8F4C36	A86030	789048	607830	486018
—	1.3 Fail	1.8 Fail	1.3 Fail	1.1 Fail
1.3 Fail	—	1.3 Fail	1.0 Fail	1.5 Fail
1.8 Fail	1.3 Fail	—	1.4 Fail	2.0 Fail
1.3 Fail	1.0 Fail	1.4 Fail	—	1.4 Fail
1.1 Fail	1.5 Fail	2.0 Fail	1.4 Fail	—

White BG

6.5AA

4.8AA

3.6AA Large

5.0AA

7.1AAA

Black BG

3.3AA Large

4.4AA Large

5.9AA

4.2AA Large

3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

72713B

89883C

828359

6A6B41

525329

Deuteranopia

767B3D

8D923E

817F5E

696746

514F2E

Tritanopia

8C4040

A44547

79676A

614F52

49373A

Achromatopsia

5E5E5E

707070

818181

696969

515151

Shades & Tints Shades & Tints

#8F4C36

Dark

Light

#A86030

Dark

Light

#789048

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f4c36;
  --color-2: #a86030;
  --color-3: #789048;
  --color-4: #607830;
  --color-5: #486018;
}

SCSS

$color-1: #8f4c36;
$color-2: #a86030;
$color-3: #789048;
$color-4: #607830;
$color-5: #486018;

TAILWIND

colors: {
  'brand-1': '#8f4c36',
  'brand-2': '#a86030',
  'brand-3': '#789048',
  'brand-4': '#607830',
  'brand-5': '#486018',
}

RGB Array

[143, 76, 54], [168, 96, 48], [120, 144, 72], [96, 120, 48], [72, 96, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F4C36, #A86030, #789048, #607830, #486018 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: #8f4c36; --color-2: #a86030; --color-3: #789048; --color-4: #607830; --color-5: #486018. 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