← Back to Editor

#8D7976 · #4E6B76 · #ADB9B1 · #D4D6BF · #F5E6D1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#8D7976

Crimson · Gray · Warm Gray

HEX
#8D7976
RGB
rgb(141, 121, 118)
HSL
hsl(8, 9%, 51%)
HSB
hsb(8, 16%, 55%)
CMYK
cmyk(0%, 14%, 16%, 45%)
Oklch
oklch(59.4% 0.025 28.0)

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

#4E6B76

Slate Blue · DimGray · Mint Ice

HEX
#4E6B76
RGB
rgb(78, 107, 118)
HSL
hsl(197, 20%, 38%)
HSB
hsb(197, 34%, 46%)
CMYK
cmyk(34%, 9%, 0%, 54%)
Oklch
oklch(50.9% 0.038 223.3)

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

#ADB9B1

Celadon · DarkGray · Silver Sand

HEX
#ADB9B1
RGB
rgb(173, 185, 177)
HSL
hsl(140, 8%, 70%)
HSB
hsb(140, 6%, 73%)
CMYK
cmyk(6%, 0%, 4%, 27%)
Oklch
oklch(77.4% 0.017 156.8)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#D4D6BF

Fresh Green · LightGray · Lemon Cream

HEX
#D4D6BF
RGB
rgb(212, 214, 191)
HSL
hsl(65, 22%, 79%)
HSB
hsb(65, 11%, 84%)
CMYK
cmyk(1%, 0%, 11%, 16%)
Oklch
oklch(86.8% 0.031 111.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F5E6D1

Goose Yellow · Bisque · Peach Orange

HEX
#F5E6D1
RGB
rgb(245, 230, 209)
HSL
hsl(35, 64%, 89%)
HSB
hsb(35, 15%, 96%)
CMYK
cmyk(0%, 6%, 15%, 4%)
Oklch
oklch(93.1% 0.032 76.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D7976
778A8D

Analogous

8D777F
8D7976
8D8577

Triadic

8D7976
778D7A
7A778D

Split-Comp.

8D7976
778D85
777F8D

Tetradic

8D7976
7F8D77
778A8D
85778D

Contrast Matrix WCAG 2.1 Contrast

8D7976
4E6B76
ADB9B1
D4D6BF
F5E6D1
—
1.4
Fail
2.0
Fail
2.8
Fail
3.3
AA Large
1.4
Fail
—
2.8
Fail
3.8
AA Large
4.6
AA
2.0
Fail
2.8
Fail
—
1.4
Fail
1.7
Fail
2.8
Fail
3.8
AA Large
1.4
Fail
—
1.2
Fail
3.3
AA Large
4.6
AA
1.7
Fail
1.2
Fail
—
White BG
4.1AA Large
5.7AA
2.0Fail
1.5Fail
1.2Fail
Black BG
5.1AA
3.7AA Large
10.4AAA
14.2AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848477
5B5B73
B2B2B3
D5D5C5
EFEED6

Deuteranopia

868777
595773
B2B1B3
D5D5C6
EFF1D7

Tritanopia

8C7777
4F7171
AEB4B5
D4C9CA
F4DADB

Achromatopsia

7F7F7F
646464
B5B5B5
D3D3D3
E8E8E8

Shades & Tints Shades & Tints

#8D7976

Dark
Light

#4E6B76

Dark
Light

#ADB9B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d7976;
  --color-2: #4e6b76;
  --color-3: #adb9b1;
  --color-4: #d4d6bf;
  --color-5: #f5e6d1;
}

SCSS

$color-1: #8d7976;
$color-2: #4e6b76;
$color-3: #adb9b1;
$color-4: #d4d6bf;
$color-5: #f5e6d1;

TAILWIND

colors: {
  'brand-1': '#8d7976',
  'brand-2': '#4e6b76',
  'brand-3': '#adb9b1',
  'brand-4': '#d4d6bf',
  'brand-5': '#f5e6d1',
}

RGB Array

[141, 121, 118], [78, 107, 118], [173, 185, 177], [212, 214, 191], [245, 230, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8D7976, #4E6B76, #ADB9B1, #D4D6BF, #F5E6D1 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #8d7976; --color-2: #4e6b76; --color-3: #adb9b1; --color-4: #d4d6bf; --color-5: #f5e6d1. 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 general-style 5-color scheme is especially suited for beauty, lifestyle, arts 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