← Back to Editor

#2F1D13 · #957C54 · #A09881 · #A4B8AF · #D2D3D7

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

#2F1D13

Tangerine · Black · Cinnamon

HEX
#2F1D13
RGB
rgb(47, 29, 19)
HSL
hsl(21, 42%, 13%)
HSB
hsb(21, 60%, 18%)
CMYK
cmyk(0%, 38%, 60%, 82%)
Oklch
oklch(25.1% 0.034 49.7)

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

#957C54

Ochre · Gray · Amber Brown

HEX
#957C54
RGB
rgb(149, 124, 84)
HSL
hsl(37, 28%, 46%)
HSB
hsb(37, 44%, 58%)
CMYK
cmyk(0%, 17%, 44%, 42%)
Oklch
oklch(60.0% 0.064 78.8)

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

#A09881

Ginger · Gray · Sunflower

HEX
#A09881
RGB
rgb(160, 152, 129)
HSL
hsl(45, 14%, 57%)
HSB
hsb(45, 19%, 63%)
CMYK
cmyk(0%, 5%, 19%, 37%)
Oklch
oklch(68.0% 0.034 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#A4B8AF

Jade · DarkGray · Apple Green

HEX
#A4B8AF
RGB
rgb(164, 184, 175)
HSL
hsl(153, 12%, 68%)
HSB
hsb(153, 11%, 72%)
CMYK
cmyk(11%, 0%, 5%, 28%)
Oklch
oklch(76.5% 0.025 166.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#D2D3D7

Silver Gray · LightGray · Pearl Gray

HEX
#D2D3D7
RGB
rgb(210, 211, 215)
HSL
hsl(228, 6%, 83%)
HSB
hsb(228, 2%, 84%)
CMYK
cmyk(2%, 2%, 0%, 16%)
Oklch
oklch(86.7% 0.006 275.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F1D13
13252F

Analogous

2F1317
2F1D13
2F2B13

Triadic

2F1D13
132F1D
1D132F

Split-Comp.

2F1D13
132F2B
13172F

Tetradic

2F1D13
172F13
13252F
2B132F

Contrast Matrix WCAG 2.1 Contrast

2F1D13
957C54
A09881
A4B8AF
D2D3D7
—
4.0
AA Large
5.6
AA
7.7
AAA
10.7
AAA
4.0
AA Large
—
1.4
Fail
1.9
Fail
2.7
Fail
5.6
AA
1.4
Fail
—
1.4
Fail
1.9
Fail
7.7
AAA
1.9
Fail
1.4
Fail
—
1.4
Fail
10.7
AAA
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
16.1AAA
4.0AA Large
2.9Fail
2.1Fail
1.5Fail
Black BG
1.3Fail
5.3AA
7.3AAA
10.1AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272715
8A8A5E
9D9C87
ADADB1
D2D2D6

Deuteranopia

282A16
8C8E60
9D9E88
ACAAB2
D2D2D6

Tritanopia

2E1718
946567
A08B8C
A5B3B3
D2D5D5

Achromatopsia

212121
7F7F7F
989898
B1B1B1
D3D3D3

Shades & Tints Shades & Tints

#2F1D13

Dark
Light

#957C54

Dark
Light

#A09881

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f1d13;
  --color-2: #957c54;
  --color-3: #a09881;
  --color-4: #a4b8af;
  --color-5: #d2d3d7;
}

SCSS

$color-1: #2f1d13;
$color-2: #957c54;
$color-3: #a09881;
$color-4: #a4b8af;
$color-5: #d2d3d7;

TAILWIND

colors: {
  'brand-1': '#2f1d13',
  'brand-2': '#957c54',
  'brand-3': '#a09881',
  'brand-4': '#a4b8af',
  'brand-5': '#d2d3d7',
}

RGB Array

[47, 29, 19], [149, 124, 84], [160, 152, 129], [164, 184, 175], [210, 211, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F1D13, #957C54, #A09881, #A4B8AF, #D2D3D7 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: #2f1d13; --color-2: #957c54; --color-3: #a09881; --color-4: #a4b8af; --color-5: #d2d3d7. 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