← Back to Editor

#63672C · #859785 · #99B8BB · #D2D499 · #F8F671

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

#63672C

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#63672C
RGB
rgb(99, 103, 44)
HSL
hsl(64, 40%, 29%)
HSB
hsb(64, 57%, 40%)
CMYK
cmyk(4%, 0%, 57%, 60%)
Oklch
oklch(49.7% 0.082 112.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#859785

Celadon · Gray · Silver Sand

HEX
#859785
RGB
rgb(133, 151, 133)
HSL
hsl(120, 8%, 56%)
HSB
hsb(120, 12%, 59%)
CMYK
cmyk(12%, 0%, 12%, 41%)
Oklch
oklch(65.7% 0.033 145.2)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#99B8BB

Sky Blue · DarkGray · Lake Green

HEX
#99B8BB
RGB
rgb(153, 184, 187)
HSL
hsl(185, 20%, 67%)
HSB
hsb(185, 18%, 73%)
CMYK
cmyk(18%, 2%, 0%, 27%)
Oklch
oklch(76.1% 0.034 203.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D2D499

Fresh Green · Tan · Sunflower

HEX
#D2D499
RGB
rgb(210, 212, 153)
HSL
hsl(62, 41%, 72%)
HSB
hsb(62, 28%, 83%)
CMYK
cmyk(1%, 0%, 28%, 17%)
Oklch
oklch(85.4% 0.077 109.6)

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

#F8F671

Fresh Green · Khaki · Sunflower

HEX
#F8F671
RGB
rgb(248, 246, 113)
HSL
hsl(59, 91%, 71%)
HSB
hsb(59, 54%, 97%)
CMYK
cmyk(0%, 1%, 54%, 3%)
Oklch
oklch(94.9% 0.154 108.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63672C
302C68

Analogous

684E2C
63672C
46682C

Triadic

63672C
2C6468
682C64

Split-Comp.

63672C
2C4668
4E2C68

Tetradic

63672C
2C684E
302C68
682C46

Contrast Matrix WCAG 2.1 Contrast

63672C
859785
99B8BB
D2D499
F8F671
—
1.9
Fail
2.8
Fail
3.9
AA Large
5.3
AA
1.9
Fail
—
1.5
Fail
2.0
Fail
2.7
Fail
2.8
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
3.9
AA Large
2.0
Fail
1.4
Fail
—
1.4
Fail
5.3
AA
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
6.0AA
3.1AA Large
2.1Fail
1.5Fail
1.1Fail
Black BG
3.5AA Large
6.8AA
9.9AAA
13.6AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65653A
8D8D89
A6A7BA
D3D3A7
F7F791

Deuteranopia

65643E
8C8A8A
A5A2BA
D3D3AB
F7F799

Tritanopia

634648
868D8E
9BBABA
D2B3B5
F8ABB0

Achromatopsia

5F5F5F
909090
AFAFAF
CDCDCD
E7E7E7

Shades & Tints Shades & Tints

#63672C

Dark
Light

#859785

Dark
Light

#99B8BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63672c;
  --color-2: #859785;
  --color-3: #99b8bb;
  --color-4: #d2d499;
  --color-5: #f8f671;
}

SCSS

$color-1: #63672c;
$color-2: #859785;
$color-3: #99b8bb;
$color-4: #d2d499;
$color-5: #f8f671;

TAILWIND

colors: {
  'brand-1': '#63672c',
  'brand-2': '#859785',
  'brand-3': '#99b8bb',
  'brand-4': '#d2d499',
  'brand-5': '#f8f671',
}

RGB Array

[99, 103, 44], [133, 151, 133], [153, 184, 187], [210, 212, 153], [248, 246, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #63672C, #859785, #99B8BB, #D2D499, #F8F671 is ideal for: 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: #63672c; --color-2: #859785; --color-3: #99b8bb; --color-4: #d2d499; --color-5: #f8f671. 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. 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