← Back to Editor

#9DD8C1 · #88B1AA · #84918E · #807575 · #785A5A

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 Library

Color Details Color Details

#9DD8C1

Jade · LightSteelBlue · Apple Green

HEX
#9DD8C1
RGB
rgb(157, 216, 193)
HSL
hsl(157, 43%, 73%)
HSB
hsb(157, 27%, 85%)
CMYK
cmyk(27%, 0%, 11%, 15%)
Oklch
oklch(83.5% 0.069 168.6)

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

#88B1AA

Jade · DarkSeaGreen · Lake Green

HEX
#88B1AA
RGB
rgb(136, 177, 170)
HSL
hsl(170, 21%, 61%)
HSB
hsb(170, 23%, 69%)
CMYK
cmyk(23%, 0%, 4%, 31%)
Oklch
oklch(72.9% 0.045 183.4)

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

#84918E

Ash · LightSlateGray · Warm Gray

HEX
#84918E
RGB
rgb(132, 145, 142)
HSL
hsl(166, 6%, 54%)
HSB
hsb(166, 9%, 57%)
CMYK
cmyk(9%, 0%, 2%, 43%)
Oklch
oklch(64.5% 0.016 180.4)

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

#807575

Ink Gray · Gray · Warm Gray

HEX
#807575
RGB
rgb(128, 117, 117)
HSL
hsl(0, 4%, 48%)
HSB
hsb(0, 9%, 50%)
CMYK
cmyk(0%, 9%, 9%, 50%)
Oklch
oklch(57.2% 0.014 17.6)

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

#785A5A

Crimson · DimGray · Passion Red

HEX
#785A5A
RGB
rgb(120, 90, 90)
HSL
hsl(0, 14%, 41%)
HSB
hsb(0, 25%, 47%)
CMYK
cmyk(0%, 25%, 25%, 53%)
Oklch
oklch(49.9% 0.040 18.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DD8C1
D89DB3

Analogous

9DD8A3
9DD8C1
9DD1D8

Triadic

9DD8C1
C19DD8
D8C19D

Split-Comp.

9DD8C1
D89DD1
D8A39D

Tetradic

9DD8C1
A39DD8
D89DB3
D1D89D

Contrast Matrix WCAG 2.1 Contrast

9DD8C1
88B1AA
84918E
807575
785A5A
—
1.5
Fail
2.0
Fail
2.8
Fail
3.8
AA Large
1.5
Fail
—
1.4
Fail
1.9
Fail
2.6
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
2.8
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
3.8
AA Large
2.6
Fail
1.9
Fail
1.4
Fail
—
White BG
1.6Fail
2.4Fail
3.3AA Large
4.4AA Large
6.2AA
Black BG
13.0AAA
8.9AAA
6.4AA
4.7AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7C7
9A9AAC
8A8A8F
7B7B75
6B6B5A

Deuteranopia

B3AFC8
9794AC
89888F
7C7D75
6D6F5A

Tritanopia

A0CBCC
8AADAD
858F8F
7F7575
775A5A

Achromatopsia

C4C4C4
A4A4A4
8D8D8D
787878
636363

Shades & Tints Shades & Tints

#9DD8C1

Dark
Light

#88B1AA

Dark
Light

#84918E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dd8c1;
  --color-2: #88b1aa;
  --color-3: #84918e;
  --color-4: #807575;
  --color-5: #785a5a;
}

SCSS

$color-1: #9dd8c1;
$color-2: #88b1aa;
$color-3: #84918e;
$color-4: #807575;
$color-5: #785a5a;

TAILWIND

colors: {
  'brand-1': '#9dd8c1',
  'brand-2': '#88b1aa',
  'brand-3': '#84918e',
  'brand-4': '#807575',
  'brand-5': '#785a5a',
}

RGB Array

[157, 216, 193], [136, 177, 170], [132, 145, 142], [128, 117, 117], [120, 90, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DD8C1, #88B1AA, #84918E, #807575, #785A5A 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: #9dd8c1; --color-2: #88b1aa; --color-3: #84918e; --color-4: #807575; --color-5: #785a5a. 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 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