Skip to main content

Nebula Drift

5-color mesh gradient

Open in Studio Visualize

Nebula Drift is a 5-color CSS mesh gradient built from #0D0221, #241734, #2E2F7A, #8F3985, and #F5A9E1. Its hues sit in the purple, blue, and pink ranges, and reads as dark and cool. White text on it keeps at least 1.80:1 at its weakest point — below every WCAG text threshold.

#dreamy #dark ui #gaming

UI Preview

See how this gradient looks in a real interface

🎨

Welcome Back

Your creative workspace awaits

Continue

Shade scales

Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step is closest to the original color.

#0D0221

#241734

#2E2F7A

#8F3985

#F5A9E1

@theme {
  --color-nebula-drift-1-50: #F8F6FC;
  --color-nebula-drift-1-100: #EDEAF6;
  --color-nebula-drift-1-200: #DCD7ED;
  --color-nebula-drift-1-300: #C5BEDF;
  --color-nebula-drift-1-400: #A79EC6;
  --color-nebula-drift-1-500: #8E83AF;
  --color-nebula-drift-1-600: #766C95;
  --color-nebula-drift-1-700: #5F567A;
  --color-nebula-drift-1-800: #4B4461;
  --color-nebula-drift-1-900: #3B354D;
  --color-nebula-drift-1-950: #252132;
}

@theme {
  --color-nebula-drift-2-50: #F8F6FB;
  --color-nebula-drift-2-100: #EEEAF4;
  --color-nebula-drift-2-200: #DED7E9;
  --color-nebula-drift-2-300: #C8BED9;
  --color-nebula-drift-2-400: #AB9DBF;
  --color-nebula-drift-2-500: #9183A7;
  --color-nebula-drift-2-600: #796C8E;
  --color-nebula-drift-2-700: #625673;
  --color-nebula-drift-2-800: #4E445C;
  --color-nebula-drift-2-900: #3D3549;
  --color-nebula-drift-2-950: #27212F;
}

@theme {
  --color-nebula-drift-3-50: #F5F7FF;
  --color-nebula-drift-3-100: #E7EBFF;
  --color-nebula-drift-3-200: #D1D8FF;
  --color-nebula-drift-3-300: #B5BEFC;
  --color-nebula-drift-3-400: #939EEA;
  --color-nebula-drift-3-500: #7982D5;
  --color-nebula-drift-3-600: #626AB9;
  --color-nebula-drift-3-700: #4E5499;
  --color-nebula-drift-3-800: #3D427B;
  --color-nebula-drift-3-900: #303462;
  --color-nebula-drift-3-950: #1D2042;
}

@theme {
  --color-nebula-drift-4-50: #FFF3FD;
  --color-nebula-drift-4-100: #FCE3F7;
  --color-nebula-drift-4-200: #F6CBEF;
  --color-nebula-drift-4-300: #ECAAE1;
  --color-nebula-drift-4-400: #D683C9;
  --color-nebula-drift-4-500: #BE65B2;
  --color-nebula-drift-4-600: #A24E98;
  --color-nebula-drift-4-700: #853B7C;
  --color-nebula-drift-4-800: #6B2D64;
  --color-nebula-drift-4-900: #55234F;
  --color-nebula-drift-4-950: #381434;
}

@theme {
  --color-nebula-drift-5-50: #FEF4FB;
  --color-nebula-drift-5-100: #F9E5F3;
  --color-nebula-drift-5-200: #F2CEE7;
  --color-nebula-drift-5-300: #E5B0D6;
  --color-nebula-drift-5-400: #CE8CBC;
  --color-nebula-drift-5-500: #B66FA4;
  --color-nebula-drift-5-600: #9B588B;
  --color-nebula-drift-5-700: #7F4471;
  --color-nebula-drift-5-800: #66355A;
  --color-nebula-drift-5-900: #502947;
  --color-nebula-drift-5-950: #35182E;
}

Light & dark theme

This palette as semantic tokens for a real interface, in both modes. Text, muted text and button labels are adjusted until they pass WCAG AA.

Light

Weekly summary

Everything your team shipped since Monday.

Open reportNewDetails

Dark

Weekly summary

Everything your team shipped since Monday.

Open reportNewDetails
:root {
  --background: #FAF9FC;
  --surface: #F4F2F7;
  --text: #1C191F;
  --muted: #646269;
  --border: #DFDCE4;
  --primary: #8F3985;
  --primary-foreground: #FAFAF9;
  --accent: #2E2F7A;
  --accent-foreground: #FAFAF9;
}

.dark {
  --background: #100E13;
  --surface: #1A181E;
  --text: #F0EDF5;
  --muted: #A6A3AB;
  --border: #343237;
  --primary: #CD72C0;
  --primary-foreground: #1C1917;
  --accent: #8C96EB;
  --accent-foreground: #1C1917;
}

Contrast checker

Text color (rows) on background (columns), scored against WCAG 2.1. 6 of 20 palette combinations are readable as body text. White and near-black text are included for comparison.

WCAG contrast ratio for each text and background color combination
Text ↓ / Bg → #0D0221#241734#2E2F7A#8F3985#F5A9E1
#0D0221
Same color
1.2Fail
1.7Fail
3.0Fail
11.1AAA
#241734
1.2Fail
Same color
1.4Fail
2.5Fail
9.3AAA
#2E2F7A
1.7Fail
1.4Fail
Same color
1.7Fail
6.5AA
#8F3985
3.0Fail
2.5Fail
1.7Fail
Same color
3.8AA18
#F5A9E1
11.1AAA
9.3AAA
6.5AA
3.8AA18
Same color
White
20.0AAA
16.8AAA
11.6AAA
6.8AA
1.8Fail
Near-black
1.1Fail
1.0Fail
1.5Fail
2.6Fail
9.7AAA

AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only

Text that works on each color

  • White on #0D0221 · 20.0:1
  • White on #241734 · 16.8:1
  • White on #2E2F7A · 11.6:1
  • White on #8F3985 · 6.8:1
  • Near-black on #F5A9E1 · 9.7:1
Suggested fixes for 14 failing pairs

The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.

Color blindness check

About 1 in 12 men and 1 in 200 women see color differently. Simulated with the Machado (2009) model.

Typical
Deuteranopia

No green cones — the most common form. No two swatches become hard to tell apart here.

What are the HEX, RGB, and HSL values for Nebula Drift?

Every color in this 5-color set, with its contrast ratio against white and black.

Color values for Nebula Drift: hex, RGB, HSL, and WCAG contrast ratios against white and black.
ColorNameHEXRGBHSLOn whiteOn black
#0D0221Rich Black#0D022113, 2, 33261°, 89%, 7%20.04:11.05:1
#241734Midnight#24173436, 23, 52267°, 39%, 15%16.84:11.25:1
#2E2F7ADark Slate Blue#2E2F7A46, 47, 122239°, 45%, 33%11.64:11.80:1
#8F3985Boysenberry#8F3985143, 57, 133307°, 43%, 39%6.79:13.09:1
#F5A9E1Plum#F5A9E1245, 169, 225316°, 79%, 81%1.80:111.64:1

Related mesh gradients

Others sharing the same hues and tone

All mesh gradients →