← Back to Editor

#D83621 · #FECA14 · #F6E39E · #009F91 · #273129

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#D83621

Vermilion · FireBrick · Passion Red

HEX
#D83621
RGB
rgb(216, 54, 33)
HSL
hsl(7, 73%, 49%)
HSB
hsb(7, 85%, 85%)
CMYK
cmyk(0%, 75%, 85%, 15%)
Oklch
oklch(58.1% 0.202 30.9)

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

#FECA14

Ginger · Gold · Sunflower

HEX
#FECA14
RGB
rgb(254, 202, 20)
HSL
hsl(47, 99%, 54%)
HSB
hsb(47, 92%, 100%)
CMYK
cmyk(0%, 20%, 92%, 0%)
Oklch
oklch(86.1% 0.173 89.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F6E39E

Goose Yellow · Khaki · Lemon Cream

HEX
#F6E39E
RGB
rgb(246, 227, 158)
HSL
hsl(47, 83%, 79%)
HSB
hsb(47, 36%, 96%)
CMYK
cmyk(0%, 8%, 36%, 4%)
Oklch
oklch(91.5% 0.090 94.6)

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

#009F91

Mineral Blue · Teal · Mint Ice

HEX
#009F91
RGB
rgb(0, 159, 145)
HSL
hsl(175, 100%, 31%)
HSB
hsb(175, 100%, 62%)
CMYK
cmyk(100%, 0%, 9%, 38%)
Oklch
oklch(63.1% 0.112 184.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#273129

Celadon · DarkSlateGray · Dark Green

HEX
#273129
RGB
rgb(39, 49, 41)
HSL
hsl(132, 11%, 17%)
HSB
hsb(132, 20%, 19%)
CMYK
cmyk(20%, 0%, 16%, 81%)
Oklch
oklch(30.1% 0.020 151.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D83621
22C3D8

Analogous

D82268
D83621
D89222

Triadic

D83621
22D837
3722D8

Split-Comp.

D83621
22D892
2268D8

Tetradic

D83621
68D822
22C3D8
9222D8

Contrast Matrix WCAG 2.1 Contrast

D83621
FECA14
F6E39E
009F91
273129
—
3.1
AA Large
3.7
AA Large
1.4
Fail
2.9
Fail
3.1
AA Large
—
1.2
Fail
2.1
Fail
8.8
AAA
3.7
AA Large
1.2
Fail
—
2.6
Fail
10.5
AAA
1.4
Fail
2.1
Fail
2.6
Fail
—
4.1
AA Large
2.9
Fail
8.8
AAA
10.5
AAA
4.1
AA Large
—
White BG
4.7AA
1.5Fail
1.3Fail
3.3AA Large
13.5AAA
Black BG
4.5AA Large
13.7AAA
16.4AAA
6.4AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

929026
E7E740
EEEEAF
454694
2B2B2B

Deuteranopia

9BA727
EBEE4B
EFF0B3
3C3095
2B2A2B

Tritanopia

D02A2B
FB636A
F5BCBF
089798
282C2D

Achromatopsia

646464
C5C5C5
E1E1E1
6E6E6E
2D2D2D

Shades & Tints Shades & Tints

#D83621

Dark
Light

#FECA14

Dark
Light

#F6E39E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d83621;
  --color-2: #feca14;
  --color-3: #f6e39e;
  --color-4: #009f91;
  --color-5: #273129;
}

SCSS

$color-1: #d83621;
$color-2: #feca14;
$color-3: #f6e39e;
$color-4: #009f91;
$color-5: #273129;

TAILWIND

colors: {
  'brand-1': '#d83621',
  'brand-2': '#feca14',
  'brand-3': '#f6e39e',
  'brand-4': '#009f91',
  'brand-5': '#273129',
}

RGB Array

[216, 54, 33], [254, 202, 20], [246, 227, 158], [0, 159, 145], [39, 49, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D83621, #FECA14, #F6E39E, #009F91, #273129 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: #d83621; --color-2: #feca14; --color-3: #f6e39e; --color-4: #009f91; --color-5: #273129. 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