← Back to Editor

#9DB109 · #C4C411 · #D8D349 · #E2D697 · #C53636

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 App

Color Details Color Details

#9DB109

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9DB109
RGB
rgb(157, 177, 9)
HSL
hsl(67, 90%, 36%)
HSB
hsb(67, 95%, 69%)
CMYK
cmyk(11%, 0%, 95%, 31%)
Oklch
oklch(72.0% 0.165 117.6)

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

#C4C411

Autumn Sage · GoldenRod · Honey Gold

HEX
#C4C411
RGB
rgb(196, 196, 17)
HSL
hsl(60, 84%, 42%)
HSB
hsb(60, 91%, 77%)
CMYK
cmyk(0%, 0%, 91%, 23%)
Oklch
oklch(79.4% 0.170 109.7)

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

#D8D349

Autumn Sage · SandyBrown · Sunflower

HEX
#D8D349
RGB
rgb(216, 211, 73)
HSL
hsl(58, 65%, 57%)
HSB
hsb(58, 66%, 85%)
CMYK
cmyk(0%, 2%, 66%, 15%)
Oklch
oklch(84.6% 0.155 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E2D697

Fresh Green · Khaki · Sunflower

HEX
#E2D697
RGB
rgb(226, 214, 151)
HSL
hsl(50, 56%, 74%)
HSB
hsb(50, 33%, 89%)
CMYK
cmyk(0%, 5%, 33%, 11%)
Oklch
oklch(87.1% 0.082 98.7)

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

#C53636

Crimson · FireBrick · Passion Red

HEX
#C53636
RGB
rgb(197, 54, 54)
HSL
hsl(0, 57%, 49%)
HSB
hsb(0, 73%, 77%)
CMYK
cmyk(0%, 73%, 73%, 23%)
Oklch
oklch(55.0% 0.180 25.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DB109
1C09AE

Analogous

AE6F09
9DB109
49AE09

Triadic

9DB109
099BAE
AE099B

Split-Comp.

9DB109
0949AE
6F09AE

Tetradic

9DB109
09AE6F
1C09AE
AE0949

Contrast Matrix WCAG 2.1 Contrast

9DB109
C4C411
D8D349
E2D697
C53636
—
1.3
Fail
1.5
Fail
1.6
Fail
2.2
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
2.8
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
3.4
AA Large
1.6
Fail
1.3
Fail
1.1
Fail
—
3.6
AA Large
2.2
Fail
2.8
Fail
3.4
AA Large
3.6
AA Large
—
White BG
2.4Fail
1.9Fail
1.6Fail
1.5Fail
5.3AA
Black BG
8.7AAA
11.3AAA
13.3AAA
14.3AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A632
C4C43C
D6D66A
DDDDA6
878636

Deuteranopia

A5A33B
C4C447
D6D772
DEDEAA
8F9A36

Tritanopia

9E5259
C45F66
D8858B
E1B2B5
BE3636

Achromatopsia

989898
B0B0B0
C5C5C5
D2D2D2
616161

Shades & Tints Shades & Tints

#9DB109

Dark
Light

#C4C411

Dark
Light

#D8D349

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9db109;
  --color-2: #c4c411;
  --color-3: #d8d349;
  --color-4: #e2d697;
  --color-5: #c53636;
}

SCSS

$color-1: #9db109;
$color-2: #c4c411;
$color-3: #d8d349;
$color-4: #e2d697;
$color-5: #c53636;

TAILWIND

colors: {
  'brand-1': '#9db109',
  'brand-2': '#c4c411',
  'brand-3': '#d8d349',
  'brand-4': '#e2d697',
  'brand-5': '#c53636',
}

RGB Array

[157, 177, 9], [196, 196, 17], [216, 211, 73], [226, 214, 151], [197, 54, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #9DB109, #C4C411, #D8D349, #E2D697, #C53636 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #9db109; --color-2: #c4c411; --color-3: #d8d349; --color-4: #e2d697; --color-5: #c53636. 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. 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