#333244 + #151642 + #86C539 + #769C2F + #5E6464 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#333244

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#333244

RGB

rgb(51, 50, 68)

HSL

hsl(243, 15%, 23%)

HSB

hsb(243, 26%, 27%)

CMYK

cmyk(25%, 26%, 0%, 73%)

Oklch

oklch(32.6% 0.032 287.0)

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

#151642

Indigo · MidnightBlue · Deep Sea Blue

HEX

#151642

RGB

rgb(21, 22, 66)

HSL

hsl(239, 52%, 17%)

HSB

hsb(239, 68%, 26%)

CMYK

cmyk(68%, 67%, 0%, 74%)

Oklch

oklch(23.0% 0.081 276.9)

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

#86C539

Grass Green · GreenYellow · Olive Green

HEX

#86C539

RGB

rgb(134, 197, 57)

HSL

hsl(87, 55%, 50%)

HSB

hsb(87, 71%, 77%)

CMYK

cmyk(32%, 0%, 71%, 23%)

Oklch

oklch(75.4% 0.180 130.8)

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

#769C2F

Grass Green · Olive · Forest Green

HEX

#769C2F

RGB

rgb(118, 156, 47)

HSL

hsl(81, 54%, 40%)

HSB

hsb(81, 70%, 61%)

CMYK

cmyk(24%, 0%, 70%, 39%)

Oklch

oklch(64.3% 0.142 126.8)

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

#5E6464

Ink Gray · DimGray · Charcoal

HEX

#5E6464

RGB

rgb(94, 100, 100)

HSL

hsl(180, 3%, 38%)

HSB

hsb(180, 6%, 39%)

CMYK

cmyk(6%, 0%, 0%, 61%)

Oklch

oklch(49.8% 0.007 196.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333244

434332

Analogous

323A43

333244

3C3243

Triadic

333244

433332

324333

Split-Comp.

333244

433C32

3A4332

Tetradic

333244

43323A

434332

32433C

Contrast Matrix WCAG 2.1 Contrast

333244	151642	86C539	769C2F	5E6464
—	1.4 Fail	6.0 AA	3.9 AA Large	2.1 Fail
1.4 Fail	—	8.2 AAA	5.4 AA	2.8 Fail
6.0 AA	8.2 AAA	—	1.5 Fail	2.9 Fail
3.9 AA Large	5.4 AA	1.5 Fail	—	1.9 Fail
2.1 Fail	2.8 Fail	2.9 Fail	1.9 Fail	—

White BG

12.5AAA

17.1AAA

2.1Fail

3.2AA Large

6.0AA

Black BG

1.7Fail

1.2Fail

10.1AAA

6.6AA

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

333340

151537

A1A25B

868749

616164

Deuteranopia

33333F

151535

9E9963

848150

606064

Tritanopia

333C3B

152F2D

89767B

785E63

5E6464

Achromatopsia

343434

1B1B1B

A2A2A2

848484

626262

Shades & Tints Shades & Tints

#333244

Dark

Light

#151642

Dark

Light

#86C539

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333244;
  --color-2: #151642;
  --color-3: #86c539;
  --color-4: #769c2f;
  --color-5: #5e6464;
}

SCSS

$color-1: #333244;
$color-2: #151642;
$color-3: #86c539;
$color-4: #769c2f;
$color-5: #5e6464;

TAILWIND

colors: {
  'brand-1': '#333244',
  'brand-2': '#151642',
  'brand-3': '#86c539',
  'brand-4': '#769c2f',
  'brand-5': '#5e6464',
}

RGB Array

[51, 50, 68], [21, 22, 66], [134, 197, 57], [118, 156, 47], [94, 100, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #333244, #151642, #86C539, #769C2F, #5E6464 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: #333244; --color-2: #151642; --color-3: #86c539; --color-4: #769c2f; --color-5: #5e6464. 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 nature-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