← Back to Editor

#A82231 · #E8AB31 · #F1DFB7 · #40183B · #200C21

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

#A82231

Vermilion · Brown · Wine Red

HEX
#A82231
RGB
rgb(168, 34, 49)
HSL
hsl(353, 66%, 40%)
HSB
hsb(353, 80%, 66%)
CMYK
cmyk(0%, 80%, 71%, 34%)
Oklch
oklch(48.0% 0.169 21.0)

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

#E8AB31

Ginger · GoldenRod · Sunflower

HEX
#E8AB31
RGB
rgb(232, 171, 49)
HSL
hsl(40, 80%, 55%)
HSB
hsb(40, 79%, 91%)
CMYK
cmyk(0%, 26%, 79%, 9%)
Oklch
oklch(77.9% 0.147 79.8)

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

#F1DFB7

Goose Yellow · Wheat · Lemon Cream

HEX
#F1DFB7
RGB
rgb(241, 223, 183)
HSL
hsl(41, 67%, 83%)
HSB
hsb(41, 24%, 95%)
CMYK
cmyk(0%, 7%, 24%, 5%)
Oklch
oklch(90.8% 0.056 86.6)

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

#40183B

Rose Purple · DarkSlateGray · Dark Purple

HEX
#40183B
RGB
rgb(64, 24, 59)
HSL
hsl(308, 45%, 17%)
HSB
hsb(308, 63%, 25%)
CMYK
cmyk(0%, 63%, 8%, 75%)
Oklch
oklch(28.4% 0.080 332.5)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#200C21

Dark Plum · Black · Dark Purple

HEX
#200C21
RGB
rgb(32, 12, 33)
HSL
hsl(297, 47%, 9%)
HSB
hsb(297, 64%, 13%)
CMYK
cmyk(3%, 64%, 0%, 87%)
Oklch
oklch(19.6% 0.050 325.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A82231
23A99A

Analogous

A92376
A82231
A95623

Triadic

A82231
32A923
2332A9

Split-Comp.

A82231
23A956
2376A9

Tetradic

A82231
76A923
23A99A
5623A9

Contrast Matrix WCAG 2.1 Contrast

A82231
E8AB31
F1DFB7
40183B
200C21
—
3.5
AA Large
5.4
AA
2.1
Fail
2.6
Fail
3.5
AA Large
—
1.6
Fail
7.3
AAA
9.1
AAA
5.4
AA
1.6
Fail
—
11.3
AAA
14.1
AAA
2.1
Fail
7.3
AAA
11.3
AAA
—
1.2
Fail
2.6
Fail
9.1
AAA
14.1
AAA
1.2
Fail
—
White BG
7.1AAA
2.0Fail
1.3Fail
14.9AAA
18.5AAA
Black BG
2.9Fail
10.3AAA
16.0AAA
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6D2D
CECD4F
E9E9C1
2F2E33
17171C

Deuteranopia

76802D
D1D656
EAECC3
313431
191A1B

Tritanopia

A12B2A
E5666B
F0C8CA
3E2C2A
1F1817

Achromatopsia

4C4C4C
AFAFAF
E0E0E0
282828
141414

Shades & Tints Shades & Tints

#A82231

Dark
Light

#E8AB31

Dark
Light

#F1DFB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a82231;
  --color-2: #e8ab31;
  --color-3: #f1dfb7;
  --color-4: #40183b;
  --color-5: #200c21;
}

SCSS

$color-1: #a82231;
$color-2: #e8ab31;
$color-3: #f1dfb7;
$color-4: #40183b;
$color-5: #200c21;

TAILWIND

colors: {
  'brand-1': '#a82231',
  'brand-2': '#e8ab31',
  'brand-3': '#f1dfb7',
  'brand-4': '#40183b',
  'brand-5': '#200c21',
}

RGB Array

[168, 34, 49], [232, 171, 49], [241, 223, 183], [64, 24, 59], [32, 12, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A82231, #E8AB31, #F1DFB7, #40183B, #200C21 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: #a82231; --color-2: #e8ab31; --color-3: #f1dfb7; --color-4: #40183b; --color-5: #200c21. 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