← Back to Editor

#150F13 · #41313B · #8E777D · #EBCBD0 · #FAF8F9

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#150F13

Rose Purple · Black · Raspberry

HEX
#150F13
RGB
rgb(21, 15, 19)
HSL
hsl(320, 17%, 7%)
HSB
hsb(320, 29%, 8%)
CMYK
cmyk(0%, 29%, 10%, 92%)
Oklch
oklch(17.8% 0.013 338.6)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#41313B

Rose Purple · DarkSlateGray · Raspberry

HEX
#41313B
RGB
rgb(65, 49, 59)
HSL
hsl(323, 14%, 22%)
HSB
hsb(323, 25%, 25%)
CMYK
cmyk(0%, 25%, 9%, 75%)
Oklch
oklch(33.5% 0.028 340.8)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#8E777D

Dark Violet · Gray · Warm Gray

HEX
#8E777D
RGB
rgb(142, 119, 125)
HSL
hsl(344, 9%, 51%)
HSB
hsb(344, 16%, 56%)
CMYK
cmyk(0%, 16%, 12%, 44%)
Oklch
oklch(59.3% 0.030 0.5)

Traditional「Dark Violet」· Paint「Warm Gray」· Creative Urban Concrete

#EBCBD0

Peach Pink · Pink · Cherry Blossom

HEX
#EBCBD0
RGB
rgb(235, 203, 208)
HSL
hsl(351, 44%, 86%)
HSB
hsb(351, 14%, 92%)
CMYK
cmyk(0%, 14%, 11%, 8%)
Oklch
oklch(87.0% 0.037 7.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FAF8F9

Rouge · Snow · Cherry Blossom

HEX
#FAF8F9
RGB
rgb(250, 248, 249)
HSL
hsl(330, 17%, 98%)
HSB
hsb(330, 1%, 98%)
CMYK
cmyk(0%, 1%, 0%, 2%)
Oklch
oklch(98.1% 0.002 345.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

150F13
0F1511

Analogous

140F15
150F13
150F10

Triadic

150F13
13150F
0F1315

Split-Comp.

150F13
10150F
0F1514

Tetradic

150F13
15140F
0F1511
0F1015

Contrast Matrix WCAG 2.1 Contrast

150F13
41313B
8E777D
EBCBD0
FAF8F9
—
1.6
Fail
4.6
AA
12.6
AAA
17.9
AAA
1.6
Fail
—
2.9
Fail
8.1
AAA
11.5
AAA
4.6
AA
2.9
Fail
—
2.8
Fail
3.9
AA Large
12.6
AAA
8.1
AAA
2.8
Fail
—
1.4
Fail
17.9
AAA
11.5
AAA
3.9
AA Large
1.4
Fail
—
White BG
18.9AAA
12.2AAA
4.1AA Large
1.5Fail
1.1Fail
Black BG
1.1Fail
1.7Fail
5.1AA
14.0AAA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

121212
3A3A39
84847C
DDDDCF
F9F9F9

Deuteranopia

131312
3B3C38
85877B
DFE1CF
F9F9F9

Tritanopia

151111
403736
8D7A7A
E9CECE
FAF9F9

Achromatopsia

111111
373737
7F7F7F
D5D5D5
F9F9F9

Shades & Tints Shades & Tints

#150F13

Dark
Light

#41313B

Dark
Light

#8E777D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #150f13;
  --color-2: #41313b;
  --color-3: #8e777d;
  --color-4: #ebcbd0;
  --color-5: #faf8f9;
}

SCSS

$color-1: #150f13;
$color-2: #41313b;
$color-3: #8e777d;
$color-4: #ebcbd0;
$color-5: #faf8f9;

TAILWIND

colors: {
  'brand-1': '#150f13',
  'brand-2': '#41313b',
  'brand-3': '#8e777d',
  'brand-4': '#ebcbd0',
  'brand-5': '#faf8f9',
}

RGB Array

[21, 15, 19], [65, 49, 59], [142, 119, 125], [235, 203, 208], [250, 248, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #150F13, #41313B, #8E777D, #EBCBD0, #FAF8F9 is ideal for: brand design, premium product pages, magazine layouts, 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: #150f13; --color-2: #41313b; --color-3: #8e777d; --color-4: #ebcbd0; --color-5: #faf8f9. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 tech, SaaS, healthcare, eco 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