← Back to Editor

#71624F · #B8BC99 · #D2E3B7 · #DEFDED · #FCFCFC

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

#71624F

Ochre · DimGray · Amber Brown

HEX
#71624F
RGB
rgb(113, 98, 79)
HSL
hsl(34, 18%, 38%)
HSB
hsb(34, 30%, 44%)
CMYK
cmyk(0%, 13%, 30%, 56%)
Oklch
oklch(50.5% 0.035 73.5)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B8BC99

Fresh Green · DarkGray · Sunflower

HEX
#B8BC99
RGB
rgb(184, 188, 153)
HSL
hsl(67, 21%, 67%)
HSB
hsb(67, 19%, 74%)
CMYK
cmyk(2%, 0%, 19%, 26%)
Oklch
oklch(78.3% 0.048 112.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D2E3B7

Willow Green · LightGray · Apple Green

HEX
#D2E3B7
RGB
rgb(210, 227, 183)
HSL
hsl(83, 44%, 80%)
HSB
hsb(83, 19%, 89%)
CMYK
cmyk(7%, 0%, 19%, 11%)
Oklch
oklch(89.2% 0.061 124.8)

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

#DEFDED

Emerald · Lavender · Mint Green

HEX
#DEFDED
RGB
rgb(222, 253, 237)
HSL
hsl(149, 89%, 93%)
HSB
hsb(149, 12%, 99%)
CMYK
cmyk(12%, 0%, 6%, 1%)
Oklch
oklch(96.7% 0.039 163.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#FCFCFC

Moonlight White · Snow · Cloud White

HEX
#FCFCFC
RGB
rgb(252, 252, 252)
HSL
hsl(0, 0%, 99%)
HSB
hsb(0, 0%, 99%)
CMYK
cmyk(0%, 0%, 0%, 1%)
Oklch
oklch(99.1% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71624F
4F5F72

Analogous

72524F
71624F
70724F

Triadic

71624F
4F7263
634F72

Split-Comp.

71624F
4F7072
524F72

Tetradic

71624F
4F7252
4F5F72
724F70

Contrast Matrix WCAG 2.1 Contrast

71624F
B8BC99
D2E3B7
DEFDED
FCFCFC
—
3.0
AA Large
4.3
AA Large
5.4
AA
5.7
AA
3.0
AA Large
—
1.4
Fail
1.8
Fail
1.9
Fail
4.3
AA Large
1.4
Fail
—
1.3
Fail
1.3
Fail
5.4
AA
1.8
Fail
1.3
Fail
—
1.1
Fail
5.7
AA
1.9
Fail
1.3
Fail
1.1
Fail
—
White BG
5.9AA
2.0Fail
1.4Fail
1.1Fail
1.0Fail
Black BG
3.6AA Large
10.7AAA
15.4AAA
19.4AAA
20.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6A54
BABAA1
D9DAC2
EBECF1
FCFCFC

Deuteranopia

6B6D55
BAB9A4
D8D7C4
EAE7F2
FCFCFC

Tritanopia

705758
B8A8AA
D3CACC
E0F4F5
FCFCFC

Achromatopsia

646464
B7B7B7
D9D9D9
F2F2F2
FCFCFC

Shades & Tints Shades & Tints

#71624F

Dark
Light

#B8BC99

Dark
Light

#D2E3B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71624f;
  --color-2: #b8bc99;
  --color-3: #d2e3b7;
  --color-4: #defded;
  --color-5: #fcfcfc;
}

SCSS

$color-1: #71624f;
$color-2: #b8bc99;
$color-3: #d2e3b7;
$color-4: #defded;
$color-5: #fcfcfc;

TAILWIND

colors: {
  'brand-1': '#71624f',
  'brand-2': '#b8bc99',
  'brand-3': '#d2e3b7',
  'brand-4': '#defded',
  'brand-5': '#fcfcfc',
}

RGB Array

[113, 98, 79], [184, 188, 153], [210, 227, 183], [222, 253, 237], [252, 252, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #71624F, #B8BC99, #D2E3B7, #DEFDED, #FCFCFC is ideal for: health products, baby brands, fresh-style blogs, 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: #71624f; --color-2: #b8bc99; --color-3: #d2e3b7; --color-4: #defded; --color-5: #fcfcfc. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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