← Back to Editor

#C3313E · #963431 · #342705 · #545448 · #626051

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#C3313E

Crimson · FireBrick · Passion Red

HEX
#C3313E
RGB
rgb(195, 49, 62)
HSL
hsl(355, 60%, 48%)
HSB
hsb(355, 75%, 76%)
CMYK
cmyk(0%, 75%, 68%, 24%)
Oklch
oklch(54.3% 0.182 21.2)

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

#963431

Crimson · Brown · Wine Red

HEX
#963431
RGB
rgb(150, 52, 49)
HSL
hsl(2, 51%, 39%)
HSB
hsb(2, 67%, 59%)
CMYK
cmyk(0%, 65%, 67%, 41%)
Oklch
oklch(46.7% 0.132 25.4)

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

#342705

Ochre · Black · Amber Gold

HEX
#342705
RGB
rgb(52, 39, 5)
HSL
hsl(43, 82%, 11%)
HSB
hsb(43, 90%, 20%)
CMYK
cmyk(0%, 25%, 90%, 80%)
Oklch
oklch(28.1% 0.052 87.0)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#545448

Autumn Sage · DarkOliveGreen · Charcoal

HEX
#545448
RGB
rgb(84, 84, 72)
HSL
hsl(60, 8%, 31%)
HSB
hsb(60, 14%, 33%)
CMYK
cmyk(0%, 0%, 14%, 67%)
Oklch
oklch(44.2% 0.019 107.2)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

#626051

Autumn Sage · DimGray · Charcoal

HEX
#626051
RGB
rgb(98, 96, 81)
HSL
hsl(53, 9%, 35%)
HSB
hsb(53, 17%, 38%)
CMYK
cmyk(0%, 2%, 17%, 62%)
Oklch
oklch(48.6% 0.023 101.0)

Traditional「Autumn Sage」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3313E
31C4B8

Analogous

C43187
C3313E
C46E31

Triadic

C3313E
3DC431
313DC4

Split-Comp.

C3313E
31C46E
3187C4

Tetradic

C3313E
87C431
31C4B8
6E31C4

Contrast Matrix WCAG 2.1 Contrast

C3313E
963431
342705
545448
626051
—
1.4
Fail
2.7
Fail
1.4
Fail
1.2
Fail
1.4
Fail
—
2.0
Fail
1.0
Fail
1.2
Fail
2.7
Fail
2.0
Fail
—
1.9
Fail
2.3
Fail
1.4
Fail
1.0
Fail
1.9
Fail
—
1.2
Fail
1.2
Fail
1.2
Fail
2.3
Fail
1.2
Fail
—
White BG
5.5AA
7.4AAA
14.6AAA
7.7AAA
6.3AA
Black BG
3.8AA Large
2.8Fail
1.4Fail
2.7Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

84823B
6C6B32
2E2E0D
54544B
616155

Deuteranopia

8C973A
717932
2F300F
54544C
616156

Tritanopia

BC3838
913232
331415
544D4E
625758

Achromatopsia

5E5E5E
515151
272727
535353
5F5F5F

Shades & Tints Shades & Tints

#C3313E

Dark
Light

#963431

Dark
Light

#342705

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3313e;
  --color-2: #963431;
  --color-3: #342705;
  --color-4: #545448;
  --color-5: #626051;
}

SCSS

$color-1: #c3313e;
$color-2: #963431;
$color-3: #342705;
$color-4: #545448;
$color-5: #626051;

TAILWIND

colors: {
  'brand-1': '#c3313e',
  'brand-2': '#963431',
  'brand-3': '#342705',
  'brand-4': '#545448',
  'brand-5': '#626051',
}

RGB Array

[195, 49, 62], [150, 52, 49], [52, 39, 5], [84, 84, 72], [98, 96, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C3313E, #963431, #342705, #545448, #626051 is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c3313e; --color-2: #963431; --color-3: #342705; --color-4: #545448; --color-5: #626051. 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. 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 tech, SaaS, healthcare, eco industries. 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