← Back to Editor

#7B7261 · #968476 · #A99E8C · #D4C8A2 · #F3E4C7

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

#7B7261

Ochre · DimGray · Amber Brown

HEX
#7B7261
RGB
rgb(123, 114, 97)
HSL
hsl(39, 12%, 43%)
HSB
hsb(39, 21%, 48%)
CMYK
cmyk(0%, 7%, 21%, 52%)
Oklch
oklch(55.5% 0.028 83.4)

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

#968476

Tangerine · Gray · Warm Sun

HEX
#968476
RGB
rgb(150, 132, 118)
HSL
hsl(26, 13%, 53%)
HSB
hsb(26, 21%, 59%)
CMYK
cmyk(0%, 12%, 21%, 41%)
Oklch
oklch(62.6% 0.030 60.1)

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

#A99E8C

Ginger · DarkGray · Warm Sun

HEX
#A99E8C
RGB
rgb(169, 158, 140)
HSL
hsl(37, 14%, 61%)
HSB
hsb(37, 17%, 66%)
CMYK
cmyk(0%, 7%, 17%, 34%)
Oklch
oklch(70.4% 0.029 80.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D4C8A2

Goose Yellow · Tan · Sunflower

HEX
#D4C8A2
RGB
rgb(212, 200, 162)
HSL
hsl(46, 37%, 73%)
HSB
hsb(46, 24%, 83%)
CMYK
cmyk(0%, 6%, 24%, 17%)
Oklch
oklch(83.3% 0.052 92.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#F3E4C7

Goose Yellow · Bisque · Lemon Cream

HEX
#F3E4C7
RGB
rgb(243, 228, 199)
HSL
hsl(40, 65%, 87%)
HSB
hsb(40, 18%, 95%)
CMYK
cmyk(0%, 6%, 18%, 5%)
Oklch
oklch(92.3% 0.042 83.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B7261
606A7B

Analogous

7B6460
7B7261
777B60

Triadic

7B7261
607B72
72607B

Split-Comp.

7B7261
60777B
64607B

Tetradic

7B7261
607B64
606A7B
7B6077

Contrast Matrix WCAG 2.1 Contrast

7B7261
968476
A99E8C
D4C8A2
F3E4C7
—
1.3
Fail
1.8
Fail
2.8
Fail
3.8
AA Large
1.3
Fail
—
1.4
Fail
2.1
Fail
2.9
Fail
1.8
Fail
1.4
Fail
—
1.6
Fail
2.1
Fail
2.8
Fail
2.1
Fail
1.6
Fail
—
1.3
Fail
3.8
AA Large
2.9
Fail
2.1
Fail
1.3
Fail
—
White BG
4.7AA
3.6AA Large
2.6Fail
1.7Fail
1.3Fail
Black BG
4.4AA Large
5.9AA
8.0AAA
12.6AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777765
8E8E79
A4A490
CFCFAB
EDECCE

Deuteranopia

787866
8F917A
A5A691
D0D0AD
EDEFD0

Tritanopia

7B6869
957C7D
A89495
D3B2B4
F2D4D5

Achromatopsia

737373
888888
9F9F9F
C7C7C7
E5E5E5

Shades & Tints Shades & Tints

#7B7261

Dark
Light

#968476

Dark
Light

#A99E8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b7261;
  --color-2: #968476;
  --color-3: #a99e8c;
  --color-4: #d4c8a2;
  --color-5: #f3e4c7;
}

SCSS

$color-1: #7b7261;
$color-2: #968476;
$color-3: #a99e8c;
$color-4: #d4c8a2;
$color-5: #f3e4c7;

TAILWIND

colors: {
  'brand-1': '#7b7261',
  'brand-2': '#968476',
  'brand-3': '#a99e8c',
  'brand-4': '#d4c8a2',
  'brand-5': '#f3e4c7',
}

RGB Array

[123, 114, 97], [150, 132, 118], [169, 158, 140], [212, 200, 162], [243, 228, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7B7261, #968476, #A99E8C, #D4C8A2, #F3E4C7 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: #7b7261; --color-2: #968476; --color-3: #a99e8c; --color-4: #d4c8a2; --color-5: #f3e4c7. 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