← Back to Editor

#372B39 · #693826 · #B48239 · #E3B05E · #FF9931

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

#372B39

Dark Plum · DarkSlateGray · Dark Purple

HEX
#372B39
RGB
rgb(55, 43, 57)
HSL
hsl(291, 14%, 20%)
HSB
hsb(291, 25%, 22%)
CMYK
cmyk(4%, 25%, 0%, 78%)
Oklch
oklch(30.8% 0.030 321.5)

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

#693826

Tangerine · DarkOliveGreen · Amber Brown

HEX
#693826
RGB
rgb(105, 56, 38)
HSL
hsl(16, 47%, 28%)
HSB
hsb(16, 64%, 41%)
CMYK
cmyk(0%, 47%, 64%, 59%)
Oklch
oklch(39.8% 0.076 40.7)

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

#B48239

Ochre · DarkGoldenRod · Amber Brown

HEX
#B48239
RGB
rgb(180, 130, 57)
HSL
hsl(36, 52%, 46%)
HSB
hsb(36, 68%, 71%)
CMYK
cmyk(0%, 28%, 68%, 29%)
Oklch
oklch(64.2% 0.108 73.8)

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

#E3B05E

Ginger · SandyBrown · Warm Sun

HEX
#E3B05E
RGB
rgb(227, 176, 94)
HSL
hsl(37, 70%, 63%)
HSB
hsb(37, 59%, 89%)
CMYK
cmyk(0%, 22%, 59%, 11%)
Oklch
oklch(78.8% 0.116 77.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FF9931

Ginger · Coral · Warm Sun

HEX
#FF9931
RGB
rgb(255, 153, 49)
HSL
hsl(30, 100%, 60%)
HSB
hsb(30, 81%, 100%)
CMYK
cmyk(0%, 40%, 81%, 0%)
Oklch
oklch(77.4% 0.164 60.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

372B39
2E3A2C

Analogous

312C3A
372B39
3A2C35

Triadic

372B39
3A382C
2C3A38

Split-Comp.

372B39
353A2C
2C3A31

Tetradic

372B39
3A312C
2E3A2C
2C353A

Contrast Matrix WCAG 2.1 Contrast

372B39
693826
B48239
E3B05E
FF9931
—
1.4
Fail
4.0
AA Large
6.8
AA
6.3
AA
1.4
Fail
—
2.8
Fail
4.8
AA
4.5
AA Large
4.0
AA Large
2.8
Fail
—
1.7
Fail
1.6
Fail
6.8
AA
4.8
AA
1.7
Fail
—
1.1
Fail
6.3
AA
4.5
AA Large
1.6
Fail
1.1
Fail
—
White BG
13.4AAA
9.6AAA
3.4AA Large
2.0Fail
2.1Fail
Black BG
1.6Fail
2.2Fail
6.2AA
10.6AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323236
54532A
9E9E4B
CDCC72
D3D24A

Deuteranopia

333335
575A2B
A1A54F
D0D477
D9E050

Tritanopia

363332
672E2F
B2595C
E08285
FA5E62

Achromatopsia

303030
454545
898989
B6B6B6
ACACAC

Shades & Tints Shades & Tints

#372B39

Dark
Light

#693826

Dark
Light

#B48239

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #372b39;
  --color-2: #693826;
  --color-3: #b48239;
  --color-4: #e3b05e;
  --color-5: #ff9931;
}

SCSS

$color-1: #372b39;
$color-2: #693826;
$color-3: #b48239;
$color-4: #e3b05e;
$color-5: #ff9931;

TAILWIND

colors: {
  'brand-1': '#372b39',
  'brand-2': '#693826',
  'brand-3': '#b48239',
  'brand-4': '#e3b05e',
  'brand-5': '#ff9931',
}

RGB Array

[55, 43, 57], [105, 56, 38], [180, 130, 57], [227, 176, 94], [255, 153, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #372B39, #693826, #B48239, #E3B05E, #FF9931 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: #372b39; --color-2: #693826; --color-3: #b48239; --color-4: #e3b05e; --color-5: #ff9931. 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