← Back to Editor

#B7C6AF · #B2B69B · #ABA285 · #99827A · #836565

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B7C6AF

Celadon · Silver · Apple Green

HEX
#B7C6AF
RGB
rgb(183, 198, 175)
HSL
hsl(99, 17%, 73%)
HSB
hsb(99, 12%, 78%)
CMYK
cmyk(8%, 0%, 12%, 22%)
Oklch
oklch(80.9% 0.036 134.5)

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

#B2B69B

Fresh Green · DarkGray · Sunflower

HEX
#B2B69B
RGB
rgb(178, 182, 155)
HSL
hsl(69, 16%, 66%)
HSB
hsb(69, 15%, 71%)
CMYK
cmyk(2%, 0%, 15%, 29%)
Oklch
oklch(76.6% 0.038 114.1)

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

#ABA285

Ginger · DarkGray · Sunflower

HEX
#ABA285
RGB
rgb(171, 162, 133)
HSL
hsl(46, 18%, 60%)
HSB
hsb(46, 22%, 67%)
CMYK
cmyk(0%, 5%, 22%, 33%)
Oklch
oklch(71.2% 0.042 92.8)

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

#99827A

Tangerine · Gray · Warm Sun

HEX
#99827A
RGB
rgb(153, 130, 122)
HSL
hsl(15, 13%, 54%)
HSB
hsb(15, 20%, 60%)
CMYK
cmyk(0%, 15%, 20%, 40%)
Oklch
oklch(62.6% 0.031 40.1)

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

#836565

Crimson · DimGray · Passion Red

HEX
#836565
RGB
rgb(131, 101, 101)
HSL
hsl(0, 13%, 45%)
HSB
hsb(0, 23%, 51%)
CMYK
cmyk(0%, 23%, 23%, 49%)
Oklch
oklch(53.7% 0.039 18.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7C6AF
BEAEC6

Analogous

C2C6AE
B7C6AF
AEC6B2

Triadic

B7C6AF
AEB7C6
C6AEB7

Split-Comp.

B7C6AF
B2AEC6
C6AEC2

Tetradic

B7C6AF
AEC2C6
BEAEC6
C6B2AE

Contrast Matrix WCAG 2.1 Contrast

B7C6AF
B2B69B
ABA285
99827A
836565
—
1.2
Fail
1.4
Fail
2.0
Fail
2.9
Fail
1.2
Fail
—
1.2
Fail
1.7
Fail
2.5
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
2.0
Fail
1.7
Fail
1.4
Fail
—
1.5
Fail
2.9
Fail
2.5
Fail
2.1
Fail
1.5
Fail
—
White BG
1.8Fail
2.1Fail
2.5Fail
3.6AA Large
5.2AA
Black BG
11.7AAA
10.1AAA
8.2AAA
5.8AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBEB5
B4B4A2
A7A78C
8F8F7C
767665

Deuteranopia

BDBCB6
B4B3A3
A8A88E
90927C
787A65

Tritanopia

B8B9BA
B2A7A8
AB9293
987D7E
826565

Achromatopsia

BFBFBF
B2B2B2
A1A1A1
888888
6E6E6E

Shades & Tints Shades & Tints

#B7C6AF

Dark
Light

#B2B69B

Dark
Light

#ABA285

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7c6af;
  --color-2: #b2b69b;
  --color-3: #aba285;
  --color-4: #99827a;
  --color-5: #836565;
}

SCSS

$color-1: #b7c6af;
$color-2: #b2b69b;
$color-3: #aba285;
$color-4: #99827a;
$color-5: #836565;

TAILWIND

colors: {
  'brand-1': '#b7c6af',
  'brand-2': '#b2b69b',
  'brand-3': '#aba285',
  'brand-4': '#99827a',
  'brand-5': '#836565',
}

RGB Array

[183, 198, 175], [178, 182, 155], [171, 162, 133], [153, 130, 122], [131, 101, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B7C6AF, #B2B69B, #ABA285, #99827A, #836565 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #b7c6af; --color-2: #b2b69b; --color-3: #aba285; --color-4: #99827a; --color-5: #836565. 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. 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. 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