Nevermind Nirvana to Bolognese color palette

7CC7FFNevermind Nirvana 004847Tropical Forest E3693EJelly Slug DAFDFFSalt Mountain BF4900Bolognese

About this palette

Nevermind Nirvana to Bolognese is a 5-color cool palette: #7CC7FF (Nevermind Nirvana), #004847 (Tropical Forest), #E3693E (Jelly Slug), #DAFDFF (Salt Mountain), #BF4900 (Bolognese). It mixes blue, turquoise, red, white, orange tones and feels cool overall. The strongest text pairing is #004847 on #DAFDFF with a contrast ratio of 9.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nevermind Nirvana	rgb(124, 199, 255)	hsl(206, 100%, 74%)
Tropical Forest	rgb(0, 72, 71)	hsl(179, 100%, 14%)
Jelly Slug	rgb(227, 105, 62)	hsl(16, 75%, 57%)
Salt Mountain	rgb(218, 253, 255)	hsl(183, 100%, 93%)
Bolognese	rgb(191, 73, 0)	hsl(23, 100%, 37%)

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.65:1 Very good#004847 on #DAFDFF
Aa9.65:1 Very good#DAFDFF on #004847
Aa5.68:1 Good#7CC7FF on #004847
Aa5.68:1 Good#004847 on #7CC7FF
Aa4.67:1 Good#DAFDFF on #BF4900
Aa4.67:1 Good#BF4900 on #DAFDFF
Aa3.15:1 Poor#004847 on #E3693E
Aa3.15:1 Poor#E3693E on #004847

Color blindness preview

CSS variables

/* Nevermind Nirvana to Bolognese — https://swatchly.xyz/palette/7cc7ff-004847-e3693e-dafdff-bf4900 */
:root {
  --nevermind-nirvana: #7cc7ff;
  --tropical-forest: #004847;
  --jelly-slug: #e3693e;
  --salt-mountain: #dafdff;
  --bolognese: #bf4900;
}

Tailwind CSS v4

/* Nevermind Nirvana to Bolognese — https://swatchly.xyz/palette/7cc7ff-004847-e3693e-dafdff-bf4900 */
@theme {
  --color-nevermind-nirvana: #7cc7ff;
  --color-nevermind-nirvana-50: #eaf6ff;
  --color-nevermind-nirvana-100: #d6edff;
  --color-nevermind-nirvana-200: #afdcff;
  --color-nevermind-nirvana-300: #7cc7ff;
  --color-nevermind-nirvana-400: #60a7dc;
  --color-nevermind-nirvana-500: #418cc0;
  --color-nevermind-nirvana-600: #2471a3;
  --color-nevermind-nirvana-700: #0d5a87;
  --color-nevermind-nirvana-800: #00466d;
  --color-nevermind-nirvana-900: #003656;
  --color-nevermind-nirvana-950: #002238;
  --color-tropical-forest: #004847;
  --color-tropical-forest-50: #dcfdfb;
  --color-tropical-forest-100: #cff4f2;
  --color-tropical-forest-200: #b5e2e0;
  --color-tropical-forest-300: #98cbc9;
  --color-tropical-forest-400: #73acaa;
  --color-tropical-forest-500: #54908e;
  --color-tropical-forest-600: #3a7472;
  --color-tropical-forest-700: #265b5a;
  --color-tropical-forest-800: #004847;
  --color-tropical-forest-900: #0d3635;
  --color-tropical-forest-950: #052221;
  --color-jelly-slug: #e3693e;
  --color-jelly-slug-50: #fff5f2;
  --color-jelly-slug-100: #ffebe4;
  --color-jelly-slug-200: #ffd3c4;
  --color-jelly-slug-300: #ffb59d;
  --color-jelly-slug-400: #fb8760;
  --color-jelly-slug-500: #e3693e;
  --color-jelly-slug-600: #c14b1d;
  --color-jelly-slug-700: #a03300;
  --color-jelly-slug-800: #7d2600;
  --color-jelly-slug-900: #611c00;
  --color-jelly-slug-950: #3e0e00;
  --color-salt-mountain: #dafdff;
  --color-salt-mountain-50: #dafdff;
  --color-salt-mountain-100: #dbf0f1;
  --color-salt-mountain-200: #c4dddf;
  --color-salt-mountain-300: #abc7c9;
  --color-salt-mountain-400: #89a8aa;
  --color-salt-mountain-500: #6d8d8f;
  --color-salt-mountain-600: #547274;
  --color-salt-mountain-700: #3f5b5d;
  --color-salt-mountain-800: #2f4749;
  --color-salt-mountain-900: #223738;
  --color-salt-mountain-950: #132223;
  --color-bolognese: #bf4900;
  --color-bolognese-50: #fff2ed;
  --color-bolognese-100: #ffe7dd;
  --color-bolognese-200: #ffcebb;
  --color-bolognese-300: #ffaf8f;
  --color-bolognese-400: #f78250;
  --color-bolognese-500: #dc642d;
  --color-bolognese-600: #bf4900;
  --color-bolognese-700: #993900;
  --color-bolognese-800: #792b00;
  --color-bolognese-900: #5e2000;
  --color-bolognese-950: #3d1200;
}