← Back to Editor

#17030C · #3C041F · #962457 · #A66FB0 · #DEDFE3

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

#17030C

Dark Violet · Black · Raspberry

HEX
#17030C
RGB
rgb(23, 3, 12)
HSL
hsl(333, 77%, 5%)
HSB
hsb(333, 87%, 9%)
CMYK
cmyk(0%, 87%, 48%, 91%)
Oklch
oklch(14.6% 0.044 352.3)

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

#3C041F

Dark Violet · Black · Raspberry

HEX
#3C041F
RGB
rgb(60, 4, 31)
HSL
hsl(331, 88%, 13%)
HSB
hsb(331, 93%, 24%)
CMYK
cmyk(0%, 93%, 48%, 76%)
Oklch
oklch(23.7% 0.089 357.2)

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

#962457

Dark Violet · Brown · Camellia

HEX
#962457
RGB
rgb(150, 36, 87)
HSL
hsl(333, 61%, 36%)
HSB
hsb(333, 76%, 59%)
CMYK
cmyk(0%, 76%, 42%, 41%)
Oklch
oklch(45.9% 0.155 358.2)

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

#A66FB0

Dark Plum · MediumOrchid · Violet

HEX
#A66FB0
RGB
rgb(166, 111, 176)
HSL
hsl(291, 29%, 56%)
HSB
hsb(291, 37%, 69%)
CMYK
cmyk(6%, 37%, 0%, 31%)
Oklch
oklch(62.2% 0.113 321.2)

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

#DEDFE3

Azure · LightGray · Cloud White

HEX
#DEDFE3
RGB
rgb(222, 223, 227)
HSL
hsl(228, 8%, 88%)
HSB
hsb(228, 2%, 89%)
CMYK
cmyk(2%, 2%, 0%, 11%)
Oklch
oklch(90.4% 0.006 275.0)

Traditional「Azure」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

17030C
03170E

Analogous

170316
17030C
170403

Triadic

17030C
0C1703
030C17

Split-Comp.

17030C
031704
031617

Tetradic

17030C
161703
03170E
040317

Contrast Matrix WCAG 2.1 Contrast

17030C
3C041F
962457
A66FB0
DEDFE3
—
1.2
Fail
2.5
Fail
5.2
AA
15.0
AAA
1.2
Fail
—
2.2
Fail
4.5
AA Large
12.8
AAA
2.5
Fail
2.2
Fail
—
2.1
Fail
5.9
AA
5.2
AA
4.5
AA Large
2.1
Fail
—
2.9
Fail
15.0
AAA
12.8
AAA
5.9
AA
2.9
Fail
—
White BG
19.9AAA
17.1AAA
7.8AAA
3.8AA Large
1.3Fail
Black BG
1.1Fail
1.2Fail
2.7Fail
5.5AA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0E0E0A
242318
65644B
8E8EA0
DEDEE2

Deuteranopia

101109
272B17
6B7448
91969D
DEDEE2

Tritanopia

160808
391312
90413F
A39491
DEE1E1

Achromatopsia

0A0A0A
181818
4C4C4C
878787
DFDFDF

Shades & Tints Shades & Tints

#17030C

Dark
Light

#3C041F

Dark
Light

#962457

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #17030c;
  --color-2: #3c041f;
  --color-3: #962457;
  --color-4: #a66fb0;
  --color-5: #dedfe3;
}

SCSS

$color-1: #17030c;
$color-2: #3c041f;
$color-3: #962457;
$color-4: #a66fb0;
$color-5: #dedfe3;

TAILWIND

colors: {
  'brand-1': '#17030c',
  'brand-2': '#3c041f',
  'brand-3': '#962457',
  'brand-4': '#a66fb0',
  'brand-5': '#dedfe3',
}

RGB Array

[23, 3, 12], [60, 4, 31], [150, 36, 87], [166, 111, 176], [222, 223, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #17030C, #3C041F, #962457, #A66FB0, #DEDFE3 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: #17030c; --color-2: #3c041f; --color-3: #962457; --color-4: #a66fb0; --color-5: #dedfe3. 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