← Back to Editor

#151B1F · #2F383D · #48524C · #6A755A · #A6A574

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#151B1F

Slate Blue · Black · Deep Sea Blue

HEX
#151B1F
RGB
rgb(21, 27, 31)
HSL
hsl(204, 19%, 10%)
HSB
hsb(204, 32%, 12%)
CMYK
cmyk(32%, 13%, 0%, 88%)
Oklch
oklch(21.8% 0.012 237.3)

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

#2F383D

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#2F383D
RGB
rgb(47, 56, 61)
HSL
hsl(201, 13%, 21%)
HSB
hsb(201, 23%, 24%)
CMYK
cmyk(23%, 8%, 0%, 76%)
Oklch
oklch(33.4% 0.015 232.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#48524C

Dark Cyan · DarkSlateGray · Charcoal

HEX
#48524C
RGB
rgb(72, 82, 76)
HSL
hsl(144, 6%, 30%)
HSB
hsb(144, 12%, 32%)
CMYK
cmyk(12%, 0%, 7%, 68%)
Oklch
oklch(42.8% 0.016 159.3)

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

#6A755A

Grass Green · DimGray · Olive Green

HEX
#6A755A
RGB
rgb(106, 117, 90)
HSL
hsl(84, 13%, 41%)
HSB
hsb(84, 23%, 46%)
CMYK
cmyk(9%, 0%, 23%, 54%)
Oklch
oklch(54.5% 0.043 125.8)

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

#A6A574

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A6A574
RGB
rgb(166, 165, 116)
HSL
hsl(59, 22%, 55%)
HSB
hsb(59, 30%, 65%)
CMYK
cmyk(0%, 1%, 30%, 35%)
Oklch
oklch(71.1% 0.067 107.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

151B1F
1E1915

Analogous

151E1D
151B1F
15161E

Triadic

151B1F
1E151A
1A1E15

Split-Comp.

151B1F
1E1516
1E1D15

Tetradic

151B1F
1D151E
1E1915
161E15

Contrast Matrix WCAG 2.1 Contrast

151B1F
2F383D
48524C
6A755A
A6A574
—
1.5
Fail
2.1
Fail
3.6
AA Large
6.8
AA
1.5
Fail
—
1.5
Fail
2.5
Fail
4.7
AA
2.1
Fail
1.5
Fail
—
1.7
Fail
3.2
AA Large
3.6
AA Large
2.5
Fail
1.7
Fail
—
1.9
Fail
6.8
AA
4.7
AA
3.2
AA Large
1.9
Fail
—
White BG
17.4AAA
12.0AAA
8.1AAA
4.9AA
2.5Fail
Black BG
1.2Fail
1.8Fail
2.6Fail
4.3AA Large
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

18181E
33333C
4C4C4D
6F6F61
A6A680

Deuteranopia

17171E
32323C
4C4B4E
6E6D62
A6A683

Tritanopia

151D1D
2F3B3B
484F4F
6B6667
A6898B

Achromatopsia

1A1A1A
363636
4E4E4E
6F6F6F
A0A0A0

Shades & Tints Shades & Tints

#151B1F

Dark
Light

#2F383D

Dark
Light

#48524C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #151b1f;
  --color-2: #2f383d;
  --color-3: #48524c;
  --color-4: #6a755a;
  --color-5: #a6a574;
}

SCSS

$color-1: #151b1f;
$color-2: #2f383d;
$color-3: #48524c;
$color-4: #6a755a;
$color-5: #a6a574;

TAILWIND

colors: {
  'brand-1': '#151b1f',
  'brand-2': '#2f383d',
  'brand-3': '#48524c',
  'brand-4': '#6a755a',
  'brand-5': '#a6a574',
}

RGB Array

[21, 27, 31], [47, 56, 61], [72, 82, 76], [106, 117, 90], [166, 165, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #151B1F, #2F383D, #48524C, #6A755A, #A6A574 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #151b1f; --color-2: #2f383d; --color-3: #48524c; --color-4: #6a755a; --color-5: #a6a574. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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