#B4DF37 + #98A76F + #7D6FA6 + #6137DE + #323331 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4DF37

Grass Green · GreenYellow · Olive Green

HEX

#B4DF37

RGB

rgb(180, 223, 55)

HSL

hsl(75, 72%, 55%)

HSB

hsb(75, 75%, 87%)

CMYK

cmyk(19%, 0%, 75%, 13%)

Oklch

oklch(84.4% 0.190 123.4)

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

#98A76F

Grass Green · DarkSeaGreen · Olive Green

HEX

#98A76F

RGB

rgb(152, 167, 111)

HSL

hsl(76, 24%, 55%)

HSB

hsb(76, 34%, 65%)

CMYK

cmyk(9%, 0%, 34%, 35%)

Oklch

oklch(70.3% 0.079 120.7)

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

#7D6FA6

Deep Indigo · LightSlateGray · Navy Blue

HEX

#7D6FA6

RGB

rgb(125, 111, 166)

HSL

hsl(255, 24%, 54%)

HSB

hsb(255, 33%, 65%)

CMYK

cmyk(25%, 33%, 0%, 35%)

Oklch

oklch(57.6% 0.084 295.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#6137DE

Deep Indigo · SlateBlue · Navy Blue

HEX

#6137DE

RGB

rgb(97, 55, 222)

HSL

hsl(255, 72%, 54%)

HSB

hsb(255, 75%, 87%)

CMYK

cmyk(56%, 75%, 0%, 13%)

Oklch

oklch(49.9% 0.234 285.8)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#323331

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#323331

RGB

rgb(50, 51, 49)

HSL

hsl(90, 2%, 20%)

HSB

hsb(90, 4%, 20%)

CMYK

cmyk(2%, 0%, 4%, 80%)

Oklch

oklch(31.9% 0.004 128.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4DF37

633ADF

Analogous

DFB63A

B4DF37

63DF3A

Triadic

B4DF37

3AB6DF

DF3AB6

Split-Comp.

B4DF37

3A63DF

B63ADF

Tetradic

B4DF37

3ADFB6

633ADF

DF3A63

Contrast Matrix WCAG 2.1 Contrast

B4DF37	98A76F	7D6FA6	6137DE	323331
—	1.7 Fail	2.9 Fail	4.4 AA Large	8.2 AAA
1.7 Fail	—	1.7 Fail	2.6 Fail	4.9 AA
2.9 Fail	1.7 Fail	—	1.5 Fail	2.8 Fail
4.4 AA Large	2.6 Fail	1.5 Fail	—	1.9 Fail
8.2 AAA	4.9 AA	2.8 Fail	1.9 Fail	—

White BG

1.5Fail

2.6Fail

4.5AA Large

6.8AA

12.7AAA

Black BG

13.6AAA

8.1AAA

4.7AA

3.1AA Large

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C760

9E9F7D

777799

4F4EB6

323231

Deuteranopia

C4C169

9E9D80

787996

5154AC

323232

Tritanopia

B68087

99878A

7C8E8C

5F968F

323232

Achromatopsia

BFBFBF

9C9C9C

797979

575757

323232

Shades & Tints Shades & Tints

#B4DF37

Dark

Light

#98A76F

Dark

Light

#7D6FA6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4df37;
  --color-2: #98a76f;
  --color-3: #7d6fa6;
  --color-4: #6137de;
  --color-5: #323331;
}

SCSS

$color-1: #b4df37;
$color-2: #98a76f;
$color-3: #7d6fa6;
$color-4: #6137de;
$color-5: #323331;

TAILWIND

colors: {
  'brand-1': '#b4df37',
  'brand-2': '#98a76f',
  'brand-3': '#7d6fa6',
  'brand-4': '#6137de',
  'brand-5': '#323331',
}

RGB Array

[180, 223, 55], [152, 167, 111], [125, 111, 166], [97, 55, 222], [50, 51, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4DF37, #98A76F, #7D6FA6, #6137DE, #323331 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: #b4df37; --color-2: #98a76f; --color-3: #7d6fa6; --color-4: #6137de; --color-5: #323331. 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