Start generating

Dreamscape Purple to Pristine Oceanic color palette

9236DEDreamscape Purple009E7EPaolo Veronese Green9D7EFFPeriwinkle86A7FFFennel Flower00D0C0Pristine Oceanic
Open in generator Export PNG, PDF, ASE…

About this palette

Dreamscape Purple to Pristine Oceanic is a 5-color vibrant, cool, neon palette: #9236DE (Dreamscape Purple), #009E7E (Paolo Veronese Green), #9D7EFF (Periwinkle), #86A7FF (Fennel Flower), #00D0C0 (Pristine Oceanic). It mixes purple, turquoise, blue tones and feels cool overall. The strongest text pairing is #9236DE on #00D0C0 with a contrast ratio of 2.83:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Dreamscape Purplergb(146, 54, 222)hsl(273, 72%, 54%)
Paolo Veronese Greenrgb(0, 158, 126)hsl(168, 100%, 31%)
Periwinklergb(157, 126, 255)hsl(254, 100%, 75%)
Fennel Flowerrgb(134, 167, 255)hsl(224, 100%, 76%)
Pristine Oceanicrgb(0, 208, 192)hsl(175, 100%, 41%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Dreamscape Purple to Pristine Oceanic — https://swatchly.xyz/palette/9236de-009e7e-9d7eff-86a7ff-00d0c0 */
:root {
  --dreamscape-purple: #9236de;
  --paolo-veronese-green: #009e7e;
  --periwinkle: #9d7eff;
  --fennel-flower: #86a7ff;
  --pristine-oceanic: #00d0c0;
}

    Tailwind CSS v4

    /* Dreamscape Purple to Pristine Oceanic — https://swatchly.xyz/palette/9236de-009e7e-9d7eff-86a7ff-00d0c0 */
@theme {
  --color-dreamscape-purple: #9236de;
  --color-dreamscape-purple-50: #f8f2ff;
  --color-dreamscape-purple-100: #f1e7ff;
  --color-dreamscape-purple-200: #e3cfff;
  --color-dreamscape-purple-300: #d4b2ff;
  --color-dreamscape-purple-400: #bf84ff;
  --color-dreamscape-purple-500: #ac56fc;
  --color-dreamscape-purple-600: #9236de;
  --color-dreamscape-purple-700: #771bbb;
  --color-dreamscape-purple-800: #60019b;
  --color-dreamscape-purple-900: #4a007a;
  --color-dreamscape-purple-950: #2f0051;
  --color-paolo-veronese-green: #009e7e;
  --color-paolo-veronese-green-50: #dafff2;
  --color-paolo-veronese-green-100: #b9fce5;
  --color-paolo-veronese-green-200: #99ecd1;
  --color-paolo-veronese-green-300: #75d7b9;
  --color-paolo-veronese-green-400: #43b999;
  --color-paolo-veronese-green-500: #009e7e;
  --color-paolo-veronese-green-600: #007f65;
  --color-paolo-veronese-green-700: #006550;
  --color-paolo-veronese-green-800: #004f3e;
  --color-paolo-veronese-green-900: #003d2f;
  --color-paolo-veronese-green-950: #00261d;
  --color-periwinkle: #9d7eff;
  --color-periwinkle-50: #f2f0ff;
  --color-periwinkle-100: #e6e2ff;
  --color-periwinkle-200: #d1c9ff;
  --color-periwinkle-300: #baabff;
  --color-periwinkle-400: #9d7eff;
  --color-periwinkle-500: #8463e2;
  --color-periwinkle-600: #6c4ac2;
  --color-periwinkle-700: #5736a4;
  --color-periwinkle-800: #452687;
  --color-periwinkle-900: #361b6e;
  --color-periwinkle-950: #230e4c;
  --color-fennel-flower: #86a7ff;
  --color-fennel-flower-50: #f6f8ff;
  --color-fennel-flower-100: #eaf0ff;
  --color-fennel-flower-200: #d0deff;
  --color-fennel-flower-300: #b2c8ff;
  --color-fennel-flower-400: #86a7ff;
  --color-fennel-flower-500: #6a89de;
  --color-fennel-flower-600: #506cbe;
  --color-fennel-flower-700: #3b549f;
  --color-fennel-flower-800: #2a3f81;
  --color-fennel-flower-900: #1e2f66;
  --color-fennel-flower-950: #0f1c43;
  --color-pristine-oceanic: #00d0c0;
  --color-pristine-oceanic-50: #b8fff5;
  --color-pristine-oceanic-100: #99f7eb;
  --color-pristine-oceanic-200: #6fe4d6;
  --color-pristine-oceanic-300: #00d0c0;
  --color-pristine-oceanic-400: #00afa1;
  --color-pristine-oceanic-500: #009287;
  --color-pristine-oceanic-600: #00776d;
  --color-pristine-oceanic-700: #005f57;
  --color-pristine-oceanic-800: #004c45;
  --color-pristine-oceanic-900: #003c37;
  --color-pristine-oceanic-950: #002622;
}

    Similar palettes