← Back to Editor

#D3142A · #F46646 · #F83261 · #F5E06D · #B81255

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

#D3142A

Vermilion · Crimson · Passion Red

HEX
#D3142A
RGB
rgb(211, 20, 42)
HSL
hsl(353, 83%, 45%)
HSB
hsb(353, 91%, 83%)
CMYK
cmyk(0%, 91%, 80%, 17%)
Oklch
oklch(55.2% 0.216 24.3)

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

#F46646

Peach Pink · Tomato · Coral Red

HEX
#F46646
RGB
rgb(244, 102, 70)
HSL
hsl(11, 89%, 62%)
HSB
hsb(11, 71%, 96%)
CMYK
cmyk(0%, 58%, 71%, 4%)
Oklch
oklch(68.3% 0.181 34.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F83261

Vermilion · Crimson · Passion Red

HEX
#F83261
RGB
rgb(248, 50, 97)
HSL
hsl(346, 93%, 58%)
HSB
hsb(346, 80%, 97%)
CMYK
cmyk(0%, 80%, 61%, 3%)
Oklch
oklch(64.3% 0.229 14.1)

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

#F5E06D

Fresh Green · Khaki · Sunflower

HEX
#F5E06D
RGB
rgb(245, 224, 109)
HSL
hsl(51, 87%, 69%)
HSB
hsb(51, 56%, 96%)
CMYK
cmyk(0%, 9%, 56%, 4%)
Oklch
oklch(90.2% 0.137 99.1)

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

#B81255

Dark Violet · Crimson · Camellia

HEX
#B81255
RGB
rgb(184, 18, 85)
HSL
hsl(336, 82%, 40%)
HSB
hsb(336, 90%, 72%)
CMYK
cmyk(0%, 90%, 54%, 28%)
Oklch
oklch(50.9% 0.196 5.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3142A
14D2BC

Analogous

D21489
D3142A
D25D14

Triadic

D3142A
2AD214
142AD2

Split-Comp.

D3142A
14D25D
1489D2

Tetradic

D3142A
89D214
14D2BC
5D14D2

Contrast Matrix WCAG 2.1 Contrast

D3142A
F46646
F83261
F5E06D
B81255
—
1.8
Fail
1.4
Fail
4.0
AA Large
1.2
Fail
1.8
Fail
—
1.2
Fail
2.3
Fail
2.1
Fail
1.4
Fail
1.2
Fail
—
2.8
Fail
1.7
Fail
4.0
AA Large
2.3
Fail
2.8
Fail
—
4.8
AA
1.2
Fail
2.1
Fail
1.7
Fail
4.8
AA
—
White BG
5.4AA
3.1AA Large
3.7AA Large
1.3Fail
6.5AA
Black BG
3.9AA Large
6.8AA
5.6AA
15.8AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

807F25
B7B54E
A2A056
ECEC89
706F45

Deuteranopia

8B9A23
BFC950
AEBD53
EDEF90
7A8641

Tritanopia

C92020
ED5455
EE4D4B
F49FA4
B03835

Achromatopsia

505050
8D8D8D
737373
D9D9D9
4B4B4B

Shades & Tints Shades & Tints

#D3142A

Dark
Light

#F46646

Dark
Light

#F83261

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3142a;
  --color-2: #f46646;
  --color-3: #f83261;
  --color-4: #f5e06d;
  --color-5: #b81255;
}

SCSS

$color-1: #d3142a;
$color-2: #f46646;
$color-3: #f83261;
$color-4: #f5e06d;
$color-5: #b81255;

TAILWIND

colors: {
  'brand-1': '#d3142a',
  'brand-2': '#f46646',
  'brand-3': '#f83261',
  'brand-4': '#f5e06d',
  'brand-5': '#b81255',
}

RGB Array

[211, 20, 42], [244, 102, 70], [248, 50, 97], [245, 224, 109], [184, 18, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D3142A, #F46646, #F83261, #F5E06D, #B81255 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: #d3142a; --color-2: #f46646; --color-3: #f83261; --color-4: #f5e06d; --color-5: #b81255. 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