← Back to Editor

#AC0300 · #D90104 · #FCFAED · #2A2522 · #170C0A

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

#AC0300

Vermilion · DarkRed · Wine Red

HEX
#AC0300
RGB
rgb(172, 3, 0)
HSL
hsl(1, 100%, 34%)
HSB
hsb(1, 100%, 67%)
CMYK
cmyk(0%, 98%, 100%, 33%)
Oklch
oklch(46.8% 0.191 29.5)

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

#D90104

Vermilion · Red · Passion Red

HEX
#D90104
RGB
rgb(217, 1, 4)
HSL
hsl(359, 99%, 43%)
HSB
hsb(359, 100%, 85%)
CMYK
cmyk(0%, 100%, 98%, 15%)
Oklch
oklch(55.6% 0.228 29.0)

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

#FCFAED

Fresh Green · SeaShell · Lemon Cream

HEX
#FCFAED
RGB
rgb(252, 250, 237)
HSL
hsl(52, 71%, 96%)
HSB
hsb(52, 6%, 99%)
CMYK
cmyk(0%, 1%, 6%, 1%)
Oklch
oklch(98.3% 0.017 99.6)

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

#2A2522

Tangerine · DarkSlateGray · Cinnamon

HEX
#2A2522
RGB
rgb(42, 37, 34)
HSL
hsl(23, 11%, 15%)
HSB
hsb(23, 19%, 16%)
CMYK
cmyk(0%, 12%, 19%, 84%)
Oklch
oklch(26.9% 0.009 53.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#170C0A

Crimson · Black · Deep Berry

HEX
#170C0A
RGB
rgb(23, 12, 10)
HSL
hsl(9, 39%, 6%)
HSB
hsb(9, 57%, 9%)
CMYK
cmyk(0%, 48%, 57%, 91%)
Oklch
oklch(16.9% 0.020 30.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AC0300
00ABAD

Analogous

AD0054
AC0300
AD5A00

Triadic

AC0300
00AD03
0300AD

Split-Comp.

AC0300
00AD5A
0054AD

Tetradic

AC0300
54AD00
00ABAD
5A00AD

Contrast Matrix WCAG 2.1 Contrast

AC0300
D90104
FCFAED
2A2522
170C0A
—
1.4
Fail
7.2
AAA
2.0
Fail
2.5
Fail
1.4
Fail
—
5.1
AA
2.9
Fail
3.6
AA Large
7.2
AAA
5.1
AA
—
14.5
AAA
18.3
AAA
2.0
Fail
2.9
Fail
14.5
AAA
—
1.3
Fail
2.5
Fail
3.6
AA Large
18.3
AAA
1.3
Fail
—
White BG
7.6AAA
5.3AA
1.0Fail
15.1AAA
19.2AAA
Black BG
2.8Fail
4.0AA Large
20.0AAA
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

636101
7B7A03
FBFBF0
282823
12120A

Deuteranopia

6D7901
889803
FBFBF1
282923
13140B

Tritanopia

A40101
CE0303
FCF3F3
2A2323
160B0B

Achromatopsia

353535
424242
F9F9F9
262626
0F0F0F

Shades & Tints Shades & Tints

#AC0300

Dark
Light

#D90104

Dark
Light

#FCFAED

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ac0300;
  --color-2: #d90104;
  --color-3: #fcfaed;
  --color-4: #2a2522;
  --color-5: #170c0a;
}

SCSS

$color-1: #ac0300;
$color-2: #d90104;
$color-3: #fcfaed;
$color-4: #2a2522;
$color-5: #170c0a;

TAILWIND

colors: {
  'brand-1': '#ac0300',
  'brand-2': '#d90104',
  'brand-3': '#fcfaed',
  'brand-4': '#2a2522',
  'brand-5': '#170c0a',
}

RGB Array

[172, 3, 0], [217, 1, 4], [252, 250, 237], [42, 37, 34], [23, 12, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AC0300, #D90104, #FCFAED, #2A2522, #170C0A 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: #ac0300; --color-2: #d90104; --color-3: #fcfaed; --color-4: #2a2522; --color-5: #170c0a. 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