#332C2E + #39423B + #299E64 + #76E311 + #BBFF03 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#332C2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#332C2E

RGB

rgb(51, 44, 46)

HSL

hsl(343, 7%, 19%)

HSB

hsb(343, 14%, 20%)

CMYK

cmyk(0%, 14%, 10%, 80%)

Oklch

oklch(30.1% 0.011 358.6)

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

#39423B

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#39423B

RGB

rgb(57, 66, 59)

HSL

hsl(133, 7%, 24%)

HSB

hsb(133, 14%, 26%)

CMYK

cmyk(14%, 0%, 11%, 74%)

Oklch

oklch(36.8% 0.017 152.1)

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

#299E64

Mineral Blue · SeaGreen · Forest Green

HEX

#299E64

RGB

rgb(41, 158, 100)

HSL

hsl(150, 59%, 39%)

HSB

hsb(150, 74%, 62%)

CMYK

cmyk(74%, 0%, 37%, 38%)

Oklch

oklch(62.1% 0.135 156.5)

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

#76E311

Pine Green · Chartreuse · Olive Green

HEX

#76E311

RGB

rgb(118, 227, 17)

HSL

hsl(91, 86%, 48%)

HSB

hsb(91, 93%, 89%)

CMYK

cmyk(48%, 0%, 93%, 11%)

Oklch

oklch(81.8% 0.238 135.5)

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

#BBFF03

Grass Green · GreenYellow · Olive Green

HEX

#BBFF03

RGB

rgb(187, 255, 3)

HSL

hsl(76, 100%, 51%)

HSB

hsb(76, 99%, 100%)

CMYK

cmyk(27%, 0%, 99%, 0%)

Oklch

oklch(92.0% 0.236 126.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332C2E

2D3432

Analogous

342D32

332C2E

342F2D

Triadic

332C2E

2F342D

2D2F34

Split-Comp.

332C2E

2D342F

2D3234

Tetradic

332C2E

32342D

2D3432

2F2D34

Contrast Matrix WCAG 2.1 Contrast

332C2E	39423B	299E64	76E311	BBFF03
—	1.3 Fail	4.0 AA Large	8.3 AAA	11.3 AAA
1.3 Fail	—	3.1 AA Large	6.3 AA	8.6 AAA
4.0 AA Large	3.1 AA Large	—	2.1 Fail	2.8 Fail
8.3 AAA	6.3 AA	2.1 Fail	—	1.4 Fail
11.3 AAA	8.6 AAA	2.8 Fail	1.4 Fail	—

White BG

13.6AAA

10.4AAA

3.4AA Large

1.6Fail

1.2Fail

Black BG

1.5Fail

2.0Fail

6.2AA

12.8AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30302E

3D3D3D

5C5D72

A5A644

D8D940

Deuteranopia

30312D

3C3C3D

554C75

9F9750

D5CF4F

Tritanopia

332D2D

393E3E

2F7D80

7B6C75

BE707B

Achromatopsia

2E2E2E

3F3F3F

747474

AAAAAA

CECECE

Shades & Tints Shades & Tints

#332C2E

Dark

Light

#39423B

Dark

Light

#299E64

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332c2e;
  --color-2: #39423b;
  --color-3: #299e64;
  --color-4: #76e311;
  --color-5: #bbff03;
}

SCSS

$color-1: #332c2e;
$color-2: #39423b;
$color-3: #299e64;
$color-4: #76e311;
$color-5: #bbff03;

TAILWIND

colors: {
  'brand-1': '#332c2e',
  'brand-2': '#39423b',
  'brand-3': '#299e64',
  'brand-4': '#76e311',
  'brand-5': '#bbff03',
}

RGB Array

[51, 44, 46], [57, 66, 59], [41, 158, 100], [118, 227, 17], [187, 255, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332C2E, #39423B, #299E64, #76E311, #BBFF03 is ideal for: tech websites, dark mode UIs, game UIs. 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: #332c2e; --color-2: #39423b; --color-3: #299e64; --color-4: #76e311; --color-5: #bbff03. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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