← Back to Editor

#070117 · #094339 · #AF1010 · #BC5001 · #E3DE8B

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#070117

Deep Indigo · Black · Deep Sea Blue

HEX
#070117
RGB
rgb(7, 1, 23)
HSL
hsl(256, 92%, 5%)
HSB
hsb(256, 96%, 9%)
CMYK
cmyk(70%, 96%, 0%, 91%)
Oklch
oklch(11.6% 0.055 294.7)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#094339

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#094339
RGB
rgb(9, 67, 57)
HSL
hsl(170, 76%, 15%)
HSB
hsb(170, 87%, 26%)
CMYK
cmyk(87%, 0%, 15%, 74%)
Oklch
oklch(34.5% 0.059 177.8)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#AF1010

Vermilion · FireBrick · Wine Red

HEX
#AF1010
RGB
rgb(175, 16, 16)
HSL
hsl(0, 83%, 37%)
HSB
hsb(0, 91%, 69%)
CMYK
cmyk(0%, 91%, 91%, 31%)
Oklch
oklch(47.9% 0.188 28.3)

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

#BC5001

Tangerine · Chocolate · Amber Brown

HEX
#BC5001
RGB
rgb(188, 80, 1)
HSL
hsl(25, 99%, 37%)
HSB
hsb(25, 99%, 74%)
CMYK
cmyk(0%, 57%, 99%, 26%)
Oklch
oklch(56.3% 0.157 46.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E3DE8B

Fresh Green · Khaki · Sunflower

HEX
#E3DE8B
RGB
rgb(227, 222, 139)
HSL
hsl(57, 61%, 72%)
HSB
hsb(57, 39%, 89%)
CMYK
cmyk(0%, 2%, 39%, 11%)
Oklch
oklch(88.6% 0.105 105.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

070117
121801

Analogous

010618
070117
130118

Triadic

070117
180701
011807

Split-Comp.

070117
181301
061801

Tetradic

070117
180106
121801
011813

Contrast Matrix WCAG 2.1 Contrast

070117
094339
AF1010
BC5001
E3DE8B
—
1.8
Fail
2.8
Fail
4.2
AA Large
14.7
AAA
1.8
Fail
—
1.6
Fail
2.3
Fail
8.1
AAA
2.8
Fail
1.6
Fail
—
1.5
Fail
5.2
AA
4.2
AA Large
2.3
Fail
1.5
Fail
—
3.5
AA Large
14.7
AAA
8.1
AAA
5.2
AA
3.5
AA Large
—
White BG
20.5AAA
11.2AAA
7.2AAA
4.9AA
1.4Fail
Black BG
1.0Fail
1.9Fail
2.9Fail
4.3AA Large
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

040412
22233B
6A6910
8D8C14
E1E19F

Deuteranopia

050510
1F1A3C
737F10
949C19
E1E1A4

Tritanopia

070D0D
0C3D3E
A71010
B72327
E3AFB2

Achromatopsia

050505
313131
404040
676767
D6D6D6

Shades & Tints Shades & Tints

#070117

Dark
Light

#094339

Dark
Light

#AF1010

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #070117;
  --color-2: #094339;
  --color-3: #af1010;
  --color-4: #bc5001;
  --color-5: #e3de8b;
}

SCSS

$color-1: #070117;
$color-2: #094339;
$color-3: #af1010;
$color-4: #bc5001;
$color-5: #e3de8b;

TAILWIND

colors: {
  'brand-1': '#070117',
  'brand-2': '#094339',
  'brand-3': '#af1010',
  'brand-4': '#bc5001',
  'brand-5': '#e3de8b',
}

RGB Array

[7, 1, 23], [9, 67, 57], [175, 16, 16], [188, 80, 1], [227, 222, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #070117, #094339, #AF1010, #BC5001, #E3DE8B 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: #070117; --color-2: #094339; --color-3: #af1010; --color-4: #bc5001; --color-5: #e3de8b. 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