← Back to Editor

#9D08E4 · #89963E · #8B5C99 · #9CB39A · #89B991

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9D08E4

Royal Purple · DarkViolet · Violet

HEX
#9D08E4
RGB
rgb(157, 8, 228)
HSL
hsl(281, 93%, 46%)
HSB
hsb(281, 96%, 89%)
CMYK
cmyk(31%, 96%, 0%, 11%)
Oklch
oklch(54.3% 0.274 308.7)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#89963E

Autumn Sage · Olive · Honey Gold

HEX
#89963E
RGB
rgb(137, 150, 62)
HSL
hsl(69, 42%, 42%)
HSB
hsb(69, 59%, 59%)
CMYK
cmyk(9%, 0%, 59%, 41%)
Oklch
oklch(64.4% 0.114 116.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#8B5C99

Dark Plum · Gray · Violet

HEX
#8B5C99
RGB
rgb(139, 92, 153)
HSL
hsl(286, 25%, 48%)
HSB
hsb(286, 40%, 60%)
CMYK
cmyk(9%, 40%, 0%, 40%)
Oklch
oklch(54.9% 0.106 318.2)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#9CB39A

Celadon · DarkSeaGreen · Apple Green

HEX
#9CB39A
RGB
rgb(156, 179, 154)
HSL
hsl(115, 14%, 65%)
HSB
hsb(115, 14%, 70%)
CMYK
cmyk(13%, 0%, 14%, 30%)
Oklch
oklch(74.2% 0.044 143.0)

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

#89B991

Celadon · DarkSeaGreen · Apple Green

HEX
#89B991
RGB
rgb(137, 185, 145)
HSL
hsl(130, 26%, 63%)
HSB
hsb(130, 26%, 73%)
CMYK
cmyk(26%, 0%, 22%, 27%)
Oklch
oklch(74.1% 0.077 149.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D08E4
4DE208

Analogous

3008E2
9D08E4
E208BA

Triadic

9D08E4
E29D08
08E29D

Split-Comp.

9D08E4
BAE208
08E230

Tetradic

9D08E4
E23008
4DE208
08BAE2

Contrast Matrix WCAG 2.1 Contrast

9D08E4
89963E
8B5C99
9CB39A
89B991
—
1.8
Fail
1.1
Fail
2.6
Fail
2.6
Fail
1.8
Fail
—
1.6
Fail
1.4
Fail
1.4
Fail
1.1
Fail
1.6
Fail
—
2.3
Fail
2.3
Fail
2.6
Fail
1.4
Fail
2.3
Fail
—
1.0
Fail
2.6
Fail
1.4
Fail
2.3
Fail
1.0
Fail
—
White BG
5.9AA
3.2AA Large
5.1AA
2.3Fail
2.2Fail
Black BG
3.6AA Large
6.5AA
4.1AA Large
9.3AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5BAF
8F8F53
77768A
A6A6A0
9E9E9B

Deuteranopia

6570A2
8E8D58
797D87
A5A3A2
9B979D

Tritanopia

96857C
8A6468
897F7C
9DA5A6
8BA2A4

Achromatopsia

4E4E4E
888888
717171
A9A9A9
A6A6A6

Shades & Tints Shades & Tints

#9D08E4

Dark
Light

#89963E

Dark
Light

#8B5C99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d08e4;
  --color-2: #89963e;
  --color-3: #8b5c99;
  --color-4: #9cb39a;
  --color-5: #89b991;
}

SCSS

$color-1: #9d08e4;
$color-2: #89963e;
$color-3: #8b5c99;
$color-4: #9cb39a;
$color-5: #89b991;

TAILWIND

colors: {
  'brand-1': '#9d08e4',
  'brand-2': '#89963e',
  'brand-3': '#8b5c99',
  'brand-4': '#9cb39a',
  'brand-5': '#89b991',
}

RGB Array

[157, 8, 228], [137, 150, 62], [139, 92, 153], [156, 179, 154], [137, 185, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D08E4, #89963E, #8B5C99, #9CB39A, #89B991 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: #9d08e4; --color-2: #89963e; --color-3: #8b5c99; --color-4: #9cb39a; --color-5: #89b991. 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. 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