#AB773A + #B92A16 + #E6036C + #543333 + #46212A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB773A

Ochre · Sienna · Amber Brown

HEX

#AB773A

RGB

rgb(171, 119, 58)

HSL

hsl(32, 49%, 45%)

HSB

hsb(32, 66%, 67%)

CMYK

cmyk(0%, 30%, 66%, 33%)

Oklch

oklch(61.0% 0.101 68.2)

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

#B92A16

Vermilion · FireBrick · Passion Red

HEX

#B92A16

RGB

rgb(185, 42, 22)

HSL

hsl(7, 79%, 41%)

HSB

hsb(7, 88%, 73%)

CMYK

cmyk(0%, 77%, 88%, 27%)

Oklch

oklch(51.5% 0.182 31.3)

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

#E6036C

Dark Violet · MediumVioletRed · Camellia

HEX

#E6036C

RGB

rgb(230, 3, 108)

HSL

hsl(332, 97%, 46%)

HSB

hsb(332, 99%, 90%)

CMYK

cmyk(0%, 99%, 53%, 10%)

Oklch

oklch(59.6% 0.238 4.9)

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

#543333

Crimson · DarkSlateGray · Wine Red

HEX

#543333

RGB

rgb(84, 51, 51)

HSL

hsl(0, 24%, 26%)

HSB

hsb(0, 39%, 33%)

CMYK

cmyk(0%, 39%, 39%, 67%)

Oklch

oklch(36.1% 0.048 19.7)

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

#46212A

Crimson · DarkSlateGray · Deep Berry

HEX

#46212A

RGB

rgb(70, 33, 42)

HSL

hsl(345, 36%, 20%)

HSB

hsb(345, 53%, 27%)

CMYK

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

Oklch

oklch(30.2% 0.057 5.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB773A

3B6FAB

Analogous

AB3E3B

AB773A

A7AB3B

Triadic

AB773A

3BAB76

763BAB

Split-Comp.

AB773A

3BA7AB

3E3BAB

Tetradic

AB773A

3BAB3E

3B6FAB

AB3BA7

Contrast Matrix WCAG 2.1 Contrast

AB773A	B92A16	E6036C	543333	46212A
—	1.6 Fail	1.2 Fail	2.9 Fail	3.6 AA Large
1.6 Fail	—	1.3 Fail	1.8 Fail	2.3 Fail
1.2 Fail	1.3 Fail	—	2.4 Fail	3.0 AA Large
2.9 Fail	1.8 Fail	2.4 Fail	—	1.3 Fail
3.6 AA Large	2.3 Fail	3.0 AA Large	1.3 Fail	—

White BG

3.9AA Large

6.2AA

4.6AA

11.1AAA

13.9AAA

Black BG

5.4AA

3.4AA Large

4.6AA

1.9Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

949449

7B7A1B

848253

464533

363628

Deuteranopia

989B4C

838E1C

91A24D

484A33

383B27

Tritanopia

A85457

B21F20

DB3F3A

523333

442626

Achromatopsia

808080

525252

535353

3D3D3D

2D2D2D

Shades & Tints Shades & Tints

#AB773A

Dark

Light

#B92A16

Dark

Light

#E6036C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab773a;
  --color-2: #b92a16;
  --color-3: #e6036c;
  --color-4: #543333;
  --color-5: #46212a;
}

SCSS

$color-1: #ab773a;
$color-2: #b92a16;
$color-3: #e6036c;
$color-4: #543333;
$color-5: #46212a;

TAILWIND

colors: {
  'brand-1': '#ab773a',
  'brand-2': '#b92a16',
  'brand-3': '#e6036c',
  'brand-4': '#543333',
  'brand-5': '#46212a',
}

RGB Array

[171, 119, 58], [185, 42, 22], [230, 3, 108], [84, 51, 51], [70, 33, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB773A, #B92A16, #E6036C, #543333, #46212A 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: #ab773a; --color-2: #b92a16; --color-3: #e6036c; --color-4: #543333; --color-5: #46212a. 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