← Back to Editor

#827F8A · #96AAA2 · #B4DCBE · #D8E7BF · #E0E1A4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#827F8A

Ash · Gray · Warm Gray

HEX
#827F8A
RGB
rgb(130, 127, 138)
HSL
hsl(256, 4%, 52%)
HSB
hsb(256, 8%, 54%)
CMYK
cmyk(6%, 8%, 0%, 46%)
Oklch
oklch(60.3% 0.017 298.4)

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

#96AAA2

Jade · DarkGray · Apple Green

HEX
#96AAA2
RGB
rgb(150, 170, 162)
HSL
hsl(156, 11%, 63%)
HSB
hsb(156, 12%, 67%)
CMYK
cmyk(12%, 0%, 5%, 33%)
Oklch
oklch(72.0% 0.025 169.6)

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

#B4DCBE

Celadon · Silver · Apple Green

HEX
#B4DCBE
RGB
rgb(180, 220, 190)
HSL
hsl(135, 36%, 78%)
HSB
hsb(135, 18%, 86%)
CMYK
cmyk(18%, 0%, 14%, 14%)
Oklch
oklch(85.8% 0.059 152.6)

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

#D8E7BF

Willow Green · LightGray · Mint Green

HEX
#D8E7BF
RGB
rgb(216, 231, 191)
HSL
hsl(83, 45%, 83%)
HSB
hsb(83, 17%, 91%)
CMYK
cmyk(6%, 0%, 17%, 9%)
Oklch
oklch(90.6% 0.055 124.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#E0E1A4

Fresh Green · Wheat · Lemon Cream

HEX
#E0E1A4
RGB
rgb(224, 225, 164)
HSL
hsl(61, 50%, 76%)
HSB
hsb(61, 27%, 88%)
CMYK
cmyk(0%, 0%, 27%, 12%)
Oklch
oklch(89.4% 0.079 108.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

827F8A
878980

Analogous

808289
827F8A
878089

Triadic

827F8A
898280
808982

Split-Comp.

827F8A
898780
828980

Tetradic

827F8A
898082
878980
808987

Contrast Matrix WCAG 2.1 Contrast

827F8A
96AAA2
B4DCBE
D8E7BF
E0E1A4
—
1.6
Fail
2.6
Fail
3.0
AA Large
2.9
Fail
1.6
Fail
—
1.6
Fail
1.9
Fail
1.8
Fail
2.6
Fail
1.6
Fail
—
1.2
Fail
1.1
Fail
3.0
AA Large
1.9
Fail
1.2
Fail
—
1.0
Fail
2.9
Fail
1.8
Fail
1.1
Fail
1.0
Fail
—
White BG
3.9AA Large
2.5Fail
1.5Fail
1.3Fail
1.4Fail
Black BG
5.4AA
8.6AAA
13.9AAA
16.1AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818187
9F9FA4
C5C6C5
DEDFC9
E0E0B3

Deuteranopia

818187
9E9CA4
C3C0C7
DEDDCB
E0E0B6

Tritanopia

828585
97A5A6
B6CBCC
D9D0D2
E0BEC1

Achromatopsia

818181
A3A3A3
CDCDCD
DEDEDE
DADADA

Shades & Tints Shades & Tints

#827F8A

Dark
Light

#96AAA2

Dark
Light

#B4DCBE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #827f8a;
  --color-2: #96aaa2;
  --color-3: #b4dcbe;
  --color-4: #d8e7bf;
  --color-5: #e0e1a4;
}

SCSS

$color-1: #827f8a;
$color-2: #96aaa2;
$color-3: #b4dcbe;
$color-4: #d8e7bf;
$color-5: #e0e1a4;

TAILWIND

colors: {
  'brand-1': '#827f8a',
  'brand-2': '#96aaa2',
  'brand-3': '#b4dcbe',
  'brand-4': '#d8e7bf',
  'brand-5': '#e0e1a4',
}

RGB Array

[130, 127, 138], [150, 170, 162], [180, 220, 190], [216, 231, 191], [224, 225, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #827F8A, #96AAA2, #B4DCBE, #D8E7BF, #E0E1A4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #827f8a; --color-2: #96aaa2; --color-3: #b4dcbe; --color-4: #d8e7bf; --color-5: #e0e1a4. 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. 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