← Back to Editor

#AB8F72 · #D9B48D · #141312 · #D9C2B2 · #4A827F

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

#AB8F72

Ginger · Gray · Warm Sun

HEX
#AB8F72
RGB
rgb(171, 143, 114)
HSL
hsl(31, 25%, 56%)
HSB
hsb(31, 33%, 67%)
CMYK
cmyk(0%, 16%, 33%, 33%)
Oklch
oklch(66.8% 0.053 67.7)

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

#D9B48D

Ginger · Tan · Warm Sun

HEX
#D9B48D
RGB
rgb(217, 180, 141)
HSL
hsl(31, 50%, 70%)
HSB
hsb(31, 35%, 85%)
CMYK
cmyk(0%, 17%, 35%, 15%)
Oklch
oklch(79.3% 0.068 68.1)

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

#141312

Ink Black · Black · Jet Black

HEX
#141312
RGB
rgb(20, 19, 18)
HSL
hsl(30, 5%, 7%)
HSB
hsb(30, 10%, 8%)
CMYK
cmyk(0%, 5%, 10%, 92%)
Oklch
oklch(18.7% 0.003 67.7)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#D9C2B2

Apricot · Silver · Peach Orange

HEX
#D9C2B2
RGB
rgb(217, 194, 178)
HSL
hsl(25, 34%, 77%)
HSB
hsb(25, 18%, 85%)
CMYK
cmyk(0%, 11%, 18%, 15%)
Oklch
oklch(82.9% 0.034 57.0)

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

#4A827F

Mineral Blue · SlateGray · Mint Ice

HEX
#4A827F
RGB
rgb(74, 130, 127)
HSL
hsl(177, 27%, 40%)
HSB
hsb(177, 43%, 51%)
CMYK
cmyk(43%, 0%, 2%, 49%)
Oklch
oklch(56.7% 0.060 191.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB8F72
738EAB

Analogous

AB7473
AB8F72
AAAB73

Triadic

AB8F72
73AB90
9073AB

Split-Comp.

AB8F72
73AAAB
7473AB

Tetradic

AB8F72
73AB74
738EAB
AB73AA

Contrast Matrix WCAG 2.1 Contrast

AB8F72
D9B48D
141312
D9C2B2
4A827F
—
1.6
Fail
6.1
AA
1.8
Fail
1.4
Fail
1.6
Fail
—
9.6
AAA
1.1
Fail
2.3
Fail
6.1
AA
9.6
AAA
—
10.9
AAA
4.2
AA Large
1.8
Fail
1.1
Fail
10.9
AAA
—
2.6
Fail
1.4
Fail
2.3
Fail
4.2
AA Large
2.6
Fail
—
White BG
3.0AA Large
1.9Fail
18.6AAA
1.7Fail
4.4AA Large
Black BG
6.9AA
10.9AAA
1.1Fail
12.3AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9F79
C9C996
141412
CFCFB6
626380

Deuteranopia

A1A37B
CBCE99
141412
D0D2B7
5F5B80

Tritanopia

AA7F80
D79EA0
141212
D8B9BA
4D8080

Achromatopsia

949494
BBBBBB
131313
C7C7C7
717171

Shades & Tints Shades & Tints

#AB8F72

Dark
Light

#D9B48D

Dark
Light

#141312

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab8f72;
  --color-2: #d9b48d;
  --color-3: #141312;
  --color-4: #d9c2b2;
  --color-5: #4a827f;
}

SCSS

$color-1: #ab8f72;
$color-2: #d9b48d;
$color-3: #141312;
$color-4: #d9c2b2;
$color-5: #4a827f;

TAILWIND

colors: {
  'brand-1': '#ab8f72',
  'brand-2': '#d9b48d',
  'brand-3': '#141312',
  'brand-4': '#d9c2b2',
  'brand-5': '#4a827f',
}

RGB Array

[171, 143, 114], [217, 180, 141], [20, 19, 18], [217, 194, 178], [74, 130, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB8F72, #D9B48D, #141312, #D9C2B2, #4A827F 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: #ab8f72; --color-2: #d9b48d; --color-3: #141312; --color-4: #d9c2b2; --color-5: #4a827f. 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