← Back to Editor

#B1CCA7 · #A39786 · #7A2D43 · #47212D · #1F0D11

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

#B1CCA7

Celadon · Silver · Apple Green

HEX
#B1CCA7
RGB
rgb(177, 204, 167)
HSL
hsl(104, 27%, 73%)
HSB
hsb(104, 18%, 80%)
CMYK
cmyk(13%, 0%, 18%, 20%)
Oklch
oklch(81.5% 0.059 137.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#A39786

Ginger · DarkGray · Warm Sun

HEX
#A39786
RGB
rgb(163, 151, 134)
HSL
hsl(35, 14%, 58%)
HSB
hsb(35, 18%, 64%)
CMYK
cmyk(0%, 7%, 18%, 36%)
Oklch
oklch(68.2% 0.028 76.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#7A2D43

Dark Violet · Brown · Camellia

HEX
#7A2D43
RGB
rgb(122, 45, 67)
HSL
hsl(343, 46%, 33%)
HSB
hsb(343, 63%, 48%)
CMYK
cmyk(0%, 63%, 45%, 52%)
Oklch
oklch(41.4% 0.109 5.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#47212D

Dark Violet · DarkSlateGray · Raspberry

HEX
#47212D
RGB
rgb(71, 33, 45)
HSL
hsl(341, 37%, 20%)
HSB
hsb(341, 54%, 28%)
CMYK
cmyk(0%, 54%, 37%, 72%)
Oklch
oklch(30.5% 0.060 1.2)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#1F0D11

Crimson · Black · Deep Berry

HEX
#1F0D11
RGB
rgb(31, 13, 17)
HSL
hsl(347, 41%, 9%)
HSB
hsb(347, 58%, 12%)
CMYK
cmyk(0%, 58%, 45%, 88%)
Oklch
oklch(18.8% 0.031 6.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1CCA7
C3A8CD

Analogous

C4CDA8
B1CCA7
A8CDB0

Triadic

B1CCA7
A8B1CD
CDA8B1

Split-Comp.

B1CCA7
B0A8CD
CDA8C4

Tetradic

B1CCA7
A8C4CD
C3A8CD
CDB0A8

Contrast Matrix WCAG 2.1 Contrast

B1CCA7
A39786
7A2D43
47212D
1F0D11
—
1.6
Fail
5.3
AA
7.9
AAA
10.7
AAA
1.6
Fail
—
3.2
AA Large
4.8
AA
6.5
AA
5.3
AA
3.2
AA Large
—
1.5
Fail
2.0
Fail
7.9
AAA
4.8
AA
1.5
Fail
—
1.4
Fail
10.7
AAA
6.5
AA
2.0
Fail
1.4
Fail
—
White BG
1.7Fail
2.9Fail
9.2AAA
13.8AAA
18.7AAA
Black BG
12.1AAA
7.3AAA
2.3Fail
1.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDB0
9E9E8A
59583E
37362A
171710

Deuteranopia

BBB9B2
9F9F8B
5D633C
393C29
181A10

Tritanopia

B2B7B9
A28D8E
763939
452827
1E0F0F

Achromatopsia

C0C0C0
999999
474747
2E2E2E
131313

Shades & Tints Shades & Tints

#B1CCA7

Dark
Light

#A39786

Dark
Light

#7A2D43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1cca7;
  --color-2: #a39786;
  --color-3: #7a2d43;
  --color-4: #47212d;
  --color-5: #1f0d11;
}

SCSS

$color-1: #b1cca7;
$color-2: #a39786;
$color-3: #7a2d43;
$color-4: #47212d;
$color-5: #1f0d11;

TAILWIND

colors: {
  'brand-1': '#b1cca7',
  'brand-2': '#a39786',
  'brand-3': '#7a2d43',
  'brand-4': '#47212d',
  'brand-5': '#1f0d11',
}

RGB Array

[177, 204, 167], [163, 151, 134], [122, 45, 67], [71, 33, 45], [31, 13, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B1CCA7, #A39786, #7A2D43, #47212D, #1F0D11 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b1cca7; --color-2: #a39786; --color-3: #7a2d43; --color-4: #47212d; --color-5: #1f0d11. 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 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