← Back to Editor

#32281F · #738460 · #7F807A · #CFC4AE · #E7CCB7

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

#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

#738460

Grass Green · DimGray · Olive Green

HEX
#738460
RGB
rgb(115, 132, 96)
HSL
hsl(88, 16%, 45%)
HSB
hsb(88, 27%, 52%)
CMYK
cmyk(13%, 0%, 27%, 48%)
Oklch
oklch(59.0% 0.056 128.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#7F807A

Ink Gray · Gray · Warm Gray

HEX
#7F807A
RGB
rgb(127, 128, 122)
HSL
hsl(70, 2%, 49%)
HSB
hsb(70, 5%, 50%)
CMYK
cmyk(1%, 0%, 5%, 50%)
Oklch
oklch(59.7% 0.009 114.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#CFC4AE

Goose Yellow · Silver · Sunflower

HEX
#CFC4AE
RGB
rgb(207, 196, 174)
HSL
hsl(40, 26%, 75%)
HSB
hsb(40, 16%, 81%)
CMYK
cmyk(0%, 5%, 16%, 19%)
Oklch
oklch(82.3% 0.032 84.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E7CCB7

Apricot · Wheat · Peach Orange

HEX
#E7CCB7
RGB
rgb(231, 204, 183)
HSL
hsl(26, 50%, 81%)
HSB
hsb(26, 21%, 91%)
CMYK
cmyk(0%, 12%, 21%, 9%)
Oklch
oklch(86.2% 0.042 60.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

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
738460
7F807A
CFC4AE
E7CCB7
—
3.6
AA Large
3.6
AA Large
8.3
AAA
9.4
AAA
3.6
AA Large
—
1.0
Fail
2.3
Fail
2.6
Fail
3.6
AA Large
1.0
Fail
—
2.3
Fail
2.6
Fail
8.3
AAA
2.3
Fail
2.3
Fail
—
1.1
Fail
9.4
AAA
2.6
Fail
2.6
Fail
1.1
Fail
—
White BG
14.4AAA
4.0AA Large
4.0AA Large
1.7Fail
1.5Fail
Black BG
1.5Fail
5.2AA
5.3AA
12.2AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E21
7A7B69
7F7F7B
CACAB3
DBDBBC

Deuteranopia

2E2F22
79786B
7F7F7C
CBCCB5
DDDFBD

Tritanopia

322323
747071
7F7D7D
CEB8B8
E6C0C1

Achromatopsia

2A2A2A
7B7B7B
7F7F7F
C5C5C5
D2D2D2

Shades & Tints Shades & Tints

#32281F

Dark
Light

#738460

Dark
Light

#7F807A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #32281f;
  --color-2: #738460;
  --color-3: #7f807a;
  --color-4: #cfc4ae;
  --color-5: #e7ccb7;
}

SCSS

$color-1: #32281f;
$color-2: #738460;
$color-3: #7f807a;
$color-4: #cfc4ae;
$color-5: #e7ccb7;

TAILWIND

colors: {
  'brand-1': '#32281f',
  'brand-2': '#738460',
  'brand-3': '#7f807a',
  'brand-4': '#cfc4ae',
  'brand-5': '#e7ccb7',
}

RGB Array

[50, 40, 31], [115, 132, 96], [127, 128, 122], [207, 196, 174], [231, 204, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #32281F, #738460, #7F807A, #CFC4AE, #E7CCB7 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: #738460; --color-3: #7f807a; --color-4: #cfc4ae; --color-5: #e7ccb7. 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