← Back to Editor

#0F0419 · #08D689 · #CBE822 · #FF7B34 · #FC1B54

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

#0F0419

Royal Purple · Black · Dark Purple

HEX
#0F0419
RGB
rgb(15, 4, 25)
HSL
hsl(271, 72%, 6%)
HSB
hsb(271, 84%, 10%)
CMYK
cmyk(40%, 84%, 0%, 90%)
Oklch
oklch(14.3% 0.048 307.0)

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

#08D689

Mineral Blue · MediumSpringGreen · Olive Green

HEX
#08D689
RGB
rgb(8, 214, 137)
HSL
hsl(158, 93%, 44%)
HSB
hsb(158, 96%, 84%)
CMYK
cmyk(96%, 0%, 36%, 16%)
Oklch
oklch(77.2% 0.178 158.5)

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

#CBE822

Autumn Sage · GreenYellow · Sunflower

HEX
#CBE822
RGB
rgb(203, 232, 34)
HSL
hsl(69, 81%, 52%)
HSB
hsb(69, 85%, 91%)
CMYK
cmyk(13%, 0%, 85%, 9%)
Oklch
oklch(87.9% 0.199 118.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF7B34

Tangerine · Coral · Warm Sun

HEX
#FF7B34
RGB
rgb(255, 123, 52)
HSL
hsl(21, 100%, 60%)
HSB
hsb(21, 80%, 100%)
CMYK
cmyk(0%, 52%, 80%, 0%)
Oklch
oklch(72.7% 0.180 45.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FC1B54

Vermilion · Crimson · Passion Red

HEX
#FC1B54
RGB
rgb(252, 27, 84)
HSL
hsl(345, 97%, 55%)
HSB
hsb(345, 89%, 99%)
CMYK
cmyk(0%, 89%, 67%, 1%)
Oklch
oklch(63.6% 0.245 16.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F0419
0F1A04

Analogous

05041A
0F0419
1A041A

Triadic

0F0419
1A1004
041A10

Split-Comp.

0F0419
1A1A04
041A05

Tetradic

0F0419
1A0504
0F1A04
041A1A

Contrast Matrix WCAG 2.1 Contrast

0F0419
08D689
CBE822
FF7B34
FC1B54
—
10.4
AAA
14.4
AAA
7.7
AAA
5.2
AA
10.4
AAA
—
1.4
Fail
1.4
Fail
2.0
Fail
14.4
AAA
1.4
Fail
—
1.9
Fail
2.8
Fail
7.7
AAA
1.4
Fail
1.9
Fail
—
1.5
Fail
5.2
AA
2.0
Fail
2.8
Fail
1.5
Fail
—
White BG
20.0AAA
1.9Fail
1.4Fail
2.6Fail
3.9AA Large
Black BG
1.1Fail
11.0AAA
15.1AAA
8.1AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A14
61639C
D8D852
C6C545
9B9946

Deuteranopia

0B0C13
5546A0
D6D45D
CED749
A8B843

Tritanopia

0E100F
12AAAE
CC7880
F85356
F13B39

Achromatopsia

0A0A0A
909090
C9C9C9
9A9A9A
656565

Shades & Tints Shades & Tints

#0F0419

Dark
Light

#08D689

Dark
Light

#CBE822

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f0419;
  --color-2: #08d689;
  --color-3: #cbe822;
  --color-4: #ff7b34;
  --color-5: #fc1b54;
}

SCSS

$color-1: #0f0419;
$color-2: #08d689;
$color-3: #cbe822;
$color-4: #ff7b34;
$color-5: #fc1b54;

TAILWIND

colors: {
  'brand-1': '#0f0419',
  'brand-2': '#08d689',
  'brand-3': '#cbe822',
  'brand-4': '#ff7b34',
  'brand-5': '#fc1b54',
}

RGB Array

[15, 4, 25], [8, 214, 137], [203, 232, 34], [255, 123, 52], [252, 27, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #0F0419, #08D689, #CBE822, #FF7B34, #FC1B54 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: #0f0419; --color-2: #08d689; --color-3: #cbe822; --color-4: #ff7b34; --color-5: #fc1b54. 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