#9C98A8 + #8BB2A7 + #7ACCA7 + #68E5A6 + #57FFA5 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9C98A8

Wisteria · DarkGray · Silver Sand

HEX

#9C98A8

RGB

rgb(156, 152, 168)

HSL

hsl(255, 8%, 63%)

HSB

hsb(255, 10%, 66%)

CMYK

cmyk(7%, 10%, 0%, 34%)

Oklch

oklch(68.8% 0.024 297.2)

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

#8BB2A7

Jade · DarkSeaGreen · Lake Green

HEX

#8BB2A7

RGB

rgb(139, 178, 167)

HSL

hsl(163, 20%, 62%)

HSB

hsb(163, 22%, 70%)

CMYK

cmyk(22%, 0%, 6%, 30%)

Oklch

oklch(73.2% 0.045 175.9)

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

#7ACCA7

Jade · MediumAquaMarine · Apple Green

HEX

#7ACCA7

RGB

rgb(122, 204, 167)

HSL

hsl(153, 45%, 64%)

HSB

hsb(153, 40%, 80%)

CMYK

cmyk(40%, 0%, 18%, 20%)

Oklch

oklch(78.2% 0.097 163.6)

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

#68E5A6

Jade · MediumAquaMarine · Apple Green

HEX

#68E5A6

RGB

rgb(104, 229, 166)

HSL

hsl(150, 71%, 65%)

HSB

hsb(150, 55%, 90%)

CMYK

cmyk(55%, 0%, 28%, 10%)

Oklch

oklch(83.4% 0.144 158.9)

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

#57FFA5

Emerald · MediumAquaMarine · Apple Green

HEX

#57FFA5

RGB

rgb(87, 255, 165)

HSL

hsl(148, 100%, 67%)

HSB

hsb(148, 66%, 100%)

CMYK

cmyk(66%, 0%, 35%, 0%)

Oklch

oklch(89.2% 0.187 155.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C98A8

A4A899

Analogous

999DA8

9C98A8

A499A8

Triadic

9C98A8

A89D99

99A89D

Split-Comp.

9C98A8

A8A499

9DA899

Tetradic

9C98A8

A8999D

A4A899

99A8A4

Contrast Matrix WCAG 2.1 Contrast

9C98A8	8BB2A7	7ACCA7	68E5A6	57FFA5
—	1.2 Fail	1.5 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

2.8Fail

2.3Fail

1.9Fail

1.6Fail

1.3Fail

Black BG

7.5AAA

9.0AAA

11.0AAA

13.3AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9AA4

9C9CAA

9E9EB0

9E9FB5

A0A1BB

Deuteranopia

9B9BA3

9A97AA

9993B2

978EB9

9689C0

Tritanopia

9CA1A0

8DACAC

7EB7B9

6EC1C4

5FCCD0

Achromatopsia

9B9B9B

A5A5A5

AFAFAF

B8B8B8

C3C3C3

Shades & Tints Shades & Tints

#9C98A8

Dark

Light

#8BB2A7

Dark

Light

#7ACCA7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c98a8;
  --color-2: #8bb2a7;
  --color-3: #7acca7;
  --color-4: #68e5a6;
  --color-5: #57ffa5;
}

SCSS

$color-1: #9c98a8;
$color-2: #8bb2a7;
$color-3: #7acca7;
$color-4: #68e5a6;
$color-5: #57ffa5;

TAILWIND

colors: {
  'brand-1': '#9c98a8',
  'brand-2': '#8bb2a7',
  'brand-3': '#7acca7',
  'brand-4': '#68e5a6',
  'brand-5': '#57ffa5',
}

RGB Array

[156, 152, 168], [139, 178, 167], [122, 204, 167], [104, 229, 166], [87, 255, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #9C98A8, #8BB2A7, #7ACCA7, #68E5A6, #57FFA5 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9c98a8; --color-2: #8bb2a7; --color-3: #7acca7; --color-4: #68e5a6; --color-5: #57ffa5. 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 sunset-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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