← Back to Editor

#D1CB7B · #BCAE00 · #F96500 · #EB1313 · #332A24

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#D1CB7B

Fresh Green · BurlyWood · Sunflower

HEX
#D1CB7B
RGB
rgb(209, 203, 123)
HSL
hsl(56, 48%, 65%)
HSB
hsb(56, 41%, 82%)
CMYK
cmyk(0%, 3%, 41%, 18%)
Oklch
oklch(82.9% 0.102 104.7)

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

#BCAE00

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#BCAE00
RGB
rgb(188, 174, 0)
HSL
hsl(56, 100%, 37%)
HSB
hsb(56, 100%, 74%)
CMYK
cmyk(0%, 7%, 100%, 26%)
Oklch
oklch(73.9% 0.156 103.7)

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

#F96500

Tangerine · OrangeRed · Amber Brown

HEX
#F96500
RGB
rgb(249, 101, 0)
HSL
hsl(24, 100%, 49%)
HSB
hsb(24, 100%, 98%)
CMYK
cmyk(0%, 59%, 100%, 2%)
Oklch
oklch(68.5% 0.199 44.0)

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

#EB1313

Vermilion · Red · Passion Red

HEX
#EB1313
RGB
rgb(235, 19, 19)
HSL
hsl(0, 85%, 50%)
HSB
hsb(0, 92%, 92%)
CMYK
cmyk(0%, 92%, 92%, 8%)
Oklch
oklch(59.5% 0.237 28.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#332A24

Tangerine · DarkSlateGray · Cinnamon

HEX
#332A24
RGB
rgb(51, 42, 36)
HSL
hsl(24, 17%, 17%)
HSB
hsb(24, 29%, 20%)
CMYK
cmyk(0%, 18%, 29%, 80%)
Oklch
oklch(29.3% 0.017 55.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CB7B
7B81D1

Analogous

D1A07B
D1CB7B
ABD17B

Triadic

D1CB7B
7BD1CB
CB7BD1

Split-Comp.

D1CB7B
7BABD1
A07BD1

Tetradic

D1CB7B
7BD1A0
7B81D1
D17BAB

Contrast Matrix WCAG 2.1 Contrast

D1CB7B
BCAE00
F96500
EB1313
332A24
—
1.4
Fail
1.8
Fail
2.7
Fail
8.4
AAA
1.4
Fail
—
1.3
Fail
2.0
Fail
6.1
AA
1.8
Fail
1.3
Fail
—
1.5
Fail
4.6
AA
2.7
Fail
2.0
Fail
1.5
Fail
—
3.1
AA Large
8.4
AAA
6.1
AA
4.6
AA
3.1
AA Large
—
White BG
1.7Fail
2.3Fail
3.0AA Large
4.5AA
14.0AAA
Black BG
12.5AAA
9.2AAA
6.9AA
4.6AA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE8E
B6B62A
B9B818
8D8C13
2F2F25

Deuteranopia

CFCF93
B7B834
C2CD1E
9AAA13
303026

Tritanopia

D19EA1
BB4B53
F22C30
E01313
332727

Achromatopsia

C4C4C4
9E9E9E
868686
545454
2C2C2C

Shades & Tints Shades & Tints

#D1CB7B

Dark
Light

#BCAE00

Dark
Light

#F96500

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cb7b;
  --color-2: #bcae00;
  --color-3: #f96500;
  --color-4: #eb1313;
  --color-5: #332a24;
}

SCSS

$color-1: #d1cb7b;
$color-2: #bcae00;
$color-3: #f96500;
$color-4: #eb1313;
$color-5: #332a24;

TAILWIND

colors: {
  'brand-1': '#d1cb7b',
  'brand-2': '#bcae00',
  'brand-3': '#f96500',
  'brand-4': '#eb1313',
  'brand-5': '#332a24',
}

RGB Array

[209, 203, 123], [188, 174, 0], [249, 101, 0], [235, 19, 19], [51, 42, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D1CB7B, #BCAE00, #F96500, #EB1313, #332A24 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: #d1cb7b; --color-2: #bcae00; --color-3: #f96500; --color-4: #eb1313; --color-5: #332a24. 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