← Back to Editor

#DE2716 · #A11C17 · #0F0805 · #758B36 · #EBDCA9

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

#DE2716

Vermilion · Crimson · Passion Red

HEX
#DE2716
RGB
rgb(222, 39, 22)
HSL
hsl(5, 82%, 48%)
HSB
hsb(5, 90%, 87%)
CMYK
cmyk(0%, 82%, 90%, 13%)
Oklch
oklch(58.0% 0.218 30.1)

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

#A11C17

Vermilion · FireBrick · Wine Red

HEX
#A11C17
RGB
rgb(161, 28, 23)
HSL
hsl(2, 75%, 36%)
HSB
hsb(2, 86%, 63%)
CMYK
cmyk(0%, 83%, 86%, 37%)
Oklch
oklch(45.9% 0.169 28.4)

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

#0F0805

Tangerine · Black · Cinnamon

HEX
#0F0805
RGB
rgb(15, 8, 5)
HSL
hsl(18, 50%, 4%)
HSB
hsb(18, 67%, 6%)
CMYK
cmyk(0%, 47%, 67%, 94%)
Oklch
oklch(14.3% 0.015 49.7)

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

#758B36

Grass Green · DarkOliveGreen · Forest Green

HEX
#758B36
RGB
rgb(117, 139, 54)
HSL
hsl(76, 44%, 38%)
HSB
hsb(76, 61%, 55%)
CMYK
cmyk(16%, 0%, 61%, 45%)
Oklch
oklch(60.1% 0.114 122.1)

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

#EBDCA9

Goose Yellow · Wheat · Lemon Cream

HEX
#EBDCA9
RGB
rgb(235, 220, 169)
HSL
hsl(46, 62%, 79%)
HSB
hsb(46, 28%, 92%)
CMYK
cmyk(0%, 6%, 28%, 8%)
Oklch
oklch(89.4% 0.068 93.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE2716
16CEDF

Analogous

DF166A
DE2716
DF8B16

Triadic

DE2716
16DF27
2716DF

Split-Comp.

DE2716
16DF8B
166ADF

Tetradic

DE2716
6ADF16
16CEDF
8B16DF

Contrast Matrix WCAG 2.1 Contrast

DE2716
A11C17
0F0805
758B36
EBDCA9
—
1.6
Fail
4.2
AA Large
1.2
Fail
3.5
AA Large
1.6
Fail
—
2.5
Fail
2.0
Fail
5.7
AA
4.2
AA Large
2.5
Fail
—
5.2
AA
14.5
AAA
1.2
Fail
2.0
Fail
5.2
AA
—
2.8
Fail
3.5
AA Large
5.7
AA
14.5
AAA
2.8
Fail
—
White BG
4.8AA
7.8AAA
19.9AAA
3.8AA Large
1.4Fail
Black BG
4.4AA Large
2.7Fail
1.1Fail
5.5AA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8D1A
676618
0C0C06
7F7F4B
E5E4B5

Deuteranopia

99A71B
6F7919
0C0D06
7D7C50
E5E7B8

Tritanopia

D51D1E
9A1919
0F0606
765B5E
EABFC1

Achromatopsia

5C5C5C
434343
0A0A0A
7B7B7B
DBDBDB

Shades & Tints Shades & Tints

#DE2716

Dark
Light

#A11C17

Dark
Light

#0F0805

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de2716;
  --color-2: #a11c17;
  --color-3: #0f0805;
  --color-4: #758b36;
  --color-5: #ebdca9;
}

SCSS

$color-1: #de2716;
$color-2: #a11c17;
$color-3: #0f0805;
$color-4: #758b36;
$color-5: #ebdca9;

TAILWIND

colors: {
  'brand-1': '#de2716',
  'brand-2': '#a11c17',
  'brand-3': '#0f0805',
  'brand-4': '#758b36',
  'brand-5': '#ebdca9',
}

RGB Array

[222, 39, 22], [161, 28, 23], [15, 8, 5], [117, 139, 54], [235, 220, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DE2716, #A11C17, #0F0805, #758B36, #EBDCA9 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: #de2716; --color-2: #a11c17; --color-3: #0f0805; --color-4: #758b36; --color-5: #ebdca9. 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