#9ECE4D + #2C302E + #3F6665 + #53D3A7 + #62957F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9ECE4D

Grass Green · GreenYellow · Olive Green

HEX

#9ECE4D

RGB

rgb(158, 206, 77)

HSL

hsl(82, 57%, 55%)

HSB

hsb(82, 63%, 81%)

CMYK

cmyk(23%, 0%, 63%, 19%)

Oklch

oklch(79.2% 0.165 127.2)

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

#2C302E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2C302E

RGB

rgb(44, 48, 46)

HSL

hsl(150, 4%, 18%)

HSB

hsb(150, 8%, 19%)

CMYK

cmyk(8%, 0%, 4%, 81%)

Oklch

oklch(30.5% 0.007 164.6)

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

#3F6665

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#3F6665

RGB

rgb(63, 102, 101)

HSL

hsl(178, 24%, 32%)

HSB

hsb(178, 38%, 40%)

CMYK

cmyk(38%, 0%, 1%, 60%)

Oklch

oklch(48.1% 0.044 193.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#53D3A7

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#53D3A7

RGB

rgb(83, 211, 167)

HSL

hsl(159, 59%, 58%)

HSB

hsb(159, 61%, 83%)

CMYK

cmyk(61%, 0%, 21%, 17%)

Oklch

oklch(78.4% 0.130 167.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#62957F

Mineral Blue · SlateGray · Olive Green

HEX

#62957F

RGB

rgb(98, 149, 127)

HSL

hsl(154, 21%, 48%)

HSB

hsb(154, 34%, 58%)

CMYK

cmyk(34%, 0%, 15%, 42%)

Oklch

oklch(62.7% 0.064 165.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9ECE4D

7B4BCE

Analogous

CEBC4B

9ECE4D

5CCE4B

Triadic

9ECE4D

4B9ECE

CE4B9E

Split-Comp.

9ECE4D

4B5CCE

BC4BCE

Tetradic

9ECE4D

4BCEBC

7B4BCE

CE4B5C

Contrast Matrix WCAG 2.1 Contrast

9ECE4D	2C302E	3F6665	53D3A7	62957F
—	7.3 AAA	3.5 AA Large	1.0 Fail	1.9 Fail
7.3 AAA	—	2.1 Fail	7.2 AAA	3.9 AA Large
3.5 AA Large	2.1 Fail	—	3.4 AA Large	1.9 Fail
1.0 Fail	7.2 AAA	3.4 AA Large	—	1.8 Fail
1.9 Fail	3.9 AA Large	1.9 Fail	1.8 Fail	—

White BG

1.8Fail

13.4AAA

6.4AA

1.9Fail

3.4AA Large

Black BG

11.4AAA

1.6Fail

3.3AA Large

11.2AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B36C

2E2E2E

505065

8A8CB2

787984

Deuteranopia

B0AC74

2E2D2F

4E4B65

8379B4

757186

Tritanopia

A0858A

2C2F2F

416565

59BABC

658989

Achromatopsia

B1B1B1

2F2F2F

5A5A5A

A8A8A8

838383

Shades & Tints Shades & Tints

#9ECE4D

Dark

Light

#2C302E

Dark

Light

#3F6665

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ece4d;
  --color-2: #2c302e;
  --color-3: #3f6665;
  --color-4: #53d3a7;
  --color-5: #62957f;
}

SCSS

$color-1: #9ece4d;
$color-2: #2c302e;
$color-3: #3f6665;
$color-4: #53d3a7;
$color-5: #62957f;

TAILWIND

colors: {
  'brand-1': '#9ece4d',
  'brand-2': '#2c302e',
  'brand-3': '#3f6665',
  'brand-4': '#53d3a7',
  'brand-5': '#62957f',
}

RGB Array

[158, 206, 77], [44, 48, 46], [63, 102, 101], [83, 211, 167], [98, 149, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9ECE4D, #2C302E, #3F6665, #53D3A7, #62957F 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: #9ece4d; --color-2: #2c302e; --color-3: #3f6665; --color-4: #53d3a7; --color-5: #62957f. 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