← Back to Editor

#FA2F47 · #5D2F24 · #2E1C17 · #C9143E · #B0B51D

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

#FA2F47

Vermilion · Crimson · Passion Red

HEX
#FA2F47
RGB
rgb(250, 47, 71)
HSL
hsl(353, 95%, 58%)
HSB
hsb(353, 81%, 98%)
CMYK
cmyk(0%, 81%, 72%, 2%)
Oklch
oklch(64.0% 0.233 21.7)

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

#5D2F24

Crimson · DarkOliveGreen · Wine Red

HEX
#5D2F24
RGB
rgb(93, 47, 36)
HSL
hsl(12, 44%, 25%)
HSB
hsb(12, 61%, 36%)
CMYK
cmyk(0%, 49%, 61%, 64%)
Oklch
oklch(36.3% 0.070 34.5)

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

#2E1C17

Crimson · Black · Deep Berry

HEX
#2E1C17
RGB
rgb(46, 28, 23)
HSL
hsl(13, 33%, 14%)
HSB
hsb(13, 50%, 18%)
CMYK
cmyk(0%, 39%, 50%, 82%)
Oklch
oklch(24.8% 0.030 36.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#C9143E

Vermilion · Crimson · Passion Red

HEX
#C9143E
RGB
rgb(201, 20, 62)
HSL
hsl(346, 82%, 43%)
HSB
hsb(346, 90%, 79%)
CMYK
cmyk(0%, 90%, 69%, 21%)
Oklch
oklch(53.6% 0.206 17.6)

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

#B0B51D

Autumn Sage · GoldenRod · Honey Gold

HEX
#B0B51D
RGB
rgb(176, 181, 29)
HSL
hsl(62, 72%, 41%)
HSB
hsb(62, 84%, 71%)
CMYK
cmyk(3%, 0%, 84%, 29%)
Oklch
oklch(74.5% 0.158 111.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA2F47
2EFAE2

Analogous

FA2EAC
FA2F47
FA7C2E

Triadic

FA2F47
46FA2E
2E46FA

Split-Comp.

FA2F47
2EFA7C
2EACFA

Tetradic

FA2F47
ACFA2E
2EFAE2
7C2EFA

Contrast Matrix WCAG 2.1 Contrast

FA2F47
5D2F24
2E1C17
C9143E
B0B51D
—
2.9
Fail
4.3
AA Large
1.5
Fail
1.7
Fail
2.9
Fail
—
1.5
Fail
1.9
Fail
5.0
AA
4.3
AA Large
1.5
Fail
—
2.8
Fail
7.3
AAA
1.5
Fail
1.9
Fail
2.8
Fail
—
2.6
Fail
1.7
Fail
5.0
AA
7.3
AAA
2.6
Fail
—
White BG
3.8AA Large
11.1AAA
16.2AAA
5.7AA
2.2Fail
Black BG
5.6AA
1.9Fail
1.3Fail
3.7AA Large
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A041
494927
262618
7B7934
B2B242

Deuteranopia

AEBD40
4C4F27
272919
859331
B2B24B

Tritanopia

F03D3C
5B2929
2D1919
C02C2A
B05F65

Achromatopsia

6E6E6E
3C3C3C
212121
4F4F4F
A2A2A2

Shades & Tints Shades & Tints

#FA2F47

Dark
Light

#5D2F24

Dark
Light

#2E1C17

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa2f47;
  --color-2: #5d2f24;
  --color-3: #2e1c17;
  --color-4: #c9143e;
  --color-5: #b0b51d;
}

SCSS

$color-1: #fa2f47;
$color-2: #5d2f24;
$color-3: #2e1c17;
$color-4: #c9143e;
$color-5: #b0b51d;

TAILWIND

colors: {
  'brand-1': '#fa2f47',
  'brand-2': '#5d2f24',
  'brand-3': '#2e1c17',
  'brand-4': '#c9143e',
  'brand-5': '#b0b51d',
}

RGB Array

[250, 47, 71], [93, 47, 36], [46, 28, 23], [201, 20, 62], [176, 181, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FA2F47, #5D2F24, #2E1C17, #C9143E, #B0B51D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #fa2f47; --color-2: #5d2f24; --color-3: #2e1c17; --color-4: #c9143e; --color-5: #b0b51d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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