← Back to Editor

#BBB03C · #9DE5D1 · #909E84 · #867353 · #7F401D

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

#BBB03C

Autumn Sage · GoldenRod · Honey Gold

HEX
#BBB03C
RGB
rgb(187, 176, 60)
HSL
hsl(55, 51%, 48%)
HSB
hsb(55, 68%, 73%)
CMYK
cmyk(0%, 6%, 68%, 27%)
Oklch
oklch(74.5% 0.134 103.9)

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

#9DE5D1

Jade · LightBlue · Glacier Blue

HEX
#9DE5D1
RGB
rgb(157, 229, 209)
HSL
hsl(163, 58%, 76%)
HSB
hsb(163, 31%, 90%)
CMYK
cmyk(31%, 0%, 9%, 10%)
Oklch
oklch(86.9% 0.077 175.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#909E84

Celadon · DarkSeaGreen · Olive Green

HEX
#909E84
RGB
rgb(144, 158, 132)
HSL
hsl(92, 12%, 57%)
HSB
hsb(92, 16%, 62%)
CMYK
cmyk(9%, 0%, 16%, 38%)
Oklch
oklch(68.1% 0.041 130.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#867353

Ochre · DimGray · Amber Brown

HEX
#867353
RGB
rgb(134, 115, 83)
HSL
hsl(38, 24%, 43%)
HSB
hsb(38, 38%, 53%)
CMYK
cmyk(0%, 14%, 38%, 47%)
Oklch
oklch(56.5% 0.052 80.4)

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

#7F401D

Tangerine · Sienna · Amber Brown

HEX
#7F401D
RGB
rgb(127, 64, 29)
HSL
hsl(21, 63%, 31%)
HSB
hsb(21, 77%, 50%)
CMYK
cmyk(0%, 50%, 77%, 50%)
Oklch
oklch(44.5% 0.099 47.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB03C
3C46B9

Analogous

B9703C
BBB03C
85B93C

Triadic

BBB03C
3CB9AE
AE3CB9

Split-Comp.

BBB03C
3C85B9
703CB9

Tetradic

BBB03C
3CB970
3C46B9
B93C85

Contrast Matrix WCAG 2.1 Contrast

BBB03C
9DE5D1
909E84
867353
7F401D
—
1.6
Fail
1.3
Fail
2.0
Fail
3.5
AA Large
1.6
Fail
—
2.0
Fail
3.2
AA Large
5.5
AA
1.3
Fail
2.0
Fail
—
1.6
Fail
2.8
Fail
2.0
Fail
3.2
AA Large
1.6
Fail
—
1.7
Fail
3.5
AA Large
5.5
AA
2.8
Fail
1.7
Fail
—
White BG
2.2Fail
1.4Fail
2.8Fail
4.6AA
7.9AAA
Black BG
9.4AAA
14.6AAA
7.4AAA
4.6AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B658
BCBDD6
96968A
7E7E5B
646325

Deuteranopia

B7B85F
B8B3D7
95948C
7F805D
676C28

Tritanopia

BA6E73
A1DADB
918F90
856162
7C2C2E

Achromatopsia

A6A6A6
CDCDCD
979797
757575
4F4F4F

Shades & Tints Shades & Tints

#BBB03C

Dark
Light

#9DE5D1

Dark
Light

#909E84

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb03c;
  --color-2: #9de5d1;
  --color-3: #909e84;
  --color-4: #867353;
  --color-5: #7f401d;
}

SCSS

$color-1: #bbb03c;
$color-2: #9de5d1;
$color-3: #909e84;
$color-4: #867353;
$color-5: #7f401d;

TAILWIND

colors: {
  'brand-1': '#bbb03c',
  'brand-2': '#9de5d1',
  'brand-3': '#909e84',
  'brand-4': '#867353',
  'brand-5': '#7f401d',
}

RGB Array

[187, 176, 60], [157, 229, 209], [144, 158, 132], [134, 115, 83], [127, 64, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BBB03C, #9DE5D1, #909E84, #867353, #7F401D 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: #bbb03c; --color-2: #9de5d1; --color-3: #909e84; --color-4: #867353; --color-5: #7f401d. 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