← Back to Editor

#51386F · #968895 · #B2CDAC · #486C7A · #D8CE99

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

#51386F

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#51386F
RGB
rgb(81, 56, 111)
HSL
hsl(267, 33%, 33%)
HSB
hsb(267, 50%, 44%)
CMYK
cmyk(27%, 50%, 0%, 56%)
Oklch
oklch(39.5% 0.094 303.4)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#968895

Ash · LightSlateGray · Silver Sand

HEX
#968895
RGB
rgb(150, 136, 149)
HSL
hsl(304, 6%, 56%)
HSB
hsb(304, 9%, 59%)
CMYK
cmyk(0%, 9%, 1%, 41%)
Oklch
oklch(64.3% 0.025 328.1)

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

#B2CDAC

Celadon · Silver · Apple Green

HEX
#B2CDAC
RGB
rgb(178, 205, 172)
HSL
hsl(109, 25%, 74%)
HSB
hsb(109, 16%, 80%)
CMYK
cmyk(13%, 0%, 16%, 20%)
Oklch
oklch(81.9% 0.054 140.0)

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

#486C7A

Slate Blue · DimGray · Mint Ice

HEX
#486C7A
RGB
rgb(72, 108, 122)
HSL
hsl(197, 26%, 38%)
HSB
hsb(197, 41%, 48%)
CMYK
cmyk(41%, 11%, 0%, 52%)
Oklch
oklch(51.0% 0.047 224.3)

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

#D8CE99

Fresh Green · BurlyWood · Sunflower

HEX
#D8CE99
RGB
rgb(216, 206, 153)
HSL
hsl(50, 45%, 72%)
HSB
hsb(50, 29%, 85%)
CMYK
cmyk(0%, 5%, 29%, 15%)
Oklch
oklch(84.7% 0.070 98.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

51386F
577038

Analogous

383B70
51386F
6D3870

Triadic

51386F
705138
387051

Split-Comp.

51386F
706D38
3B7038

Tetradic

51386F
70383B
577038
38706D

Contrast Matrix WCAG 2.1 Contrast

51386F
968895
B2CDAC
486C7A
D8CE99
—
2.9
Fail
5.7
AA
1.7
Fail
6.2
AA
2.9
Fail
—
2.0
Fail
1.7
Fail
2.1
Fail
5.7
AA
2.0
Fail
—
3.3
AA Large
1.1
Fail
1.7
Fail
1.7
Fail
3.3
AA Large
—
3.6
AA Large
6.2
AA
2.1
Fail
1.1
Fail
3.6
AA Large
—
White BG
9.8AAA
3.4AA Large
1.7Fail
5.7AA
1.6Fail
Black BG
2.1Fail
6.3AA
12.2AAA
3.7AA Large
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464662
909092
BEBEB4
585877
D4D4A6

Deuteranopia

484A5E
919291
BCBAB6
565376
D4D5A9

Tritanopia

505755
958F8F
B3BABC
4A7473
D8B0B2

Achromatopsia

464646
8E8E8E
C1C1C1
636363
CBCBCB

Shades & Tints Shades & Tints

#51386F

Dark
Light

#968895

Dark
Light

#B2CDAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #51386f;
  --color-2: #968895;
  --color-3: #b2cdac;
  --color-4: #486c7a;
  --color-5: #d8ce99;
}

SCSS

$color-1: #51386f;
$color-2: #968895;
$color-3: #b2cdac;
$color-4: #486c7a;
$color-5: #d8ce99;

TAILWIND

colors: {
  'brand-1': '#51386f',
  'brand-2': '#968895',
  'brand-3': '#b2cdac',
  'brand-4': '#486c7a',
  'brand-5': '#d8ce99',
}

RGB Array

[81, 56, 111], [150, 136, 149], [178, 205, 172], [72, 108, 122], [216, 206, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #51386F, #968895, #B2CDAC, #486C7A, #D8CE99 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: #51386f; --color-2: #968895; --color-3: #b2cdac; --color-4: #486c7a; --color-5: #d8ce99. 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