Annual Pro comes with 2× normal AI credits

Subscribe now to get 6,000 credits/month (up from 3,000) for the next months

Dark Purple Color: Hex Codes, Palettes, and Pairings That Work

By

Mondal Mahbub

Reviewed by

Buu Nguyen

10 mins read

Table of contents

Share

Dark purple carries the hex code #301934, which resolves to rgb(48, 25, 52) and hsl(291, 35%, 15%). Blue leads red by four points and both run well ahead of green, which places the hue at 291° with only 35% saturation and a very low 15% lightness.

Dark purple reaches 15.98:1 against white and clears AAA, and it fails against black at 1.31:1. This page covers every code format, the computed palettes, the four elements where it performs, and why a color this dark works better as a surface than as an accent.

What Is the Color Dark Purple?

Dark purple sits at 291° with 35% saturation and 15% lightness. No CSS keyword maps to it, and #301934 is the value most references publish for a deep, slightly muted purple.

aad91e3d1ddad0c82c8f5d6ce7afcebfd718ed09845669f465d5f010ddd7b7f1?ts=1789476643

The full code set for #301934:

  • HEX: #301934
  • RGB: rgb(48, 25, 52)
  • RGBA: rgba(48, 25, 52, 1)
  • HSL: hsl(291, 35%, 15%)
  • HSB: 291, 52, 20
  • CMYK: 8, 52, 0, 80

The CMYK reading tells the practical story. At 80% key coverage most of this color is black ink, which is why it reads as a dark neutral with a purple cast rather than as a purple proper.

Its low saturation is what distinguishes it from indigo. Indigo at #4B0082 carries 100% saturation at 26% lightness, so it reads unmistakably as a color, while dark purple at 35% saturation reads first as dark and second as purple.

Published values vary considerably. Some references use #301934, others #360D4B or #4A0E4E, and the range spans from a near-black plum to a saturated aubergine, so a token has to be pinned to a hex.

Why Does Dark Purple Work Better as a Surface Than an Accent?

An accent color has to separate from its surroundings, and a color at 15% lightness has almost nowhere to go against a dark background. Dark purple’s 1.31:1 against black is the number that decides this.

1a74c5ee06d47ceb4e4f92830abebd3973a513f8abef7b217a78c4d31e7a898d?ts=1789476643

Three properties follow from that low lightness:

  • It can’t accent a dark theme: anything near black leaves it invisible
  • It can be the dark theme: at 15.98:1 against white text it hosts content at AAA
  • Its tint ramp carries the accents instead: #6D3976 and above supply the contrast

The comparison with indigo makes the point. Indigo at 26% lightness and full saturation works as a link, a heading, and a button on white, while dark purple at 15% lightness and low saturation reads as a background wherever it appears.

That distinction should shape the token naming. A value named purple-900 implies a member of a purple scale, and dark purple behaves more like surface-dark with a hue attached.

Products that use it well treat it as a branded near-black. The color gives a dark theme character that a neutral #121212 can’t, without asking the color to do accent work it can’t do.

How Does Dark Purple Appear on Digital Screens?

Dark purple renders as a near-black with a violet cast on most panels. Its low luminance means panel gamma affects it more than a mid-tone, and on an uncalibrated display the purple can disappear entirely into black.

2c25bca51e28545b2219bbe98f685214021f537d75a441db1a761aa5c9de454b?ts=1789476643

The measured values invert the pattern most colors follow:

  • #301934 on white: 15.98:1, passes AAA
  • White text on #301934: 15.98:1, passes AAA
  • #301934 on black: 1.31:1, fails
  • Dark variant #241327 on white: 17.54:1, passes AAA
  • Bright variant #432349 on #1A0C1D: 1.41:1, fails

OLED panels show the cast best. Against a genuinely black surround the purple reads clearly, while on an LCD with backlight bleed the same value flattens toward gray.

Large surfaces need checking on a mid-range display. A dark purple canvas that reads as rich on a good monitor can read as muddy elsewhere, which matters because this color’s whole value is the cast.

The tint at #6D3976 reaches 8.3:1 against the base and gives a dark theme its elevation step. That value is what a raised card or a hovered row should use.

What Are the Shades and Tints of Dark Purple?

Shades compress almost immediately, since so little lightness remains:

94990f62e5f0045105b0999a66c06ea5dbddaeb6ac3ef69a85b5e31b5b9e32ce?ts=1789476643
  • #2A162E
  • #241327
  • #1E1020
  • #180C1A
  • #120914
  • #0C060D
  • #060306

By #1E1020 the color is functionally black. Most design systems need one shade step below the base and no more.

Tints carry the usable range, which is the reverse of how mid-tone colors behave:

  • #4E2955
  • #6D3976
  • #8B4997
  • #A65FB2
  • #B880C2
  • #CBA1D2
  • #DDC2E2
  • #F0E3F2

The step at #A65FB2 crosses into accent territory for a dark theme, reaching 5.4:1 against the base. Everything below it in the ramp serves as a surface or a border rather than as a foreground.

Named neighbors sit across the deep purple range:

  • Indigo (#4B0082): far more saturated, 12.95:1 on white
  • Dark slate blue (#483D8B): bluer and lighter, 8.0:1
  • Aubergine (#4A0E4E): more saturated, similar depth, 14.4:1
  • Purple (#800080): the CSS keyword, brighter, 9.5:1
  • Dark magenta (#8B008B): brighter still, 8.5:1

What UI Elements Work Best with Dark Purple?

Dark purple belongs on large surfaces and on light backgrounds where its depth does the work. The 15.98:1 in both directions against white makes it reliable, and the 1.31:1 against black rules out accent use in a dark theme.

Dark-mode accents, small elements on near-black, and anything needing to separate from a dark surround all fall outside its range. Four element types remain where it genuinely performs.

Dark Mode Surfaces

Dark themes are dark purple’s primary job. A #301934 base with white text at 15.98:1 gives a dark interface a distinct character that a neutral near-black can’t.

1a74c5ee06d47ceb4e4f92830abebd3973a513f8abef7b217a78c4d31e7a898d?ts=1789476643

Elevation comes from the tint ramp. #4E2955 for raised cards and #6D3976 for borders builds a layered system where a neutral gray would read as generic.

Full saturation is worth avoiding across a whole viewport. The cast should be perceptible rather than obvious, and #301934 sits at the right side of that line where a more saturated aubergine would not.

Navigation Bars and Chrome

Navigation covers surface area safely with this color. A dark purple top bar or sidebar hosts white labels at AAA, and every icon on it clears the threshold automatically.

269186030632ef6a8203daea56a17936cf5b93c1c66d9882feac92483b4d4704?ts=1789476643

The boundary against a dark page needs a lightened border rather than a shadow. Shadows barely register on dark surfaces, and #4E2955 as a divider does the separation work.

Brand expression comes without cost. Most saturated navigation colors fail their label contrast, and dark purple passes while still reading as a color choice.

Primary Buttons and CTAs

Buttons work in both directions. White on #301934 reaches 15.98:1, so a filled button carries any label size, and an outline variant on white clears the non-text requirement several times over.

4ed0b5b0fc293be98408a3797e4256ebd30fa70786ec8a910bb99a7fdffb4f61?ts=1789476645

Hover states come from the tint ramp rather than the shade ramp. A step up to #4E2955 is visible where a step down to #241327 isn’t, which reverses the usual convention.

The color reads as considered rather than urgent. That register suits confirm and continue actions better than destructive ones.

Body Text and Headings

Text is where dark purple quietly outperforms a neutral. At 15.98:1 on white it clears AAA at every size while carrying a trace of brand color that pure black can’t.

d5d1cb2e90396eb0ab9733c472a916590bc80cae575d9c3d0d9f359f2954910d?ts=1789476645

Headings benefit most. A near-black heading in a branded hue reads as intentional in a way #000000 doesn’t, and the contrast cost is minimal.

The shade #241327 supplies a second level at 17.54:1. Two steps of dark purple cover primary and secondary type without a neutral.

What Are the Best Dark Purple Color Palettes for UI?

Every palette below comes from rotating hue around #301934 at fixed saturation and lightness. Because lightness sits at 15%, all five schemes produce very dark values.

Monochromatic

The monochromatic scheme holds hue at 291° and moves lightness: #301934, #1D0F1F, and #432349. All three are surface values rather than accents.

a356977152618a8f538891ffa178e40c7f35e827f0697eec985e6f9af2808e2d?ts=1789476645

Mapping is straightforward for a dark theme. #1D0F1F for the deepest layer, the base for the primary surface, and #432349 for raised cards.

Analogous

Analogous pulls neighbors 30° in each direction: #301934, #34192B, and #221934. A deep plum and a deep violet-blue flanking the base, all at matched depth.

b855629344732781bfe5a484d579e69f1a401b3c9db5c24808e57e7bc9ee1526?ts=1789476646

Distinguishing them requires large areas. Three colors this dark differ subtly, which suits a layered surface system and not a categorical one.

Complementary

The complement sits opposite at 111°: #301934 paired with #1D3419, a very dark green. Both are near-black, so the hue tension is present and the luminance contrast isn’t.

ff6e716b7a488f7df55e7cd8ead24ab55b7c4cbd9b4b5f7f614050313697351f?ts=1789476646

Neither value can accent the other. This pairing works as two adjacent dark surfaces rather than as foreground and background.

Triadic

The triadic scheme gives you #301934, #343019, and #193430: dark purple, a dark olive, and a dark teal. Three hues at matched depth, useful for a dark-theme categorical system where each series sits on a light background.

a354f4a2e2deacec474bee936997391e5569815cbaf5e8cb6f32ad6944866940?ts=1789476646

Each series needs its own light-mode value. Against white all three pass AAA, which makes this the rare dark triad usable for chart series with labels on top.

Split-Complementary

Split-complementary softens the pairing: #301934, #2B3419, and #193422. Dark purple with a dark olive and a dark green, and the most flexible of the five for a layered dark interface.

00fccef48b5fdafda0be2f2e8b3f73781efeac199230c8d355f44cb87731b10d?ts=1789476647

Accents have to come from the tint ramp regardless of scheme. Visily’s theme tools can generate the tint ladder above each value so dark-theme accents come out accessible rather than hand-mixed.

Which Colors Are Similar to Dark Purple?

Five named colors sit close enough to #301934 to substitute for it:

52eefbb6323d264f1e85561bce80864b3bf68d1b0f8e4cdd74a42c8d9e455866?ts=1789476647
  • Aubergine (#4A0E4E): more saturated at similar depth, 14.4:1 on white
  • Dark slate blue (#483D8B): bluer and lighter, 8.0:1
  • Indigo (#4B0082): far more saturated, 12.95:1
  • Purple (#800080): the CSS keyword, considerably brighter, 9.5:1
  • Dark magenta (#8B008B): brighter and pinker, 8.5:1

Aubergine is the closest functional relative. At #4A0E4E it does the same surface job with a more assertive cast, which suits products that want the color to be noticed.

Indigo is the one most often substituted by mistake. It sits at similar lightness with three times the saturation, so it works as an accent where dark purple doesn’t, and swapping them changes what the color can do rather than just how it looks.

Which Colors Pair Best with Dark Purple?

Off-white is dark purple’s essential partner. At around 19:1 a warm near-white like #FAF9F6 sits better against it than pure white, which produces halation on a dark surface.

Light violet from the tint ramp supplies the accents. #A65FB2 and #B880C2 reach usable ratios against the base and keep the palette within one hue.

Muted gold reads as premium against it. A warm metallic on a deep purple is the pairing luxury and editorial products reach for, and it avoids the neon register a saturated accent would bring.

Deep teal from the split-complementary direction gives a second structural color. Both sit at similar depth, so they work as adjacent surfaces rather than as a contrast pair.

The 60-30-10 split applies as follows:

  1. 60% dark purple and its shades: surfaces, navigation, and canvases in a dark theme
  2. 30% off-white: text, icons, and raised surfaces
  3. 10% light violet or gold: interactive elements and highlights

Which Colors Should You Avoid Pairing with Dark Purple?

Black and near-black fail first. At 1.31:1 against black, dark purple has no perceptible boundary, so a border or a card edge built that way disappears.

3d77f68caa989eab9ab26763aea00dab83c541a4a2517def86f2fac481b036db?ts=1789476647

Two computed near-clashes cause the next problem: #34192D and #251934. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.

Indigo is the subtler failure. The two sit close in both lightness and hue family, so placing them adjacent produces a boundary users can’t see even though each works alone.

Pure white as body text needs a caveat rather than a ban. The 15.98:1 pairing is technically excellent and practically harsh over long passages, so an off-white serves readers better.

Does Dark Purple Meet Accessibility Standards?

Dark purple passes WCAG AAA on white in both directions and fails entirely on dark surfaces. The 15.98:1 measurement clears both the 4.5:1 AA and 7:1 AAA thresholds set by the W3C.

Dark purple lands as follows across the common pairings:

  • #301934 on white: 15.98:1, passes AAA
  • White on #301934: 15.98:1, passes AAA
  • #241327 on white: 17.54:1, passes AAA
  • #301934 on black: 1.31:1, fails
  • #432349 on #1A0C1D: 1.41:1, fails

Those last two are the ones that catch teams out. A design system built on dark purple in light mode needs its dark-theme accents from the tint ramp at #A65FB2 or above, since neither the base nor its computed bright variant works.

Color vision deficiency affects dark purple minimally. Its luminance stays low regardless of how the hue is perceived, so contrast survives even when the cast doesn’t.

Contrast sensitivity favors it in one respect. A dark surface with off-white text at 15:1 is easier for many readers than pure black with pure white at 21:1, which makes dark purple a genuinely comfortable dark-theme base.

How Can You Convert Dark Purple Between HEX, RGB, HSL, CMYK, and Other Color Formats?

Each format describes the same deep purple from a different angle:

  • HEX #301934: the default in design files and CSS
  • RGB rgb(48, 25, 52): blue marginally ahead of red with green well behind
  • RGBA rgba(48, 25, 52, 1): adds alpha for scrims and dark overlays
  • HSL hsl(291, 35%, 15%): low saturation at very low lightness
  • HSB 291, 52, 20: the picker model, reporting saturation at 52%
  • CMYK 8, 52, 0, 80: magenta over a heavy black plate

The four-point gap between blue and red is what carries the entire purple cast. Narrowing it produces a neutral near-black, which is how easily this color loses its identity in conversion.

HSL makes the tint ramp predictable, and for dark purple the tints matter more than the shades. Stepping lightness upward from 15% generates the accent family a dark theme needs.

CMYK reproduces it as a dark neutral. At 80% key the printed version leans further toward black than the screen does, so a spot color is worth considering for brand-critical work.

Wrapping Up

Dark purple is a branded near-black rather than a purple accent. #301934 works as a dark-theme surface, a navigation bar, a primary button, and a heading color at 15.98:1 against white in both directions, #241327 gives a second level at 17.54:1, and every accent in a dark theme has to come from the tint ramp at #A65FB2 or above, since the base disappears against black at 1.31:1.

Those two ramps don’t need to be built by hand. Open Visily and use its AI-powered design tools to generate the dark purple shade and tint ladders, layered dark-theme surfaces, and matched accent pairings across the entire design in one pass.

Mondal Mahbub

Content Writer @ Visily

Mahbub Mondal writes about design, product strategy, and AI-driven creativity for Visily. A content writer and marketer by background, he specializes in translating technical design concepts into clear, actionable insights for non-designers, product managers, and startup teams. Through his work, he explores how modern tools are lowering the barriers to great UI design and faster product iteration.

Design with AI

Experience Visily

Ready to transform your design workflow with high-fidelity AI tools?

Join 50,000+ top designers

Get high-fidelity wireframes and AI metrics for any project.

© 2025 Visily. All rights reserved.