← Back to Editor

#69869B · #A2F41D · #271CE5 · #090646 · #232C02

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#69869B

Slate Blue · LightSlateGray · Navy Blue

HEX
#69869B
RGB
rgb(105, 134, 155)
HSL
hsl(205, 20%, 51%)
HSB
hsb(205, 32%, 61%)
CMYK
cmyk(32%, 14%, 0%, 39%)
Oklch
oklch(60.5% 0.046 240.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#A2F41D

Grass Green · GreenYellow · Olive Green

HEX
#A2F41D
RGB
rgb(162, 244, 29)
HSL
hsl(83, 91%, 54%)
HSB
hsb(83, 88%, 96%)
CMYK
cmyk(34%, 0%, 88%, 4%)
Oklch
oklch(88.1% 0.232 130.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#271CE5

Deep Indigo · MediumBlue · Navy Blue

HEX
#271CE5
RGB
rgb(39, 28, 229)
HSL
hsl(243, 79%, 50%)
HSB
hsb(243, 88%, 90%)
CMYK
cmyk(83%, 88%, 0%, 10%)
Oklch
oklch(44.1% 0.273 269.1)

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

#090646

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#090646
RGB
rgb(9, 6, 70)
HSL
hsl(243, 84%, 15%)
HSB
hsb(243, 91%, 27%)
CMYK
cmyk(87%, 91%, 0%, 73%)
Oklch
oklch(19.7% 0.111 271.8)

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

#232C02

Grass Green · Black · Dark Green

HEX
#232C02
RGB
rgb(35, 44, 2)
HSL
hsl(73, 91%, 9%)
HSB
hsb(73, 95%, 17%)
CMYK
cmyk(20%, 0%, 95%, 83%)
Oklch
oklch(27.5% 0.063 121.2)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69869B
9B7E69

Analogous

699B97
69869B
696D9B

Triadic

69869B
9B6986
869B69

Split-Comp.

69869B
9B696D
9B9769

Tetradic

69869B
97699B
9B7E69
6D9B69

Contrast Matrix WCAG 2.1 Contrast

69869B
A2F41D
271CE5
090646
232C02
—
2.8
Fail
2.3
Fail
4.9
AA
3.8
AA Large
2.8
Fail
—
6.5
AA
13.8
AAA
10.8
AAA
2.3
Fail
6.5
AA
—
2.1
Fail
1.7
Fail
4.9
AA
13.8
AAA
2.1
Fail
—
1.3
Fail
3.8
AA Large
10.8
AAA
1.7
Fail
1.3
Fail
—
White BG
3.8AA Large
1.4Fail
8.8AAA
18.6AAA
14.7AAA
Black BG
5.5AA
15.5AAA
2.4Fail
1.1Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

767696
C6C651
2222B4
080837
27270C

Deuteranopia

747295
C1BB5E
2324A9
080833
26260F

Tritanopia

6A9291
A67A83
268E86
092A28
231416

Achromatopsia

808080
C3C3C3
363636
0E0E0E
252525

Shades & Tints Shades & Tints

#69869B

Dark
Light

#A2F41D

Dark
Light

#271CE5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69869b;
  --color-2: #a2f41d;
  --color-3: #271ce5;
  --color-4: #090646;
  --color-5: #232c02;
}

SCSS

$color-1: #69869b;
$color-2: #a2f41d;
$color-3: #271ce5;
$color-4: #090646;
$color-5: #232c02;

TAILWIND

colors: {
  'brand-1': '#69869b',
  'brand-2': '#a2f41d',
  'brand-3': '#271ce5',
  'brand-4': '#090646',
  'brand-5': '#232c02',
}

RGB Array

[105, 134, 155], [162, 244, 29], [39, 28, 229], [9, 6, 70], [35, 44, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #69869B, #A2F41D, #271CE5, #090646, #232C02 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: #69869b; --color-2: #a2f41d; --color-3: #271ce5; --color-4: #090646; --color-5: #232c02. 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