Violet Vixen to Neptune Green color palette

803278Violet Vixen F2BEA0Peachy-Kini 311836Nightly Voyager B26E00Caramel 094F7DSea Paint 7EBB97Neptune Green

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Vixen to Neptune Green is a 6-color vintage palette: #803278 (Violet Vixen), #F2BEA0 (Peachy-Kini), #311836 (Nightly Voyager), #B26E00 (Caramel), #094F7D (Sea Paint), #7EBB97 (Neptune Green). It mixes pink, orange, purple, blue, green tones and feels balanced overall. The strongest text pairing is #F2BEA0 on #311836 with a contrast ratio of 9.62:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Vixen	rgb(128, 50, 120)	hsl(306, 44%, 35%)
Peachy-Kini	rgb(242, 190, 160)	hsl(22, 76%, 79%)
Nightly Voyager	rgb(49, 24, 54)	hsl(290, 38%, 15%)
Caramel	rgb(178, 110, 0)	hsl(37, 100%, 35%)
Sea Paint	rgb(9, 79, 125)	hsl(204, 87%, 26%)
Neptune Green	rgb(126, 187, 151)	hsl(145, 31%, 61%)

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.

Aa9.62:1 Very good#F2BEA0 on #311836
Aa9.62:1 Very good#311836 on #F2BEA0
Aa7.18:1 Very good#311836 on #7EBB97
Aa7.18:1 Very good#7EBB97 on #311836
Aa5.21:1 Good#F2BEA0 on #094F7D
Aa5.21:1 Good#094F7D on #F2BEA0
Aa4.78:1 Good#803278 on #F2BEA0
Aa4.78:1 Good#F2BEA0 on #803278

Color blindness preview

CSS variables

/* Violet Vixen to Neptune Green — https://swatchly.xyz/palette/803278-f2bea0-311836-b26e00-094f7d-7ebb97 */
:root {
  --violet-vixen: #803278;
  --peachy-kini: #f2bea0;
  --nightly-voyager: #311836;
  --caramel: #b26e00;
  --sea-paint: #094f7d;
  --neptune-green: #7ebb97;
}

Tailwind CSS v4

/* Violet Vixen to Neptune Green — https://swatchly.xyz/palette/803278-f2bea0-311836-b26e00-094f7d-7ebb97 */
@theme {
  --color-violet-vixen: #803278;
  --color-violet-vixen-50: #fff0fc;
  --color-violet-vixen-100: #ffe0fa;
  --color-violet-vixen-200: #ffc0f5;
  --color-violet-vixen-300: #eea4e4;
  --color-violet-vixen-400: #d281c7;
  --color-violet-vixen-500: #b664ac;
  --color-violet-vixen-600: #994a90;
  --color-violet-vixen-700: #803278;
  --color-violet-vixen-800: #65265e;
  --color-violet-vixen-900: #501a4a;
  --color-violet-vixen-950: #340d30;
  --color-peachy-kini: #f2bea0;
  --color-peachy-kini-50: #fff9f5;
  --color-peachy-kini-100: #ffeee5;
  --color-peachy-kini-200: #fcd7c2;
  --color-peachy-kini-300: #f2bea0;
  --color-peachy-kini-400: #cd9e82;
  --color-peachy-kini-500: #b08064;
  --color-peachy-kini-600: #926449;
  --color-peachy-kini-700: #764d34;
  --color-peachy-kini-800: #5e3a24;
  --color-peachy-kini-900: #482a18;
  --color-peachy-kini-950: #2f190c;
  --color-nightly-voyager: #311836;
  --color-nightly-voyager-50: #fdf0ff;
  --color-nightly-voyager-100: #f8e3fc;
  --color-nightly-voyager-200: #e6ceeb;
  --color-nightly-voyager-300: #d1b6d7;
  --color-nightly-voyager-400: #b396b9;
  --color-nightly-voyager-500: #997b9f;
  --color-nightly-voyager-600: #7e6284;
  --color-nightly-voyager-700: #674d6c;
  --color-nightly-voyager-800: #533c57;
  --color-nightly-voyager-900: #422e46;
  --color-nightly-voyager-950: #311836;
  --color-caramel: #b26e00;
  --color-caramel-50: #fff1e4;
  --color-caramel-100: #ffe4c7;
  --color-caramel-200: #ffc88d;
  --color-caramel-300: #edae67;
  --color-caramel-400: #cf8b38;
  --color-caramel-500: #b26e00;
  --color-caramel-600: #905800;
  --color-caramel-700: #734500;
  --color-caramel-800: #5b3600;
  --color-caramel-900: #472900;
  --color-caramel-950: #2e1900;
  --color-sea-paint: #094f7d;
  --color-sea-paint-50: #edf6ff;
  --color-sea-paint-100: #dbeeff;
  --color-sea-paint-200: #b6ddff;
  --color-sea-paint-300: #95c9f6;
  --color-sea-paint-400: #71abdc;
  --color-sea-paint-500: #5491c3;
  --color-sea-paint-600: #3b77a8;
  --color-sea-paint-700: #27618e;
  --color-sea-paint-800: #094f7d;
  --color-sea-paint-900: #0c3d60;
  --color-sea-paint-950: #032740;
  --color-neptune-green: #7ebb97;
  --color-neptune-green-50: #e9fff1;
  --color-neptune-green-100: #d7fbe4;
  --color-neptune-green-200: #bfead0;
  --color-neptune-green-300: #a5d7b8;
  --color-neptune-green-400: #7ebb97;
  --color-neptune-green-500: #619d7b;
  --color-neptune-green-600: #45805f;
  --color-neptune-green-700: #2f6648;
  --color-neptune-green-800: #1f5036;
  --color-neptune-green-900: #133d28;
  --color-neptune-green-950: #072616;
}