← Back to Editor

#36220E · #B77B3F · #ECBE5E · #A44B24 · #AE75B2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#36220E

Ochre · Black · Cinnamon

HEX
#36220E
RGB
rgb(54, 34, 14)
HSL
hsl(30, 59%, 13%)
HSB
hsb(30, 74%, 21%)
CMYK
cmyk(0%, 37%, 74%, 79%)
Oklch
oklch(27.2% 0.044 64.0)

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

#B77B3F

Ochre · Chocolate · Amber Brown

HEX
#B77B3F
RGB
rgb(183, 123, 63)
HSL
hsl(30, 49%, 48%)
HSB
hsb(30, 66%, 72%)
CMYK
cmyk(0%, 33%, 66%, 28%)
Oklch
oklch(63.3% 0.107 63.7)

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

#ECBE5E

Ginger · SandyBrown · Sunflower

HEX
#ECBE5E
RGB
rgb(236, 190, 94)
HSL
hsl(41, 79%, 65%)
HSB
hsb(41, 60%, 93%)
CMYK
cmyk(0%, 19%, 60%, 7%)
Oklch
oklch(82.4% 0.125 83.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#A44B24

Tangerine · Sienna · Amber Brown

HEX
#A44B24
RGB
rgb(164, 75, 36)
HSL
hsl(18, 64%, 39%)
HSB
hsb(18, 78%, 64%)
CMYK
cmyk(0%, 54%, 78%, 36%)
Oklch
oklch(52.0% 0.129 42.4)

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

#AE75B2

Dark Plum · MediumOrchid · Violet

HEX
#AE75B2
RGB
rgb(174, 117, 178)
HSL
hsl(296, 28%, 58%)
HSB
hsb(296, 34%, 70%)
CMYK
cmyk(2%, 34%, 0%, 30%)
Oklch
oklch(64.2% 0.109 324.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

36220E
0E2135

Analogous

350E0E
36220E
35350E

Triadic

36220E
0E3521
210E35

Split-Comp.

36220E
0E3535
0E0E35

Tetradic

36220E
0E350E
0E2135
350E35

Contrast Matrix WCAG 2.1 Contrast

36220E
B77B3F
ECBE5E
A44B24
AE75B2
—
4.3
AA Large
8.7
AAA
2.6
Fail
4.3
AA Large
4.3
AA Large
—
2.0
Fail
1.6
Fail
1.0
Fail
8.7
AAA
2.0
Fail
—
3.3
AA Large
2.0
Fail
2.6
Fail
1.6
Fail
3.3
AA Large
—
1.7
Fail
4.3
AA Large
1.0
Fail
2.0
Fail
1.7
Fail
—
White BG
15.1AAA
3.5AA Large
1.7Fail
5.8AA
3.5AA Large
Black BG
1.4Fail
5.9AA
12.1AAA
3.6AA Large
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D13
9D9C4E
D8D875
7D7D2D
9595A3

Deuteranopia

2F3014
A1A551
DBDE7B
838930
999DA0

Tritanopia

351718
B4595C
EA888C
A03537
AB9895

Achromatopsia

262626
868686
C1C1C1
616161
8D8D8D

Shades & Tints Shades & Tints

#36220E

Dark
Light

#B77B3F

Dark
Light

#ECBE5E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #36220e;
  --color-2: #b77b3f;
  --color-3: #ecbe5e;
  --color-4: #a44b24;
  --color-5: #ae75b2;
}

SCSS

$color-1: #36220e;
$color-2: #b77b3f;
$color-3: #ecbe5e;
$color-4: #a44b24;
$color-5: #ae75b2;

TAILWIND

colors: {
  'brand-1': '#36220e',
  'brand-2': '#b77b3f',
  'brand-3': '#ecbe5e',
  'brand-4': '#a44b24',
  'brand-5': '#ae75b2',
}

RGB Array

[54, 34, 14], [183, 123, 63], [236, 190, 94], [164, 75, 36], [174, 117, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #36220E, #B77B3F, #ECBE5E, #A44B24, #AE75B2 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #36220e; --color-2: #b77b3f; --color-3: #ecbe5e; --color-4: #a44b24; --color-5: #ae75b2. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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