#134647 + #367475 + #9BB054 + #53734B + #425C3C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#134647

Lake Blue · DarkSlateGray · Peacock Green

HEX

#134647

RGB

rgb(19, 70, 71)

HSL

hsl(181, 58%, 18%)

HSB

hsb(181, 73%, 28%)

CMYK

cmyk(73%, 1%, 0%, 72%)

Oklch

oklch(36.2% 0.053 197.0)

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

#367475

Slate Blue · SeaGreen · Mint Ice

HEX

#367475

RGB

rgb(54, 116, 117)

HSL

hsl(181, 37%, 34%)

HSB

hsb(181, 54%, 46%)

CMYK

cmyk(54%, 1%, 0%, 54%)

Oklch

oklch(51.9% 0.064 196.8)

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

#9BB054

Grass Green · DarkSeaGreen · Olive Green

HEX

#9BB054

RGB

rgb(155, 176, 84)

HSL

hsl(74, 37%, 51%)

HSB

hsb(74, 52%, 69%)

CMYK

cmyk(12%, 0%, 52%, 31%)

Oklch

oklch(72.1% 0.121 120.2)

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

#53734B

Celadon · DarkOliveGreen · Forest Green

HEX

#53734B

RGB

rgb(83, 115, 75)

HSL

hsl(108, 21%, 37%)

HSB

hsb(108, 35%, 45%)

CMYK

cmyk(28%, 0%, 35%, 55%)

Oklch

oklch(52.0% 0.071 139.5)

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

#425C3C

Celadon · DarkOliveGreen · Forest Green

HEX

#425C3C

RGB

rgb(66, 92, 60)

HSL

hsl(109, 21%, 30%)

HSB

hsb(109, 35%, 36%)

CMYK

cmyk(28%, 0%, 35%, 64%)

Oklch

oklch(44.5% 0.060 139.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

134647

491413

Analogous

13492F

134647

132D49

Triadic

134647

491348

484913

Split-Comp.

134647

49132D

492F13

Tetradic

134647

2F1349

491413

2D4913

Contrast Matrix WCAG 2.1 Contrast

134647	367475	9BB054	53734B	425C3C
—	2.0 Fail	4.4 AA Large	2.0 Fail	1.4 Fail
2.0 Fail	—	2.2 Fail	1.0 Fail	1.4 Fail
4.4 AA Large	2.2 Fail	—	2.2 Fail	3.1 AA Large
2.0 Fail	1.0 Fail	2.2 Fail	—	1.4 Fail
1.4 Fail	1.4 Fail	3.1 AA Large	1.4 Fail	—

White BG

10.5AAA

5.4AA

2.4Fail

5.4AA

7.4AAA

Black BG

2.0Fail

3.9AA Large

8.7AAA

3.9AA Large

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292A47

515175

A4A46A

616155

4D4D44

Deuteranopia

262247

4D4975

A3A170

5F5D57

4C4A46

Tritanopia

164747

397575

9C7C80

555C5E

434A4B

Achromatopsia

373737

626262

9F9F9F

656565

515151

Shades & Tints Shades & Tints

#134647

Dark

Light

#367475

Dark

Light

#9BB054

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #134647;
  --color-2: #367475;
  --color-3: #9bb054;
  --color-4: #53734b;
  --color-5: #425c3c;
}

SCSS

$color-1: #134647;
$color-2: #367475;
$color-3: #9bb054;
$color-4: #53734b;
$color-5: #425c3c;

TAILWIND

colors: {
  'brand-1': '#134647',
  'brand-2': '#367475',
  'brand-3': '#9bb054',
  'brand-4': '#53734b',
  'brand-5': '#425c3c',
}

RGB Array

[19, 70, 71], [54, 116, 117], [155, 176, 84], [83, 115, 75], [66, 92, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #134647, #367475, #9BB054, #53734B, #425C3C 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: #134647; --color-2: #367475; --color-3: #9bb054; --color-4: #53734b; --color-5: #425c3c. 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