Start generating

Prophet Violet to Orion Nebula color palette

6E54ACProphet Violet1A4A00British Racing GreenA8ED90Sweet Mint PestoF459B2Fugitive FlamingoA059E6Orion Nebula
Open in generator Export PNG, PDF, ASE…

About this palette

Prophet Violet to Orion Nebula is a 5-color vibrant, cool palette: #6E54AC (Prophet Violet), #1A4A00 (British Racing Green), #A8ED90 (Sweet Mint Pesto), #F459B2 (Fugitive Flamingo), #A059E6 (Orion Nebula). It mixes purple, green, pink tones and feels cool overall. The strongest text pairing is #1A4A00 on #A8ED90 with a contrast ratio of 7.50:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Prophet Violetrgb(110, 84, 172)hsl(258, 35%, 50%)
British Racing Greenrgb(26, 74, 0)hsl(99, 100%, 15%)
Sweet Mint Pestorgb(168, 237, 144)hsl(105, 72%, 75%)
Fugitive Flamingorgb(244, 89, 178)hsl(326, 88%, 65%)
Orion Nebulargb(160, 89, 230)hsl(270, 74%, 63%)

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.

  • Aa7.50:1 Very good#1A4A00 on #A8ED90
  • Aa7.50:1 Very good#A8ED90 on #1A4A00
  • Aa4.30:1 Poor#6E54AC on #A8ED90
  • Aa4.30:1 Poor#A8ED90 on #6E54AC
  • Aa3.42:1 Poor#1A4A00 on #F459B2
  • Aa3.42:1 Poor#F459B2 on #1A4A00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Prophet Violet to Orion Nebula — https://swatchly.xyz/palette/6e54ac-1a4a00-a8ed90-f459b2-a059e6 */
:root {
  --prophet-violet: #6e54ac;
  --british-racing-green: #1a4a00;
  --sweet-mint-pesto: #a8ed90;
  --fugitive-flamingo: #f459b2;
  --orion-nebula: #a059e6;
}

Tailwind CSS v4

/* Prophet Violet to Orion Nebula — https://swatchly.xyz/palette/6e54ac-1a4a00-a8ed90-f459b2-a059e6 */
@theme {
  --color-prophet-violet: #6e54ac;
  --color-prophet-violet-50: #f5f3ff;
  --color-prophet-violet-100: #ebe6ff;
  --color-prophet-violet-200: #d8ceff;
  --color-prophet-violet-300: #c3b0ff;
  --color-prophet-violet-400: #a48de7;
  --color-prophet-violet-500: #8970ca;
  --color-prophet-violet-600: #6e54ac;
  --color-prophet-violet-700: #58408e;
  --color-prophet-violet-800: #453073;
  --color-prophet-violet-900: #36235d;
  --color-prophet-violet-950: #21143d;
  --color-british-racing-green: #1a4a00;
  --color-british-racing-green-50: #e3ffda;
  --color-british-racing-green-100: #d5f7ca;
  --color-british-racing-green-200: #bde5b0;
  --color-british-racing-green-300: #a2cf92;
  --color-british-racing-green-400: #7eb06d;
  --color-british-racing-green-500: #61934f;
  --color-british-racing-green-600: #477735;
  --color-british-racing-green-700: #335e22;
  --color-british-racing-green-800: #1a4a00;
  --color-british-racing-green-900: #18380b;
  --color-british-racing-green-950: #0c2304;
  --color-sweet-mint-pesto: #a8ed90;
  --color-sweet-mint-pesto-50: #e2ffd8;
  --color-sweet-mint-pesto-100: #cff9c0;
  --color-sweet-mint-pesto-200: #a8ed90;
  --color-sweet-mint-pesto-300: #99d386;
  --color-sweet-mint-pesto-400: #75b55e;
  --color-sweet-mint-pesto-500: #58993f;
  --color-sweet-mint-pesto-600: #3e7d24;
  --color-sweet-mint-pesto-700: #2b650d;
  --color-sweet-mint-pesto-800: #1c5000;
  --color-sweet-mint-pesto-900: #143e00;
  --color-sweet-mint-pesto-950: #0a2700;
  --color-fugitive-flamingo: #f459b2;
  --color-fugitive-flamingo-50: #ffeef6;
  --color-fugitive-flamingo-100: #ffdeed;
  --color-fugitive-flamingo-200: #ffbedd;
  --color-fugitive-flamingo-300: #ff95cc;
  --color-fugitive-flamingo-400: #f459b2;
  --color-fugitive-flamingo-500: #d53a97;
  --color-fugitive-flamingo-600: #b5187c;
  --color-fugitive-flamingo-700: #950064;
  --color-fugitive-flamingo-800: #76004f;
  --color-fugitive-flamingo-900: #5d003d;
  --color-fugitive-flamingo-950: #3e0027;
  --color-orion-nebula: #a059e6;
  --color-orion-nebula-50: #f7f2ff;
  --color-orion-nebula-100: #efe5ff;
  --color-orion-nebula-200: #e1cbff;
  --color-orion-nebula-300: #d0abff;
  --color-orion-nebula-400: #ba7bff;
  --color-orion-nebula-500: #a059e6;
  --color-orion-nebula-600: #853dc6;
  --color-orion-nebula-700: #6c27a6;
  --color-orion-nebula-800: #571789;
  --color-orion-nebula-900: #440b6f;
  --color-orion-nebula-950: #2c034a;
}

Similar palettes