← Back to Editor

#131E3A · #F0E380 · #C2B282 · #938084 · #534F5F

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#131E3A

Indigo · MidnightBlue · Deep Sea Blue

HEX
#131E3A
RGB
rgb(19, 30, 58)
HSL
hsl(223, 51%, 15%)
HSB
hsb(223, 67%, 23%)
CMYK
cmyk(67%, 48%, 0%, 77%)
Oklch
oklch(24.1% 0.056 266.2)

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

#F0E380

Fresh Green · Khaki · Sunflower

HEX
#F0E380
RGB
rgb(240, 227, 128)
HSL
hsl(53, 79%, 72%)
HSB
hsb(53, 47%, 94%)
CMYK
cmyk(0%, 5%, 47%, 6%)
Oklch
oklch(90.6% 0.121 101.9)

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

#C2B282

Ginger · Tan · Sunflower

HEX
#C2B282
RGB
rgb(194, 178, 130)
HSL
hsl(45, 34%, 64%)
HSB
hsb(45, 33%, 76%)
CMYK
cmyk(0%, 8%, 33%, 24%)
Oklch
oklch(76.5% 0.067 91.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#938084

Crimson · Gray · Warm Gray

HEX
#938084
RGB
rgb(147, 128, 132)
HSL
hsl(347, 8%, 54%)
HSB
hsb(347, 13%, 58%)
CMYK
cmyk(0%, 13%, 10%, 42%)
Oklch
oklch(61.8% 0.024 3.5)

Traditional「Crimson」· Paint「Warm Gray」· Creative Urban Concrete

#534F5F

Deep Indigo · DimGray · Charcoal

HEX
#534F5F
RGB
rgb(83, 79, 95)
HSL
hsl(255, 9%, 34%)
HSB
hsb(255, 17%, 37%)
CMYK
cmyk(13%, 17%, 0%, 63%)
Oklch
oklch(43.7% 0.026 296.7)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

131E3A
3A2F13

Analogous

13313A
131E3A
1B133A

Triadic

131E3A
3A131E
1E3A13

Split-Comp.

131E3A
3A1B13
313A13

Tetradic

131E3A
3A1331
3A2F13
133A1B

Contrast Matrix WCAG 2.1 Contrast

131E3A
F0E380
C2B282
938084
534F5F
—
12.6
AAA
7.8
AAA
4.4
AA Large
2.1
Fail
12.6
AAA
—
1.6
Fail
2.8
Fail
6.0
AA
7.8
AAA
1.6
Fail
—
1.8
Fail
3.8
AA Large
4.4
AA Large
2.8
Fail
1.8
Fail
—
2.1
Fail
2.1
Fail
6.0
AA
3.8
AA Large
2.1
Fail
—
White BG
16.5AAA
1.3Fail
2.1Fail
3.7AA Large
7.9AAA
Black BG
1.3Fail
16.0AAA
10.0AAA
5.7AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

181833
EAEA98
BBBB8E
8B8B83
51515B

Deuteranopia

171632
EBEC9E
BCBD90
8C8D83
52525A

Tritanopia

142E2D
EFABAF
C19799
928282
535857

Achromatopsia

1E1E1E
DCDCDC
B1B1B1
868686
525252

Shades & Tints Shades & Tints

#131E3A

Dark
Light

#F0E380

Dark
Light

#C2B282

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #131e3a;
  --color-2: #f0e380;
  --color-3: #c2b282;
  --color-4: #938084;
  --color-5: #534f5f;
}

SCSS

$color-1: #131e3a;
$color-2: #f0e380;
$color-3: #c2b282;
$color-4: #938084;
$color-5: #534f5f;

TAILWIND

colors: {
  'brand-1': '#131e3a',
  'brand-2': '#f0e380',
  'brand-3': '#c2b282',
  'brand-4': '#938084',
  'brand-5': '#534f5f',
}

RGB Array

[19, 30, 58], [240, 227, 128], [194, 178, 130], [147, 128, 132], [83, 79, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #131E3A, #F0E380, #C2B282, #938084, #534F5F is ideal for: 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: #131e3a; --color-2: #f0e380; --color-3: #c2b282; --color-4: #938084; --color-5: #534f5f. 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 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