← Back to Editor

#856F61 · #827981 · #B391AD · #FCB197 · #F5E1D5

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#856F61

Tangerine · DimGray · Amber Brown

HEX
#856F61
RGB
rgb(133, 111, 97)
HSL
hsl(23, 16%, 45%)
HSB
hsb(23, 27%, 52%)
CMYK
cmyk(0%, 17%, 27%, 48%)
Oklch
oklch(55.9% 0.035 54.3)

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

#827981

Ink Gray · Gray · Warm Gray

HEX
#827981
RGB
rgb(130, 121, 129)
HSL
hsl(307, 4%, 49%)
HSB
hsb(307, 7%, 51%)
CMYK
cmyk(0%, 7%, 1%, 49%)
Oklch
oklch(58.7% 0.016 329.3)

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

#B391AD

Mauve · DarkGray · Lilac Purple

HEX
#B391AD
RGB
rgb(179, 145, 173)
HSL
hsl(311, 18%, 64%)
HSB
hsb(311, 19%, 70%)
CMYK
cmyk(0%, 19%, 3%, 30%)
Oklch
oklch(69.7% 0.056 332.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#FCB197

Apricot · LightSalmon · Peach Orange

HEX
#FCB197
RGB
rgb(252, 177, 151)
HSL
hsl(15, 94%, 79%)
HSB
hsb(15, 40%, 99%)
CMYK
cmyk(0%, 30%, 40%, 1%)
Oklch
oklch(82.5% 0.095 39.9)

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

#F5E1D5

Apricot · Bisque · Peach Orange

HEX
#F5E1D5
RGB
rgb(245, 225, 213)
HSL
hsl(22, 62%, 90%)
HSB
hsb(22, 13%, 96%)
CMYK
cmyk(0%, 8%, 13%, 4%)
Oklch
oklch(92.3% 0.027 53.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

856F61
607785

Analogous

856065
856F61
858160

Triadic

856F61
60856E
6E6085

Split-Comp.

856F61
608581
606585

Tetradic

856F61
658560
607785
816085

Contrast Matrix WCAG 2.1 Contrast

856F61
827981
B391AD
FCB197
F5E1D5
—
1.1
Fail
1.7
Fail
2.7
Fail
3.7
AA Large
1.1
Fail
—
1.5
Fail
2.4
Fail
3.3
AA Large
1.7
Fail
1.5
Fail
—
1.6
Fail
2.2
Fail
2.7
Fail
2.4
Fail
1.6
Fail
—
1.4
Fail
3.7
AA Large
3.3
AA Large
2.2
Fail
1.4
Fail
—
White BG
4.7AA
4.2AA Large
2.8Fail
1.8Fail
1.3Fail
Black BG
4.4AA Large
5.0AA
7.6AAA
11.9AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B64
7E7E7F
A4A4A6
DCDB9D
ECECD8

Deuteranopia

7D7E65
7F7F7F
A6A9A5
E0E59F
EEEFD9

Tritanopia

846768
827E7D
B1A1A0
F8A2A3
F4DADB

Achromatopsia

747474
7D7D7D
9E9E9E
C4C4C4
E6E6E6

Shades & Tints Shades & Tints

#856F61

Dark
Light

#827981

Dark
Light

#B391AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #856f61;
  --color-2: #827981;
  --color-3: #b391ad;
  --color-4: #fcb197;
  --color-5: #f5e1d5;
}

SCSS

$color-1: #856f61;
$color-2: #827981;
$color-3: #b391ad;
$color-4: #fcb197;
$color-5: #f5e1d5;

TAILWIND

colors: {
  'brand-1': '#856f61',
  'brand-2': '#827981',
  'brand-3': '#b391ad',
  'brand-4': '#fcb197',
  'brand-5': '#f5e1d5',
}

RGB Array

[133, 111, 97], [130, 121, 129], [179, 145, 173], [252, 177, 151], [245, 225, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #856F61, #827981, #B391AD, #FCB197, #F5E1D5 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #856f61; --color-2: #827981; --color-3: #b391ad; --color-4: #fcb197; --color-5: #f5e1d5. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 dark-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