#333836 + #99CC2C + #54BE98 + #315755 + #243F3E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#333836

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#333836

RGB

rgb(51, 56, 54)

HSL

hsl(156, 5%, 21%)

HSB

hsb(156, 9%, 22%)

CMYK

cmyk(9%, 0%, 4%, 78%)

Oklch

oklch(33.5% 0.008 170.0)

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

#99CC2C

Grass Green · GreenYellow · Olive Green

HEX

#99CC2C

RGB

rgb(153, 204, 44)

HSL

hsl(79, 65%, 49%)

HSB

hsb(79, 78%, 80%)

CMYK

cmyk(25%, 0%, 78%, 20%)

Oklch

oklch(78.2% 0.186 126.5)

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

#54BE98

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#54BE98

RGB

rgb(84, 190, 152)

HSL

hsl(158, 45%, 54%)

HSB

hsb(158, 56%, 75%)

CMYK

cmyk(56%, 0%, 20%, 25%)

Oklch

oklch(72.9% 0.114 166.9)

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

#315755

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#315755

RGB

rgb(49, 87, 85)

HSL

hsl(177, 28%, 27%)

HSB

hsb(177, 44%, 34%)

CMYK

cmyk(44%, 0%, 2%, 66%)

Oklch

oklch(42.8% 0.044 191.3)

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

#243F3E

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#243F3E

RGB

rgb(36, 63, 62)

HSL

hsl(178, 27%, 19%)

HSB

hsb(178, 43%, 25%)

CMYK

cmyk(43%, 0%, 2%, 75%)

Oklch

oklch(34.6% 0.033 192.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333836

383335

Analogous

333833

333836

333838

Triadic

333836

363338

383633

Split-Comp.

333836

383338

383333

Tetradic

333836

333338

383335

383833

Contrast Matrix WCAG 2.1 Contrast

333836	99CC2C	54BE98	315755	243F3E
—	6.3 AA	5.2 AA	1.5 Fail	1.1 Fail
6.3 AA	—	1.2 Fail	4.2 AA Large	5.9 AA
5.2 AA	1.2 Fail	—	3.5 AA Large	5.0 AA
1.5 Fail	4.2 AA Large	3.5 AA Large	—	1.4 Fail
1.1 Fail	5.9 AA	5.0 AA	1.4 Fail	—

White BG

11.9AAA

1.9Fail

2.3Fail

8.0AAA

11.3AAA

Black BG

1.8Fail

11.0AAA

9.2AAA

2.6Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

353536

AFB053

8283A1

414255

30303E

Deuteranopia

353537

ACA85C

7C74A3

3F3C56

2E2C3E

Tritanopia

333737

9C7178

59A8AA

335656

253E3E

Achromatopsia

363636

ABABAB

9A9A9A

4B4B4B

373737

Shades & Tints Shades & Tints

#333836

Dark

Light

#99CC2C

Dark

Light

#54BE98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333836;
  --color-2: #99cc2c;
  --color-3: #54be98;
  --color-4: #315755;
  --color-5: #243f3e;
}

SCSS

$color-1: #333836;
$color-2: #99cc2c;
$color-3: #54be98;
$color-4: #315755;
$color-5: #243f3e;

TAILWIND

colors: {
  'brand-1': '#333836',
  'brand-2': '#99cc2c',
  'brand-3': '#54be98',
  'brand-4': '#315755',
  'brand-5': '#243f3e',
}

RGB Array

[51, 56, 54], [153, 204, 44], [84, 190, 152], [49, 87, 85], [36, 63, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #333836, #99CC2C, #54BE98, #315755, #243F3E 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: #333836; --color-2: #99cc2c; --color-3: #54be98; --color-4: #315755; --color-5: #243f3e. 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