Start generating

Galactic Grapevine to Pristine Oceanic color palette

6E3381Galactic Grapevine008E92Dark CyanFFDDB8Pandora’s Box2F1E00Close but No Cigar00D1C5Pristine Oceanic
Open in generator Export PNG, PDF, ASE…

About this palette

Galactic Grapevine to Pristine Oceanic is a 5-color cool, vintage palette: #6E3381 (Galactic Grapevine), #008E92 (Dark Cyan), #FFDDB8 (Pandora’s Box), #2F1E00 (Close but No Cigar), #00D1C5 (Pristine Oceanic). It mixes purple, turquoise, orange, brown tones and feels cool overall. The strongest text pairing is #FFDDB8 on #2F1E00 with a contrast ratio of 12.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Galactic Grapevinergb(110, 51, 129)hsl(285, 43%, 35%)
Dark Cyanrgb(0, 142, 146)hsl(182, 100%, 29%)
Pandora’s Boxrgb(255, 221, 184)hsl(31, 100%, 86%)
Close but No Cigarrgb(47, 30, 0)hsl(38, 100%, 9%)
Pristine Oceanicrgb(0, 209, 197)hsl(177, 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.

  • Aa12.47:1 Super#FFDDB8 on #2F1E00
  • Aa12.47:1 Super#2F1E00 on #FFDDB8
  • Aa8.36:1 Very good#2F1E00 on #00D1C5
  • Aa8.36:1 Very good#00D1C5 on #2F1E00
  • Aa6.64:1 Good#6E3381 on #FFDDB8
  • Aa6.64:1 Good#FFDDB8 on #6E3381
  • Aa4.45:1 Poor#6E3381 on #00D1C5
  • Aa4.45:1 Poor#00D1C5 on #6E3381

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Galactic Grapevine to Pristine Oceanic — https://swatchly.xyz/palette/6e3381-008e92-ffddb8-2f1e00-00d1c5 */
:root {
  --galactic-grapevine: #6e3381;
  --dark-cyan: #008e92;
  --pandora-s-box: #ffddb8;
  --close-but-no-cigar: #2f1e00;
  --pristine-oceanic: #00d1c5;
}

Tailwind CSS v4

/* Galactic Grapevine to Pristine Oceanic — https://swatchly.xyz/palette/6e3381-008e92-ffddb8-2f1e00-00d1c5 */
@theme {
  --color-galactic-grapevine: #6e3381;
  --color-galactic-grapevine-50: #fbf1ff;
  --color-galactic-grapevine-100: #f8e3ff;
  --color-galactic-grapevine-200: #f0c4ff;
  --color-galactic-grapevine-300: #dea7f1;
  --color-galactic-grapevine-400: #c084d5;
  --color-galactic-grapevine-500: #a466b8;
  --color-galactic-grapevine-600: #864c9a;
  --color-galactic-grapevine-700: #6e3381;
  --color-galactic-grapevine-800: #562865;
  --color-galactic-grapevine-900: #431c50;
  --color-galactic-grapevine-950: #2b0f34;
  --color-dark-cyan: #008e92;
  --color-dark-cyan-50: #cffeff;
  --color-dark-cyan-100: #b5f5f7;
  --color-dark-cyan-200: #94e2e5;
  --color-dark-cyan-300: #6fcccf;
  --color-dark-cyan-400: #3eabaf;
  --color-dark-cyan-500: #008e92;
  --color-dark-cyan-600: #007276;
  --color-dark-cyan-700: #005b5e;
  --color-dark-cyan-800: #00484a;
  --color-dark-cyan-900: #00383a;
  --color-dark-cyan-950: #002425;
  --color-pandora-s-box: #ffddb8;
  --color-pandora-s-box-50: #ffebd6;
  --color-pandora-s-box-100: #ffddb8;
  --color-pandora-s-box-200: #e6ccb0;
  --color-pandora-s-box-300: #d3b697;
  --color-pandora-s-box-400: #b79876;
  --color-pandora-s-box-500: #9c7e5b;
  --color-pandora-s-box-600: #826544;
  --color-pandora-s-box-700: #6a5031;
  --color-pandora-s-box-800: #543d23;
  --color-pandora-s-box-900: #422e18;
  --color-pandora-s-box-950: #2a1c0c;
  --color-close-but-no-cigar: #2f1e00;
  --color-close-but-no-cigar-50: #fff3e2;
  --color-close-but-no-cigar-100: #f7e9d4;
  --color-close-but-no-cigar-200: #e6d5bc;
  --color-close-but-no-cigar-300: #d1bea1;
  --color-close-but-no-cigar-400: #b39e7f;
  --color-close-but-no-cigar-500: #988363;
  --color-close-but-no-cigar-600: #7d694b;
  --color-close-but-no-cigar-700: #665437;
  --color-close-but-no-cigar-800: #514128;
  --color-close-but-no-cigar-900: #40331d;
  --color-close-but-no-cigar-950: #2f1e00;
  --color-pristine-oceanic: #00d1c5;
  --color-pristine-oceanic-50: #bbfff7;
  --color-pristine-oceanic-100: #9af8ee;
  --color-pristine-oceanic-200: #71e5da;
  --color-pristine-oceanic-300: #00d1c5;
  --color-pristine-oceanic-400: #00b0a5;
  --color-pristine-oceanic-500: #00938a;
  --color-pristine-oceanic-600: #007770;
  --color-pristine-oceanic-700: #005f59;
  --color-pristine-oceanic-800: #004c47;
  --color-pristine-oceanic-900: #003c38;
  --color-pristine-oceanic-950: #002623;
}

Similar palettes