← Back to Editor

#BB0520 · #D09F29 · #E0C761 · #91A04D · #4B6C4A

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 WebsiteBlog

Color Details Color Details

#BB0520

Vermilion · FireBrick · Wine Red

HEX
#BB0520
RGB
rgb(187, 5, 32)
HSL
hsl(351, 95%, 38%)
HSB
hsb(351, 97%, 73%)
CMYK
cmyk(0%, 97%, 83%, 27%)
Oklch
oklch(50.1% 0.201 24.6)

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

#D09F29

Ochre · GoldenRod · Honey Gold

HEX
#D09F29
RGB
rgb(208, 159, 41)
HSL
hsl(42, 67%, 49%)
HSB
hsb(42, 80%, 82%)
CMYK
cmyk(0%, 24%, 80%, 18%)
Oklch
oklch(72.9% 0.138 84.1)

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

#E0C761

Ginger · SandyBrown · Sunflower

HEX
#E0C761
RGB
rgb(224, 199, 97)
HSL
hsl(48, 67%, 63%)
HSB
hsb(48, 57%, 88%)
CMYK
cmyk(0%, 11%, 57%, 12%)
Oklch
oklch(83.1% 0.125 95.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#91A04D

Grass Green · Gray · Olive Green

HEX
#91A04D
RGB
rgb(145, 160, 77)
HSL
hsl(71, 35%, 46%)
HSB
hsb(71, 52%, 63%)
CMYK
cmyk(9%, 0%, 52%, 37%)
Oklch
oklch(67.6% 0.110 117.9)

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

#4B6C4A

Celadon · DarkOliveGreen · Forest Green

HEX
#4B6C4A
RGB
rgb(75, 108, 74)
HSL
hsl(118, 19%, 36%)
HSB
hsb(118, 31%, 42%)
CMYK
cmyk(31%, 0%, 31%, 58%)
Oklch
oklch(49.6% 0.066 143.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB0520
05BDA1

Analogous

BD057D
BB0520
BD4505

Triadic

BB0520
20BD05
0520BD

Split-Comp.

BB0520
05BD45
057DBD

Tetradic

BB0520
7DBD05
05BDA1
4505BD

Contrast Matrix WCAG 2.1 Contrast

BB0520
D09F29
E0C761
91A04D
4B6C4A
—
2.7
Fail
4.0
AA Large
2.3
Fail
1.1
Fail
2.7
Fail
—
1.4
Fail
1.2
Fail
2.4
Fail
4.0
AA Large
1.4
Fail
—
1.7
Fail
3.5
AA Large
2.3
Fail
1.2
Fail
1.7
Fail
—
2.1
Fail
1.1
Fail
2.4
Fail
3.5
AA Large
2.1
Fail
—
White BG
6.7AA
2.4Fail
1.7Fail
2.9Fail
5.9AA
Black BG
3.2AA Large
8.7AAA
12.5AAA
7.3AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6B19
BBBA46
D5D57A
979861
595A52

Deuteranopia

778418
BEC14C
D7D880
979666
575554

Tritanopia

B21413
CE5C61
DF8D91
927174
4D595A

Achromatopsia

3E3E3E
A0A0A0
C3C3C3
929292
5E5E5E

Shades & Tints Shades & Tints

#BB0520

Dark
Light

#D09F29

Dark
Light

#E0C761

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb0520;
  --color-2: #d09f29;
  --color-3: #e0c761;
  --color-4: #91a04d;
  --color-5: #4b6c4a;
}

SCSS

$color-1: #bb0520;
$color-2: #d09f29;
$color-3: #e0c761;
$color-4: #91a04d;
$color-5: #4b6c4a;

TAILWIND

colors: {
  'brand-1': '#bb0520',
  'brand-2': '#d09f29',
  'brand-3': '#e0c761',
  'brand-4': '#91a04d',
  'brand-5': '#4b6c4a',
}

RGB Array

[187, 5, 32], [208, 159, 41], [224, 199, 97], [145, 160, 77], [75, 108, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BB0520, #D09F29, #E0C761, #91A04D, #4B6C4A is ideal for: corporate websites, product showcases, portfolios. 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: #bb0520; --color-2: #d09f29; --color-3: #e0c761; --color-4: #91a04d; --color-5: #4b6c4a. 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 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