Vibrant Velvet to Cooler Than Ever color palette

C60092Vibrant Velvet DB3F9FKirby 00A9A6Teal Me No Lies FF763EPrecious Persimmon 85BFFFCooler Than Ever

Open in generator Export PNG, PDF, ASE…

About this palette

Vibrant Velvet to Cooler Than Ever is a 5-color vibrant, warm, neon palette: #C60092 (Vibrant Velvet), #DB3F9F (Kirby), #00A9A6 (Teal Me No Lies), #FF763E (Precious Persimmon), #85BFFF (Cooler Than Ever). It mixes red, pink, turquoise, orange, blue tones and feels warm overall. The strongest text pairing is #C60092 on #85BFFF with a contrast ratio of 2.85:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vibrant Velvet	rgb(198, 0, 146)	hsl(316, 100%, 39%)
Kirby	rgb(219, 63, 159)	hsl(323, 68%, 55%)
Teal Me No Lies	rgb(0, 169, 166)	hsl(179, 100%, 33%)
Precious Persimmon	rgb(255, 118, 62)	hsl(17, 100%, 62%)
Cooler Than Ever	rgb(133, 191, 255)	hsl(211, 100%, 76%)

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

CSS variables

/* Vibrant Velvet to Cooler Than Ever — https://swatchly.xyz/palette/c60092-db3f9f-00a9a6-ff763e-85bfff */
:root {
  --vibrant-velvet: #c60092;
  --kirby: #db3f9f;
  --teal-me-no-lies: #00a9a6;
  --precious-persimmon: #ff763e;
  --cooler-than-ever: #85bfff;
}

Tailwind CSS v4

/* Vibrant Velvet to Cooler Than Ever — https://swatchly.xyz/palette/c60092-db3f9f-00a9a6-ff763e-85bfff */
@theme {
  --color-vibrant-velvet: #c60092;
  --color-vibrant-velvet-50: #fff0f8;
  --color-vibrant-velvet-100: #ffe3f2;
  --color-vibrant-velvet-200: #ffc7e6;
  --color-vibrant-velvet-300: #ffa2d8;
  --color-vibrant-velvet-400: #ff60c6;
  --color-vibrant-velvet-500: #e537ad;
  --color-vibrant-velvet-600: #c60092;
  --color-vibrant-velvet-700: #9f0074;
  --color-vibrant-velvet-800: #7d005b;
  --color-vibrant-velvet-900: #620046;
  --color-vibrant-velvet-950: #40002d;
  --color-kirby: #db3f9f;
  --color-kirby-50: #fff1f7;
  --color-kirby-100: #ffe2f0;
  --color-kirby-200: #ffc4e2;
  --color-kirby-300: #ff9ed2;
  --color-kirby-400: #f863ba;
  --color-kirby-500: #db3f9f;
  --color-kirby-600: #ba1b83;
  --color-kirby-700: #990069;
  --color-kirby-800: #790053;
  --color-kirby-900: #5f0040;
  --color-kirby-950: #3e0028;
  --color-teal-me-no-lies: #00a9a6;
  --color-teal-me-no-lies-50: #e0fffd;
  --color-teal-me-no-lies-100: #bcfffc;
  --color-teal-me-no-lies-200: #9ff0ed;
  --color-teal-me-no-lies-300: #7ddeda;
  --color-teal-me-no-lies-400: #4ac2bf;
  --color-teal-me-no-lies-500: #00a9a6;
  --color-teal-me-no-lies-600: #008886;
  --color-teal-me-no-lies-700: #006c6a;
  --color-teal-me-no-lies-800: #005452;
  --color-teal-me-no-lies-900: #00403e;
  --color-teal-me-no-lies-950: #002726;
  --color-precious-persimmon: #ff763e;
  --color-precious-persimmon-50: #fff3ef;
  --color-precious-persimmon-100: #ffe7de;
  --color-precious-persimmon-200: #ffcdba;
  --color-precious-persimmon-300: #ffac8d;
  --color-precious-persimmon-400: #ff763e;
  --color-precious-persimmon-500: #de581a;
  --color-precious-persimmon-600: #b84200;
  --color-precious-persimmon-700: #933300;
  --color-precious-persimmon-800: #742600;
  --color-precious-persimmon-900: #5a1c00;
  --color-precious-persimmon-950: #3b0f00;
  --color-cooler-than-ever: #85bfff;
  --color-cooler-than-ever-50: #e8f3ff;
  --color-cooler-than-ever-100: #d6e9ff;
  --color-cooler-than-ever-200: #b1d6ff;
  --color-cooler-than-ever-300: #85bfff;
  --color-cooler-than-ever-400: #69a0dd;
  --color-cooler-than-ever-500: #4d85c2;
  --color-cooler-than-ever-600: #356ba5;
  --color-cooler-than-ever-700: #235589;
  --color-cooler-than-ever-800: #164370;
  --color-cooler-than-ever-900: #0c345b;
  --color-cooler-than-ever-950: #04203c;
}