← Back to Editor

#9FE831 · #E8BA31 · #CC5650 · #382759 · #5F7F96

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

#9FE831

Grass Green · GreenYellow · Olive Green

HEX
#9FE831
RGB
rgb(159, 232, 49)
HSL
hsl(84, 80%, 55%)
HSB
hsb(84, 79%, 91%)
CMYK
cmyk(31%, 0%, 79%, 9%)
Oklch
oklch(85.1% 0.213 129.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#E8BA31

Ginger · GoldenRod · Sunflower

HEX
#E8BA31
RGB
rgb(232, 186, 49)
HSL
hsl(45, 80%, 55%)
HSB
hsb(45, 79%, 91%)
CMYK
cmyk(0%, 20%, 79%, 9%)
Oklch
oklch(80.8% 0.152 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#CC5650

Crimson · Tomato · Passion Red

HEX
#CC5650
RGB
rgb(204, 86, 80)
HSL
hsl(3, 55%, 56%)
HSB
hsb(3, 61%, 80%)
CMYK
cmyk(0%, 58%, 61%, 20%)
Oklch
oklch(60.3% 0.152 25.6)

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

#382759

Deep Indigo · MidnightBlue · Eggplant

HEX
#382759
RGB
rgb(56, 39, 89)
HSL
hsl(260, 39%, 25%)
HSB
hsb(260, 56%, 35%)
CMYK
cmyk(37%, 56%, 0%, 65%)
Oklch
oklch(32.0% 0.087 296.9)

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

#5F7F96

Slate Blue · SlateGray · Navy Blue

HEX
#5F7F96
RGB
rgb(95, 127, 150)
HSL
hsl(205, 22%, 48%)
HSB
hsb(205, 37%, 59%)
CMYK
cmyk(37%, 15%, 0%, 41%)
Oklch
oklch(58.1% 0.051 240.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FE831
7A30E8

Analogous

E8D630
9FE831
43E830

Triadic

9FE831
309FE8
E8309F

Split-Comp.

9FE831
3043E8
D630E8

Tetradic

9FE831
30E8D6
7A30E8
E83043

Contrast Matrix WCAG 2.1 Contrast

9FE831
E8BA31
CC5650
382759
5F7F96
—
1.2
Fail
2.8
Fail
8.8
AAA
2.8
Fail
1.2
Fail
—
2.3
Fail
7.2
AAA
2.3
Fail
2.8
Fail
2.3
Fail
—
3.1
AA Large
1.0
Fail
8.8
AAA
7.2
AAA
3.1
AA Large
—
3.1
AA Large
2.8
Fail
2.3
Fail
1.0
Fail
3.1
AA Large
—
White BG
1.5Fail
1.8Fail
4.2AA Large
13.1AAA
4.2AA Large
Black BG
14.1AAA
11.5AAA
5.0AA
1.6Fail
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF5D
D4D452
999851
31304D
6D6D90

Deuteranopia

BAB568
D7DA5A
A0A952
32334A
6B698F

Tritanopia

A38088
E66C72
C65353
374341
618C8B

Achromatopsia

BDBDBD
B8B8B8
797979
323232
787878

Shades & Tints Shades & Tints

#9FE831

Dark
Light

#E8BA31

Dark
Light

#CC5650

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fe831;
  --color-2: #e8ba31;
  --color-3: #cc5650;
  --color-4: #382759;
  --color-5: #5f7f96;
}

SCSS

$color-1: #9fe831;
$color-2: #e8ba31;
$color-3: #cc5650;
$color-4: #382759;
$color-5: #5f7f96;

TAILWIND

colors: {
  'brand-1': '#9fe831',
  'brand-2': '#e8ba31',
  'brand-3': '#cc5650',
  'brand-4': '#382759',
  'brand-5': '#5f7f96',
}

RGB Array

[159, 232, 49], [232, 186, 49], [204, 86, 80], [56, 39, 89], [95, 127, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FE831, #E8BA31, #CC5650, #382759, #5F7F96 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: #9fe831; --color-2: #e8ba31; --color-3: #cc5650; --color-4: #382759; --color-5: #5f7f96. 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