#9ADD40 + #63C231 + #748059 + #444354 + #B6EB4D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9ADD40

Grass Green · GreenYellow · Olive Green

HEX

#9ADD40

RGB

rgb(154, 221, 64)

HSL

hsl(86, 70%, 56%)

HSB

hsb(86, 71%, 87%)

CMYK

cmyk(30%, 0%, 71%, 13%)

Oklch

oklch(82.4% 0.195 130.1)

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

#63C231

Pine Green · LimeGreen · Olive Green

HEX

#63C231

RGB

rgb(99, 194, 49)

HSL

hsl(99, 60%, 48%)

HSB

hsb(99, 75%, 76%)

CMYK

cmyk(49%, 0%, 75%, 24%)

Oklch

oklch(72.8% 0.198 137.2)

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

#748059

Grass Green · DimGray · Olive Green

HEX

#748059

RGB

rgb(116, 128, 89)

HSL

hsl(78, 18%, 43%)

HSB

hsb(78, 30%, 50%)

CMYK

cmyk(9%, 0%, 30%, 50%)

Oklch

oklch(57.9% 0.059 122.1)

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

#444354

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#444354

RGB

rgb(68, 67, 84)

HSL

hsl(244, 11%, 30%)

HSB

hsb(244, 20%, 33%)

CMYK

cmyk(19%, 20%, 0%, 67%)

Oklch

oklch(39.1% 0.029 287.7)

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

#B6EB4D

Willow Green · GreenYellow · Apple Green

HEX

#B6EB4D

RGB

rgb(182, 235, 77)

HSL

hsl(80, 80%, 61%)

HSB

hsb(80, 67%, 92%)

CMYK

cmyk(23%, 0%, 67%, 8%)

Oklch

oklch(87.4% 0.191 126.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9ADD40

8440DD

Analogous

DDD340

9ADD40

4BDD40

Triadic

9ADD40

4099DD

DD4099

Split-Comp.

9ADD40

404BDD

D340DD

Tetradic

9ADD40

40DDD3

8440DD

DD404B

Contrast Matrix WCAG 2.1 Contrast

9ADD40	63C231	748059	444354	B6EB4D
—	1.4 Fail	2.6 Fail	5.9 AA	1.2 Fail
1.4 Fail	—	1.9 Fail	4.3 AA Large	1.6 Fail
2.6 Fail	1.9 Fail	—	2.3 Fail	3.0 AA Large
5.9 AA	4.3 AA Large	2.3 Fail	—	6.9 AA
1.2 Fail	1.6 Fail	3.0 AA Large	6.9 AA	—

White BG

1.6Fail

2.3Fail

4.2AA Large

9.6AAA

1.4Fail

Black BG

12.8AAA

9.3AAA

5.0AA

2.2Fail

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B866

8C8D54

797962

444450

CDCD73

Deuteranopia

B3AE6F

87805D

797865

44444F

CAC67C

Tritanopia

9D848B

687076

756A6C

444D4C

B99198

Achromatopsia

B7B7B7

959595

787878

454545

C9C9C9

Shades & Tints Shades & Tints

#9ADD40

Dark

Light

#63C231

Dark

Light

#748059

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9add40;
  --color-2: #63c231;
  --color-3: #748059;
  --color-4: #444354;
  --color-5: #b6eb4d;
}

SCSS

$color-1: #9add40;
$color-2: #63c231;
$color-3: #748059;
$color-4: #444354;
$color-5: #b6eb4d;

TAILWIND

colors: {
  'brand-1': '#9add40',
  'brand-2': '#63c231',
  'brand-3': '#748059',
  'brand-4': '#444354',
  'brand-5': '#b6eb4d',
}

RGB Array

[154, 221, 64], [99, 194, 49], [116, 128, 89], [68, 67, 84], [182, 235, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9ADD40, #63C231, #748059, #444354, #B6EB4D 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: #9add40; --color-2: #63c231; --color-3: #748059; --color-4: #444354; --color-5: #b6eb4d. 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