← Back to Editor

#7C488A · #2B0828 · #380C3F · #4F1255 · #5DB4BE

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

#7C488A

Dark Plum · DimGray · Violet

HEX
#7C488A
RGB
rgb(124, 72, 138)
HSL
hsl(287, 31%, 41%)
HSB
hsb(287, 48%, 54%)
CMYK
cmyk(10%, 48%, 0%, 46%)
Oklch
oklch(48.9% 0.117 318.9)

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

#2B0828

Rose Purple · Black · Dark Purple

HEX
#2B0828
RGB
rgb(43, 8, 40)
HSL
hsl(305, 69%, 10%)
HSB
hsb(305, 81%, 17%)
CMYK
cmyk(0%, 81%, 7%, 83%)
Oklch
oklch(21.3% 0.074 331.4)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#380C3F

Royal Purple · MidnightBlue · Dark Purple

HEX
#380C3F
RGB
rgb(56, 12, 63)
HSL
hsl(292, 68%, 15%)
HSB
hsb(292, 81%, 25%)
CMYK
cmyk(11%, 81%, 0%, 75%)
Oklch
oklch(25.7% 0.099 321.8)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#4F1255

Royal Purple · MidnightBlue · Dark Purple

HEX
#4F1255
RGB
rgb(79, 18, 85)
HSL
hsl(295, 65%, 20%)
HSB
hsb(295, 79%, 33%)
CMYK
cmyk(7%, 79%, 0%, 67%)
Oklch
oklch(31.8% 0.125 324.0)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#5DB4BE

Slate Blue · MediumAquaMarine · Lake Green

HEX
#5DB4BE
RGB
rgb(93, 180, 190)
HSL
hsl(186, 43%, 55%)
HSB
hsb(186, 51%, 75%)
CMYK
cmyk(51%, 5%, 0%, 25%)
Oklch
oklch(72.0% 0.085 205.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C488A
568948

Analogous

5B4889
7C488A
894877

Triadic

7C488A
897B48
48897B

Split-Comp.

7C488A
778948
48895B

Tetradic

7C488A
895B48
568948
487789

Contrast Matrix WCAG 2.1 Contrast

7C488A
2B0828
380C3F
4F1255
5DB4BE
—
2.7
Fail
2.4
Fail
2.0
Fail
2.8
Fail
2.7
Fail
—
1.1
Fail
1.3
Fail
7.5
AAA
2.4
Fail
1.1
Fail
—
1.2
Fail
6.8
AA
2.0
Fail
1.3
Fail
1.2
Fail
—
5.6
AA
2.8
Fail
7.5
AAA
6.8
AA
5.6
AA
—
White BG
6.7AA
18.0AAA
16.2AAA
13.5AAA
2.4Fail
Black BG
3.2AA Large
1.2Fail
1.3Fail
1.6Fail
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65657A
1C1C20
252533
353445
8383BC

Deuteranopia

696C76
1E211E
282B30
383D41
7E77BB

Tritanopia

796D6B
291A19
362927
4C3835
61BAB9

Achromatopsia

5F5F5F
161616
1F1F1F
2C2C2C
9B9B9B

Shades & Tints Shades & Tints

#7C488A

Dark
Light

#2B0828

Dark
Light

#380C3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c488a;
  --color-2: #2b0828;
  --color-3: #380c3f;
  --color-4: #4f1255;
  --color-5: #5db4be;
}

SCSS

$color-1: #7c488a;
$color-2: #2b0828;
$color-3: #380c3f;
$color-4: #4f1255;
$color-5: #5db4be;

TAILWIND

colors: {
  'brand-1': '#7c488a',
  'brand-2': '#2b0828',
  'brand-3': '#380c3f',
  'brand-4': '#4f1255',
  'brand-5': '#5db4be',
}

RGB Array

[124, 72, 138], [43, 8, 40], [56, 12, 63], [79, 18, 85], [93, 180, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7C488A, #2B0828, #380C3F, #4F1255, #5DB4BE 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: #7c488a; --color-2: #2b0828; --color-3: #380c3f; --color-4: #4f1255; --color-5: #5db4be. 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