#03243D + #064433 + #085D45 + #344733 + #1F302C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#03243D

Lake Blue · MidnightBlue · Deep Sea Blue

HEX

#03243D

RGB

rgb(3, 36, 61)

HSL

hsl(206, 91%, 13%)

HSB

hsb(206, 95%, 24%)

CMYK

cmyk(95%, 41%, 0%, 76%)

Oklch

oklch(25.2% 0.060 245.9)

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

#064433

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#064433

RGB

rgb(6, 68, 51)

HSL

hsl(164, 84%, 15%)

HSB

hsb(164, 91%, 27%)

CMYK

cmyk(91%, 0%, 25%, 73%)

Oklch

oklch(34.5% 0.066 168.7)

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

#085D45

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#085D45

RGB

rgb(8, 93, 69)

HSL

hsl(163, 84%, 20%)

HSB

hsb(163, 91%, 36%)

CMYK

cmyk(91%, 0%, 26%, 64%)

Oklch

oklch(42.6% 0.084 167.2)

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

#344733

Celadon · DarkSlateGray · Forest Green

HEX

#344733

RGB

rgb(52, 71, 51)

HSL

hsl(117, 16%, 24%)

HSB

hsb(117, 28%, 28%)

CMYK

cmyk(27%, 0%, 28%, 72%)

Oklch

oklch(37.5% 0.041 143.5)

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

#1F302C

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#1F302C

RGB

rgb(31, 48, 44)

HSL

hsl(166, 22%, 15%)

HSB

hsb(166, 35%, 19%)

CMYK

cmyk(35%, 0%, 8%, 81%)

Oklch

oklch(29.3% 0.024 178.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

03243D

3F1D03

Analogous

033F3B

03243D

03073F

Triadic

03243D

3F0325

253F03

Split-Comp.

03243D

3F0307

3F3B03

Tetradic

03243D

3B033F

3F1D03

073F03

Contrast Matrix WCAG 2.1 Contrast

03243D	064433	085D45	344733	1F302C
—	1.4 Fail	2.0 Fail	1.6 Fail	1.1 Fail
1.4 Fail	—	1.4 Fail	1.1 Fail	1.2 Fail
2.0 Fail	1.4 Fail	—	1.3 Fail	1.8 Fail
1.6 Fail	1.1 Fail	1.3 Fail	—	1.4 Fail
1.1 Fail	1.2 Fail	1.8 Fail	1.4 Fail	—

White BG

15.9AAA

11.2AAA

7.9AAA

10.0AAA

13.8AAA

Black BG

1.3Fail

1.9Fail

2.7Fail

2.1Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

111237

212137

2D2E4B

3C3C38

26272D

Deuteranopia

0F0D35

1D1938

28224C

3B3A39

25242D

Tritanopia

053231

093A3B

0C4F50

353C3D

202E2E

Achromatopsia

1D1D1D

303030

414141

3F3F3F

2A2A2A

Shades & Tints Shades & Tints

#03243D

Dark

Light

#064433

Dark

Light

#085D45

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #03243d;
  --color-2: #064433;
  --color-3: #085d45;
  --color-4: #344733;
  --color-5: #1f302c;
}

SCSS

$color-1: #03243d;
$color-2: #064433;
$color-3: #085d45;
$color-4: #344733;
$color-5: #1f302c;

TAILWIND

colors: {
  'brand-1': '#03243d',
  'brand-2': '#064433',
  'brand-3': '#085d45',
  'brand-4': '#344733',
  'brand-5': '#1f302c',
}

RGB Array

[3, 36, 61], [6, 68, 51], [8, 93, 69], [52, 71, 51], [31, 48, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #03243D, #064433, #085D45, #344733, #1F302C is ideal for: tech websites, dark mode UIs, game UIs. 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: #03243d; --color-2: #064433; --color-3: #085d45; --color-4: #344733; --color-5: #1f302c. 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. 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