← Back to Editor

#1C1352 · #2F7992 · #B1D0A6 · #369B61 · #382948

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#1C1352

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1C1352
RGB
rgb(28, 19, 82)
HSL
hsl(249, 62%, 20%)
HSB
hsb(249, 77%, 32%)
CMYK
cmyk(66%, 77%, 0%, 68%)
Oklch
oklch(24.7% 0.108 281.4)

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

#2F7992

Lake Blue · SteelBlue · Mint Ice

HEX
#2F7992
RGB
rgb(47, 121, 146)
HSL
hsl(195, 51%, 38%)
HSB
hsb(195, 68%, 57%)
CMYK
cmyk(68%, 17%, 0%, 43%)
Oklch
oklch(54.1% 0.082 223.8)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B1D0A6

Celadon · Silver · Apple Green

HEX
#B1D0A6
RGB
rgb(177, 208, 166)
HSL
hsl(104, 31%, 73%)
HSB
hsb(104, 20%, 82%)
CMYK
cmyk(15%, 0%, 20%, 18%)
Oklch
oklch(82.4% 0.066 137.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#369B61

Celadon · SeaGreen · Olive Green

HEX
#369B61
RGB
rgb(54, 155, 97)
HSL
hsl(146, 48%, 41%)
HSB
hsb(146, 65%, 61%)
CMYK
cmyk(65%, 0%, 37%, 39%)
Oklch
oklch(61.6% 0.128 154.5)

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

#382948

Deep Indigo · DarkSlateGray · Eggplant

HEX
#382948
RGB
rgb(56, 41, 72)
HSL
hsl(269, 27%, 22%)
HSB
hsb(269, 43%, 28%)
CMYK
cmyk(22%, 43%, 0%, 72%)
Oklch
oklch(31.3% 0.057 305.6)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C1352
495313

Analogous

132A53
1C1352
3C1353

Triadic

1C1352
531D13
13531D

Split-Comp.

1C1352
533C13
2A5313

Tetradic

1C1352
53132A
495313
13533C

Contrast Matrix WCAG 2.1 Contrast

1C1352
2F7992
B1D0A6
369B61
382948
—
3.4
AA Large
9.8
AAA
4.8
AA
1.2
Fail
3.4
AA Large
—
2.9
Fail
1.4
Fail
2.7
Fail
9.8
AAA
2.9
Fail
—
2.1
Fail
7.9
AAA
4.8
AA
1.4
Fail
2.1
Fail
—
3.8
AA Large
1.2
Fail
2.7
Fail
7.9
AAA
3.8
AA Large
—
White BG
16.6AAA
4.9AA
1.7Fail
3.5AA Large
13.3AAA
Black BG
1.3Fail
4.3AA Large
12.4AAA
6.0AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

181843
4F508C
BEBFB0
62636F
323140

Deuteranopia

19193F
4B458B
BDBAB3
5C5472
32333F

Tritanopia

1C3734
338786
B3B8BA
3B7A7D
373B39

Achromatopsia

1D1D1D
666666
C2C2C2
767676
313131

Shades & Tints Shades & Tints

#1C1352

Dark
Light

#2F7992

Dark
Light

#B1D0A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c1352;
  --color-2: #2f7992;
  --color-3: #b1d0a6;
  --color-4: #369b61;
  --color-5: #382948;
}

SCSS

$color-1: #1c1352;
$color-2: #2f7992;
$color-3: #b1d0a6;
$color-4: #369b61;
$color-5: #382948;

TAILWIND

colors: {
  'brand-1': '#1c1352',
  'brand-2': '#2f7992',
  'brand-3': '#b1d0a6',
  'brand-4': '#369b61',
  'brand-5': '#382948',
}

RGB Array

[28, 19, 82], [47, 121, 146], [177, 208, 166], [54, 155, 97], [56, 41, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #1C1352, #2F7992, #B1D0A6, #369B61, #382948 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #1c1352; --color-2: #2f7992; --color-3: #b1d0a6; --color-4: #369b61; --color-5: #382948. 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 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