← Back to Editor

#0A0A22 · #074157 · #488F89 · #DEE7C8 · #B01E47

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

#0A0A22

Deep Indigo · Black · Deep Sea Blue

HEX
#0A0A22
RGB
rgb(10, 10, 34)
HSL
hsl(240, 55%, 9%)
HSB
hsb(240, 71%, 13%)
CMYK
cmyk(71%, 71%, 0%, 87%)
Oklch
oklch(16.2% 0.049 279.4)

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

#074157

Lake Blue · DarkSlateGray · Peacock Green

HEX
#074157
RGB
rgb(7, 65, 87)
HSL
hsl(197, 85%, 18%)
HSB
hsb(197, 92%, 34%)
CMYK
cmyk(92%, 25%, 0%, 66%)
Oklch
oklch(35.2% 0.066 230.1)

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

#488F89

Mineral Blue · CadetBlue · Mint Ice

HEX
#488F89
RGB
rgb(72, 143, 137)
HSL
hsl(175, 33%, 42%)
HSB
hsb(175, 50%, 56%)
CMYK
cmyk(50%, 0%, 4%, 44%)
Oklch
oklch(60.2% 0.072 188.2)

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

#DEE7C8

Willow Green · LightGray · Mint Green

HEX
#DEE7C8
RGB
rgb(222, 231, 200)
HSL
hsl(77, 39%, 85%)
HSB
hsb(77, 13%, 91%)
CMYK
cmyk(4%, 0%, 13%, 9%)
Oklch
oklch(91.3% 0.042 120.4)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#B01E47

Dark Violet · Brown · Camellia

HEX
#B01E47
RGB
rgb(176, 30, 71)
HSL
hsl(343, 71%, 40%)
HSB
hsb(343, 83%, 69%)
CMYK
cmyk(0%, 83%, 60%, 31%)
Oklch
oklch(49.7% 0.180 11.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0A0A22
24240A

Analogous

0A1724
0A0A22
170A24

Triadic

0A0A22
240A0A
0A240A

Split-Comp.

0A0A22
24170A
17240A

Tetradic

0A0A22
240A17
24240A
0A2417

Contrast Matrix WCAG 2.1 Contrast

0A0A22
074157
488F89
DEE7C8
B01E47
—
1.8
Fail
5.2
AA
15.2
AAA
2.9
Fail
1.8
Fail
—
2.9
Fail
8.6
AAA
1.6
Fail
5.2
AA
2.9
Fail
—
2.9
Fail
1.8
Fail
15.2
AAA
8.6
AAA
2.9
Fail
—
5.2
AA
2.9
Fail
1.6
Fail
1.8
Fail
5.2
AA
—
White BG
19.5AAA
11.0AAA
3.8AA Large
1.3Fail
6.7AA
Black BG
1.1Fail
1.9Fail
5.6AA
16.4AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0A1C
202152
67678A
E2E2D0
716F3D

Deuteranopia

0A0A1B
1D1850
635D8B
E1E1D1
79843B

Tritanopia

0A1817
0A4D4D
4C8C8C
DED5D7
A93534

Achromatopsia

0D0D0D
323232
797979
E1E1E1
4E4E4E

Shades & Tints Shades & Tints

#0A0A22

Dark
Light

#074157

Dark
Light

#488F89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0a0a22;
  --color-2: #074157;
  --color-3: #488f89;
  --color-4: #dee7c8;
  --color-5: #b01e47;
}

SCSS

$color-1: #0a0a22;
$color-2: #074157;
$color-3: #488f89;
$color-4: #dee7c8;
$color-5: #b01e47;

TAILWIND

colors: {
  'brand-1': '#0a0a22',
  'brand-2': '#074157',
  'brand-3': '#488f89',
  'brand-4': '#dee7c8',
  'brand-5': '#b01e47',
}

RGB Array

[10, 10, 34], [7, 65, 87], [72, 143, 137], [222, 231, 200], [176, 30, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #0A0A22, #074157, #488F89, #DEE7C8, #B01E47 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: #0a0a22; --color-2: #074157; --color-3: #488f89; --color-4: #dee7c8; --color-5: #b01e47. 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