← Back to Editor

#37595C · #6B6348 · #8F6B43 · #B56533 · #E64949

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#37595C

Slate Blue · DarkSlateGray · Mint Ice

HEX
#37595C
RGB
rgb(55, 89, 92)
HSL
hsl(185, 25%, 29%)
HSB
hsb(185, 40%, 36%)
CMYK
cmyk(40%, 3%, 0%, 64%)
Oklch
oklch(43.9% 0.040 202.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#6B6348

Ochre · DimGray · Honey Gold

HEX
#6B6348
RGB
rgb(107, 99, 72)
HSL
hsl(46, 20%, 35%)
HSB
hsb(46, 33%, 42%)
CMYK
cmyk(0%, 7%, 33%, 58%)
Oklch
oklch(50.0% 0.042 93.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#8F6B43

Ochre · Sienna · Amber Brown

HEX
#8F6B43
RGB
rgb(143, 107, 67)
HSL
hsl(32, 36%, 41%)
HSB
hsb(32, 53%, 56%)
CMYK
cmyk(0%, 25%, 53%, 44%)
Oklch
oklch(55.5% 0.072 68.4)

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

#B56533

Tangerine · Sienna · Amber Brown

HEX
#B56533
RGB
rgb(181, 101, 51)
HSL
hsl(23, 56%, 45%)
HSB
hsb(23, 72%, 71%)
CMYK
cmyk(0%, 44%, 72%, 29%)
Oklch
oklch(58.9% 0.121 50.4)

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

#E64949

Vermilion · Tomato · Passion Red

HEX
#E64949
RGB
rgb(230, 73, 73)
HSL
hsl(0, 76%, 59%)
HSB
hsb(0, 68%, 90%)
CMYK
cmyk(0%, 68%, 68%, 10%)
Oklch
oklch(62.8% 0.194 24.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

37595C
5C3B37

Analogous

375C4D
37595C
37475C

Triadic

37595C
5C3759
595C37

Split-Comp.

37595C
5C3747
5C4D37

Tetradic

37595C
4D375C
5C3B37
475C37

Contrast Matrix WCAG 2.1 Contrast

37595C
6B6348
8F6B43
B56533
E64949
—
1.3
Fail
1.6
Fail
1.8
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
2.0
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
7.6AAA
6.0AA
4.8AA
4.3AA Large
3.9AA Large
Black BG
2.7Fail
3.5AA Large
4.4AA Large
4.9AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46465B
68674F
7F7F4D
92923F
A2A149

Deuteranopia

44415B
686950
82844F
979D42
ABB749

Tritanopia

395B5B
6B5455
8D5456
B1494B
DE4949

Achromatopsia

4F4F4F
626262
717171
777777
787878

Shades & Tints Shades & Tints

#37595C

Dark
Light

#6B6348

Dark
Light

#8F6B43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #37595c;
  --color-2: #6b6348;
  --color-3: #8f6b43;
  --color-4: #b56533;
  --color-5: #e64949;
}

SCSS

$color-1: #37595c;
$color-2: #6b6348;
$color-3: #8f6b43;
$color-4: #b56533;
$color-5: #e64949;

TAILWIND

colors: {
  'brand-1': '#37595c',
  'brand-2': '#6b6348',
  'brand-3': '#8f6b43',
  'brand-4': '#b56533',
  'brand-5': '#e64949',
}

RGB Array

[55, 89, 92], [107, 99, 72], [143, 107, 67], [181, 101, 51], [230, 73, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #37595C, #6B6348, #8F6B43, #B56533, #E64949 is ideal for: corporate websites, product showcases, portfolios. 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: #37595c; --color-2: #6b6348; --color-3: #8f6b43; --color-4: #b56533; --color-5: #e64949. 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. 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