#540313 + #37312E + #195E49 + #626F43 + #AB803C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#540313

Vermilion · Maroon · Deep Berry

HEX

#540313

RGB

rgb(84, 3, 19)

HSL

hsl(348, 93%, 17%)

HSB

hsb(348, 96%, 33%)

CMYK

cmyk(0%, 96%, 77%, 67%)

Oklch

oklch(28.5% 0.110 18.7)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#37312E

Tangerine · DarkSlateGray · Dark Stone

HEX

#37312E

RGB

rgb(55, 49, 46)

HSL

hsl(20, 9%, 20%)

HSB

hsb(20, 16%, 22%)

CMYK

cmyk(0%, 11%, 16%, 78%)

Oklch

oklch(31.8% 0.010 48.4)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#195E49

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#195E49

RGB

rgb(25, 94, 73)

HSL

hsl(162, 58%, 23%)

HSB

hsb(162, 73%, 37%)

CMYK

cmyk(73%, 0%, 22%, 63%)

Oklch

oklch(43.3% 0.076 168.5)

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

#626F43

Grass Green · DarkOliveGreen · Forest Green

HEX

#626F43

RGB

rgb(98, 111, 67)

HSL

hsl(78, 25%, 35%)

HSB

hsb(78, 40%, 44%)

CMYK

cmyk(12%, 0%, 40%, 56%)

Oklch

oklch(51.9% 0.067 122.1)

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

#AB803C

Ochre · Sienna · Amber Brown

HEX

#AB803C

RGB

rgb(171, 128, 60)

HSL

hsl(37, 48%, 45%)

HSB

hsb(37, 65%, 67%)

CMYK

cmyk(0%, 25%, 65%, 33%)

Oklch

oklch(62.8% 0.100 76.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

540313

035444

Analogous

54033B

540313

541B03

Triadic

540313

135403

031354

Split-Comp.

540313

03541B

033B54

Tetradic

540313

3B5403

035444

1B0354

Contrast Matrix WCAG 2.1 Contrast

540313	37312E	195E49	626F43	AB803C
—	1.2 Fail	2.0 Fail	2.8 Fail	4.2 AA Large
1.2 Fail	—	1.7 Fail	2.4 Fail	3.6 AA Large
2.0 Fail	1.7 Fail	—	1.4 Fail	2.1 Fail
2.8 Fail	2.4 Fail	1.4 Fail	—	1.5 Fail
4.2 AA Large	3.6 AA Large	2.1 Fail	1.5 Fail	—

White BG

15.0AAA

12.8AAA

7.7AAA

5.4AA

3.6AA Large

Black BG

1.4Fail

1.6Fail

2.7Fail

3.9AA Large

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31300F

34342F

37374E

68684E

98984C

Deuteranopia

363C0E

35352F

332E4F

676650

9B9E50

Tritanopia

500C0B

372F2F

1C5253

635658

A9595C

Achromatopsia

1D1D1D

323232

474747

666666

858585

Shades & Tints Shades & Tints

#540313

Dark

Light

#37312E

Dark

Light

#195E49

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #540313;
  --color-2: #37312e;
  --color-3: #195e49;
  --color-4: #626f43;
  --color-5: #ab803c;
}

SCSS

$color-1: #540313;
$color-2: #37312e;
$color-3: #195e49;
$color-4: #626f43;
$color-5: #ab803c;

TAILWIND

colors: {
  'brand-1': '#540313',
  'brand-2': '#37312e',
  'brand-3': '#195e49',
  'brand-4': '#626f43',
  'brand-5': '#ab803c',
}

RGB Array

[84, 3, 19], [55, 49, 46], [25, 94, 73], [98, 111, 67], [171, 128, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #540313, #37312E, #195E49, #626F43, #AB803C 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: #540313; --color-2: #37312e; --color-3: #195e49; --color-4: #626f43; --color-5: #ab803c. 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