← Back to Editor

#B77E00 · #F7EB99 · #D0C66D · #607B44 · #0B4C44

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#B77E00

Ochre · DarkGoldenRod · Honey Gold

HEX
#B77E00
RGB
rgb(183, 126, 0)
HSL
hsl(41, 100%, 36%)
HSB
hsb(41, 100%, 72%)
CMYK
cmyk(0%, 31%, 100%, 28%)
Oklch
oklch(63.5% 0.133 77.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F7EB99

Fresh Green · Khaki · Lemon Cream

HEX
#F7EB99
RGB
rgb(247, 235, 153)
HSL
hsl(52, 85%, 78%)
HSB
hsb(52, 38%, 97%)
CMYK
cmyk(0%, 5%, 38%, 3%)
Oklch
oklch(93.1% 0.103 101.0)

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

#D0C66D

Fresh Green · BurlyWood · Sunflower

HEX
#D0C66D
RGB
rgb(208, 198, 109)
HSL
hsl(54, 51%, 62%)
HSB
hsb(54, 48%, 82%)
CMYK
cmyk(0%, 5%, 48%, 18%)
Oklch
oklch(81.6% 0.112 102.9)

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

#607B44

Grass Green · DarkOliveGreen · Forest Green

HEX
#607B44
RGB
rgb(96, 123, 68)
HSL
hsl(89, 29%, 37%)
HSB
hsb(89, 45%, 48%)
CMYK
cmyk(22%, 0%, 45%, 52%)
Oklch
oklch(54.8% 0.086 130.2)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#0B4C44

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0B4C44
RGB
rgb(11, 76, 68)
HSL
hsl(173, 75%, 17%)
HSB
hsb(173, 86%, 30%)
CMYK
cmyk(86%, 0%, 11%, 70%)
Oklch
oklch(37.6% 0.063 182.4)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B77E00
003AB8

Analogous

B82200
B77E00
96B800

Triadic

B77E00
00B87D
7D00B8

Split-Comp.

B77E00
0096B8
2200B8

Tetradic

B77E00
00B822
003AB8
B80096

Contrast Matrix WCAG 2.1 Contrast

B77E00
F7EB99
D0C66D
607B44
0B4C44
—
2.9
Fail
2.0
Fail
1.4
Fail
2.8
Fail
2.9
Fail
—
1.4
Fail
3.9
AA Large
8.1
AAA
2.0
Fail
1.4
Fail
—
2.7
Fail
5.6
AA
1.4
Fail
3.9
AA Large
2.7
Fail
—
2.1
Fail
2.8
Fail
8.1
AAA
5.6
AA
2.1
Fail
—
White BG
3.5AA Large
1.2Fail
1.8Fail
4.8AA
9.9AAA
Black BG
6.0AA
17.3AAA
12.0AAA
4.4AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9E1E
F2F2AD
CCCC83
6C6C51
272846

Deuteranopia

A2A626
F3F3B2
CCCD88
6A6855
231F46

Tritanopia

B4373C
F6BDC0
D09497
615C5E
0E4748

Achromatopsia

818181
E5E5E5
BFBFBF
6D6D6D
383838

Shades & Tints Shades & Tints

#B77E00

Dark
Light

#F7EB99

Dark
Light

#D0C66D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b77e00;
  --color-2: #f7eb99;
  --color-3: #d0c66d;
  --color-4: #607b44;
  --color-5: #0b4c44;
}

SCSS

$color-1: #b77e00;
$color-2: #f7eb99;
$color-3: #d0c66d;
$color-4: #607b44;
$color-5: #0b4c44;

TAILWIND

colors: {
  'brand-1': '#b77e00',
  'brand-2': '#f7eb99',
  'brand-3': '#d0c66d',
  'brand-4': '#607b44',
  'brand-5': '#0b4c44',
}

RGB Array

[183, 126, 0], [247, 235, 153], [208, 198, 109], [96, 123, 68], [11, 76, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B77E00, #F7EB99, #D0C66D, #607B44, #0B4C44 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b77e00; --color-2: #f7eb99; --color-3: #d0c66d; --color-4: #607b44; --color-5: #0b4c44. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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