← Back to Editor

#96ABA6 · #584036 · #D2C1A4 · #D7D4D5 · #B4C3D3

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

#96ABA6

Jade · DarkGray · Lake Green

HEX
#96ABA6
RGB
rgb(150, 171, 166)
HSL
hsl(166, 11%, 63%)
HSB
hsb(166, 12%, 67%)
CMYK
cmyk(12%, 0%, 3%, 33%)
Oklch
oklch(72.4% 0.024 179.7)

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

#584036

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584036
RGB
rgb(88, 64, 54)
HSL
hsl(18, 24%, 28%)
HSB
hsb(18, 39%, 35%)
CMYK
cmyk(0%, 27%, 39%, 65%)
Oklch
oklch(39.5% 0.038 43.6)

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

#D2C1A4

Goose Yellow · Tan · Warm Sun

HEX
#D2C1A4
RGB
rgb(210, 193, 164)
HSL
hsl(38, 34%, 73%)
HSB
hsb(38, 22%, 82%)
CMYK
cmyk(0%, 8%, 22%, 18%)
Oklch
oklch(81.8% 0.044 81.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D7D4D5

Silver Gray · LightGray · Pearl Gray

HEX
#D7D4D5
RGB
rgb(215, 212, 213)
HSL
hsl(340, 4%, 84%)
HSB
hsb(340, 1%, 84%)
CMYK
cmyk(0%, 1%, 1%, 16%)
Oklch
oklch(87.3% 0.004 354.7)

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

#B4C3D3

Azure · LightSteelBlue · Cobalt Blue

HEX
#B4C3D3
RGB
rgb(180, 195, 211)
HSL
hsl(211, 26%, 77%)
HSB
hsb(211, 15%, 83%)
CMYK
cmyk(15%, 8%, 0%, 17%)
Oklch
oklch(81.1% 0.028 249.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96ABA6
AB969B

Analogous

96AB9C
96ABA6
96A5AB

Triadic

96ABA6
A696AB
ABA696

Split-Comp.

96ABA6
AB96A5
AB9C96

Tetradic

96ABA6
9C96AB
AB969B
A5AB96

Contrast Matrix WCAG 2.1 Contrast

96ABA6
584036
D2C1A4
D7D4D5
B4C3D3
—
3.9
AA Large
1.4
Fail
1.6
Fail
1.3
Fail
3.9
AA Large
—
5.4
AA
6.5
AA
5.3
AA
1.4
Fail
5.4
AA
—
1.2
Fail
1.0
Fail
1.6
Fail
6.5
AA
1.2
Fail
—
1.2
Fail
1.3
Fail
5.3
AA
1.0
Fail
1.2
Fail
—
White BG
2.4Fail
9.5AAA
1.8Fail
1.5Fail
1.8Fail
Black BG
8.7AAA
2.2Fail
11.9AAA
14.3AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9FA7
4E4D38
CBCAAB
D6D6D5
BABBCF

Deuteranopia

9E9CA8
4F5139
CCCDAD
D6D6D5
BAB9CE

Tritanopia

97A8A8
573A3B
D1B1B2
D7D5D5
B5CCCB

Achromatopsia

A4A4A4
464646
C3C3C3
D5D5D5
C0C0C0

Shades & Tints Shades & Tints

#96ABA6

Dark
Light

#584036

Dark
Light

#D2C1A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96aba6;
  --color-2: #584036;
  --color-3: #d2c1a4;
  --color-4: #d7d4d5;
  --color-5: #b4c3d3;
}

SCSS

$color-1: #96aba6;
$color-2: #584036;
$color-3: #d2c1a4;
$color-4: #d7d4d5;
$color-5: #b4c3d3;

TAILWIND

colors: {
  'brand-1': '#96aba6',
  'brand-2': '#584036',
  'brand-3': '#d2c1a4',
  'brand-4': '#d7d4d5',
  'brand-5': '#b4c3d3',
}

RGB Array

[150, 171, 166], [88, 64, 54], [210, 193, 164], [215, 212, 213], [180, 195, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #96ABA6, #584036, #D2C1A4, #D7D4D5, #B4C3D3 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: #96aba6; --color-2: #584036; --color-3: #d2c1a4; --color-4: #d7d4d5; --color-5: #b4c3d3. 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