← Back to Editor

#32281F · #564F3D · #796E58 · #B1B8A8 · #D3F0EE

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 LibraryData Visualization

Color Details Color Details

#32281F

Tangerine · DarkSlateGray · Cinnamon

HEX
#32281F
RGB
rgb(50, 40, 31)
HSL
hsl(28, 23%, 16%)
HSB
hsb(28, 38%, 20%)
CMYK
cmyk(0%, 20%, 38%, 80%)
Oklch
oklch(28.5% 0.022 63.8)

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

#564F3D

Ochre · DarkOliveGreen · Honey Gold

HEX
#564F3D
RGB
rgb(86, 79, 61)
HSL
hsl(43, 17%, 29%)
HSB
hsb(43, 29%, 34%)
CMYK
cmyk(0%, 8%, 29%, 66%)
Oklch
oklch(42.9% 0.030 89.3)

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

#796E58

Ochre · DimGray · Honey Gold

HEX
#796E58
RGB
rgb(121, 110, 88)
HSL
hsl(40, 16%, 41%)
HSB
hsb(40, 27%, 47%)
CMYK
cmyk(0%, 9%, 27%, 53%)
Oklch
oklch(54.2% 0.035 84.5)

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

#B1B8A8

Willow Green · DarkGray · Apple Green

HEX
#B1B8A8
RGB
rgb(177, 184, 168)
HSL
hsl(86, 10%, 69%)
HSB
hsb(86, 9%, 72%)
CMYK
cmyk(4%, 0%, 9%, 28%)
Oklch
oklch(77.3% 0.024 126.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D3F0EE

Jade · Lavender · Glacier Blue

HEX
#D3F0EE
RGB
rgb(211, 240, 238)
HSL
hsl(176, 49%, 88%)
HSB
hsb(176, 12%, 94%)
CMYK
cmyk(12%, 0%, 1%, 6%)
Oklch
oklch(93.4% 0.030 191.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

32281F
1F2932

Analogous

321F20
32281F
32321F

Triadic

32281F
1F3228
281F32

Split-Comp.

32281F
1F3232
1F2032

Tetradic

32281F
20321F
1F2932
321F32

Contrast Matrix WCAG 2.1 Contrast

32281F
564F3D
796E58
B1B8A8
D3F0EE
—
1.8
Fail
2.9
Fail
7.1
AAA
12.0
AAA
1.8
Fail
—
1.6
Fail
4.0
AA Large
6.8
AA
2.9
Fail
1.6
Fail
—
2.5
Fail
4.2
AA Large
7.1
AAA
4.0
AA Large
2.5
Fail
—
1.7
Fail
12.0
AAA
6.8
AA
4.2
AA Large
1.7
Fail
—
White BG
14.4AAA
8.1AAA
5.0AA
2.0Fail
1.2Fail
Black BG
1.5Fail
2.6Fail
4.2AA Large
10.3AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E21
535341
74745D
B4B4AC
E0E0EE

Deuteranopia

2E2F22
535442
75765F
B4B3AD
DEDCEF

Tritanopia

322323
564546
786262
B1AFB0
D4EFEF

Achromatopsia

2A2A2A
4F4F4F
6F6F6F
B4B4B4
E7E7E7

Shades & Tints Shades & Tints

#32281F

Dark
Light

#564F3D

Dark
Light

#796E58

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #32281f;
  --color-2: #564f3d;
  --color-3: #796e58;
  --color-4: #b1b8a8;
  --color-5: #d3f0ee;
}

SCSS

$color-1: #32281f;
$color-2: #564f3d;
$color-3: #796e58;
$color-4: #b1b8a8;
$color-5: #d3f0ee;

TAILWIND

colors: {
  'brand-1': '#32281f',
  'brand-2': '#564f3d',
  'brand-3': '#796e58',
  'brand-4': '#b1b8a8',
  'brand-5': '#d3f0ee',
}

RGB Array

[50, 40, 31], [86, 79, 61], [121, 110, 88], [177, 184, 168], [211, 240, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #32281F, #564F3D, #796E58, #B1B8A8, #D3F0EE is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #32281f; --color-2: #564f3d; --color-3: #796e58; --color-4: #b1b8a8; --color-5: #d3f0ee. 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. Restrained colors convey professionalism and trust. 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