← Back to Editor

#B7CAB9 · #887D74 · #7D6B63 · #715E57 · #5C4642

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

#B7CAB9

Celadon · Silver · Apple Green

HEX
#B7CAB9
RGB
rgb(183, 202, 185)
HSL
hsl(126, 15%, 75%)
HSB
hsb(126, 9%, 79%)
CMYK
cmyk(9%, 0%, 8%, 21%)
Oklch
oklch(82.0% 0.031 148.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#887D74

Tangerine · Gray · Warm Gray

HEX
#887D74
RGB
rgb(136, 125, 116)
HSL
hsl(27, 8%, 49%)
HSB
hsb(27, 15%, 53%)
CMYK
cmyk(0%, 8%, 15%, 47%)
Oklch
oklch(59.7% 0.019 61.8)

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

#7D6B63

Tangerine · DimGray · Amber Brown

HEX
#7D6B63
RGB
rgb(125, 107, 99)
HSL
hsl(18, 12%, 44%)
HSB
hsb(18, 21%, 49%)
CMYK
cmyk(0%, 14%, 21%, 51%)
Oklch
oklch(54.3% 0.026 45.4)

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

#715E57

Tangerine · DimGray · Amber Brown

HEX
#715E57
RGB
rgb(113, 94, 87)
HSL
hsl(16, 13%, 39%)
HSB
hsb(16, 23%, 44%)
CMYK
cmyk(0%, 17%, 23%, 56%)
Oklch
oklch(49.8% 0.027 41.3)

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

#5C4642

Crimson · DarkOliveGreen · Wine Red

HEX
#5C4642
RGB
rgb(92, 70, 66)
HSL
hsl(9, 16%, 31%)
HSB
hsb(9, 28%, 36%)
CMYK
cmyk(0%, 24%, 28%, 64%)
Oklch
oklch(41.6% 0.031 30.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7CAB9
C9B6C7

Analogous

BDC9B6
B7CAB9
B6C9C1

Triadic

B7CAB9
B8B6C9
C9B8B6

Split-Comp.

B7CAB9
C1B6C9
C9B6BD

Tetradic

B7CAB9
B6BDC9
C9B6C7
C9C1B6

Contrast Matrix WCAG 2.1 Contrast

B7CAB9
887D74
7D6B63
715E57
5C4642
—
2.3
Fail
2.9
Fail
3.5
AA Large
5.0
AA
2.3
Fail
—
1.3
Fail
1.5
Fail
2.2
Fail
2.9
Fail
1.3
Fail
—
1.2
Fail
1.7
Fail
3.5
AA Large
1.5
Fail
1.2
Fail
—
1.4
Fail
5.0
AA
2.2
Fail
1.7
Fail
1.4
Fail
—
White BG
1.7Fail
4.0AA Large
5.1AA
6.1AA
8.7AAA
Black BG
12.2AAA
5.2AA
4.2AA Large
3.4AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFBD
838376
757565
696959
525243

Deuteranopia

BEBDBE
848577
767865
6A6B59
545543

Tritanopia

B8C0C1
877878
7C6667
705A5A
5B4444

Achromatopsia

C2C2C2
7F7F7F
6F6F6F
636363
4C4C4C

Shades & Tints Shades & Tints

#B7CAB9

Dark
Light

#887D74

Dark
Light

#7D6B63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7cab9;
  --color-2: #887d74;
  --color-3: #7d6b63;
  --color-4: #715e57;
  --color-5: #5c4642;
}

SCSS

$color-1: #b7cab9;
$color-2: #887d74;
$color-3: #7d6b63;
$color-4: #715e57;
$color-5: #5c4642;

TAILWIND

colors: {
  'brand-1': '#b7cab9',
  'brand-2': '#887d74',
  'brand-3': '#7d6b63',
  'brand-4': '#715e57',
  'brand-5': '#5c4642',
}

RGB Array

[183, 202, 185], [136, 125, 116], [125, 107, 99], [113, 94, 87], [92, 70, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7CAB9, #887D74, #7D6B63, #715E57, #5C4642 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: #b7cab9; --color-2: #887d74; --color-3: #7d6b63; --color-4: #715e57; --color-5: #5c4642. 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