#481800 + #304848 + #B36E00 + #784830 + #000000 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#481800

Tangerine · Maroon · Cinnamon

HEX

#481800

RGB

rgb(72, 24, 0)

HSL

hsl(20, 100%, 14%)

HSB

hsb(20, 100%, 28%)

CMYK

cmyk(0%, 67%, 100%, 72%)

Oklch

oklch(28.1% 0.081 44.4)

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

#304848

Slate Blue · DarkSlateGray · Peacock Green

HEX

#304848

RGB

rgb(48, 72, 72)

HSL

hsl(180, 20%, 24%)

HSB

hsb(180, 33%, 28%)

CMYK

cmyk(33%, 0%, 0%, 72%)

Oklch

oklch(38.2% 0.030 196.0)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#B36E00

Ochre · DarkGoldenRod · Amber Brown

HEX

#B36E00

RGB

rgb(179, 110, 0)

HSL

hsl(37, 100%, 35%)

HSB

hsb(37, 100%, 70%)

CMYK

cmyk(0%, 39%, 100%, 30%)

Oklch

oklch(60.0% 0.132 67.5)

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

#784830

Tangerine · Sienna · Amber Brown

HEX

#784830

RGB

rgb(120, 72, 48)

HSL

hsl(20, 43%, 33%)

HSB

hsb(20, 60%, 47%)

CMYK

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

Oklch

oklch(45.2% 0.075 46.8)

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

#000000

Ink Black · Black · Jet Black

HEX

#000000

RGB

rgb(0, 0, 0)

HSL

hsl(0, 0%, 0%)

HSB

hsb(0, 0%, 0%)

CMYK

cmyk(0%, 0%, 0%, 100%)

Oklch

oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

481800

003047

Analogous

47000C

481800

473B00

Triadic

481800

004718

180047

Split-Comp.

481800

00473C

000C47

Tetradic

481800

0C4700

003047

3B0047

Contrast Matrix WCAG 2.1 Contrast

481800	304848	B36E00	784830	000000
—	1.5 Fail	3.7 AA Large	2.0 Fail	1.4 Fail
1.5 Fail	—	2.4 Fail	1.3 Fail	2.1 Fail
3.7 AA Large	2.4 Fail	—	1.9 Fail	5.1 AA
2.0 Fail	1.3 Fail	1.9 Fail	—	2.8 Fail
1.4 Fail	2.1 Fail	5.1 AA	2.8 Fail	—

White BG

14.9AAA

9.8AAA

4.1AA Large

7.6AAA

21.0AAA

Black BG

1.4Fail

2.1Fail

5.1AA

2.8Fail

1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

333306

3A3B48

95951B

636336

000000

Deuteranopia

363A07

393748

999E21

666A37

000000

Tritanopia

460A0B

314848

B03034

763A3B

000000

Achromatopsia

242424

414141

767676

545454

000000

Shades & Tints Shades & Tints

#481800

Dark

Light

#304848

Dark

Light

#B36E00

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #481800;
  --color-2: #304848;
  --color-3: #b36e00;
  --color-4: #784830;
  --color-5: #000000;
}

SCSS

$color-1: #481800;
$color-2: #304848;
$color-3: #b36e00;
$color-4: #784830;
$color-5: #000000;

TAILWIND

colors: {
  'brand-1': '#481800',
  'brand-2': '#304848',
  'brand-3': '#b36e00',
  'brand-4': '#784830',
  'brand-5': '#000000',
}

RGB Array

[72, 24, 0], [48, 72, 72], [179, 110, 0], [120, 72, 48], [0, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #481800, #304848, #B36E00, #784830, #000000 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: #481800; --color-2: #304848; --color-3: #b36e00; --color-4: #784830; --color-5: #000000. 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