Nevermind Nirvana to Jazz color palette

67CBFFNevermind Nirvana 3BC89CMacau CC5D66Fuzzy Wuzzy 007B99Pacific Pleasure 135439Moor-Monster 5D262BJazz

Open in generator Export PNG, PDF, ASE…

About this palette

Nevermind Nirvana to Jazz is a 6-color cool palette: #67CBFF (Nevermind Nirvana), #3BC89C (Macau), #CC5D66 (Fuzzy Wuzzy), #007B99 (Pacific Pleasure), #135439 (Moor-Monster), #5D262B (Jazz). It mixes blue, turquoise, red, green, brown tones and feels cool overall. The strongest text pairing is #67CBFF on #5D262B with a contrast ratio of 6.51:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nevermind Nirvana	rgb(103, 203, 255)	hsl(201, 100%, 70%)
Macau	rgb(59, 200, 156)	hsl(161, 56%, 51%)
Fuzzy Wuzzy	rgb(204, 93, 102)	hsl(355, 52%, 58%)
Pacific Pleasure	rgb(0, 123, 153)	hsl(192, 100%, 30%)
Moor-Monster	rgb(19, 84, 57)	hsl(155, 63%, 20%)
Jazz	rgb(93, 38, 43)	hsl(355, 42%, 26%)

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.

Aa6.51:1 Good#67CBFF on #5D262B
Aa6.51:1 Good#5D262B on #67CBFF
Aa5.59:1 Good#3BC89C on #5D262B
Aa5.59:1 Good#5D262B on #3BC89C
Aa4.91:1 Good#67CBFF on #135439
Aa4.91:1 Good#135439 on #67CBFF
Aa4.22:1 Poor#3BC89C on #135439
Aa4.22:1 Poor#135439 on #3BC89C

Color blindness preview

CSS variables

/* Nevermind Nirvana to Jazz — https://swatchly.xyz/palette/67cbff-3bc89c-cc5d66-007b99-135439-5d262b */
:root {
  --nevermind-nirvana: #67cbff;
  --macau: #3bc89c;
  --fuzzy-wuzzy: #cc5d66;
  --pacific-pleasure: #007b99;
  --moor-monster: #135439;
  --jazz: #5d262b;
}

Tailwind CSS v4

/* Nevermind Nirvana to Jazz — https://swatchly.xyz/palette/67cbff-3bc89c-cc5d66-007b99-135439-5d262b */
@theme {
  --color-nevermind-nirvana: #67cbff;
  --color-nevermind-nirvana-50: #e8f6ff;
  --color-nevermind-nirvana-100: #d2eeff;
  --color-nevermind-nirvana-200: #a5deff;
  --color-nevermind-nirvana-300: #67cbff;
  --color-nevermind-nirvana-400: #4aabdc;
  --color-nevermind-nirvana-500: #208fc1;
  --color-nevermind-nirvana-600: #0074a0;
  --color-nevermind-nirvana-700: #005c80;
  --color-nevermind-nirvana-800: #004865;
  --color-nevermind-nirvana-900: #00384f;
  --color-nevermind-nirvana-950: #002333;
  --color-macau: #3bc89c;
  --color-macau-50: #eafff6;
  --color-macau-100: #ccffe9;
  --color-macau-200: #a0f4d3;
  --color-macau-300: #7ee2bd;
  --color-macau-400: #3bc89c;
  --color-macau-500: #00a97f;
  --color-macau-600: #008866;
  --color-macau-700: #006b50;
  --color-macau-800: #00533d;
  --color-macau-900: #003f2d;
  --color-macau-950: #00261b;
  --color-fuzzy-wuzzy: #cc5d66;
  --color-fuzzy-wuzzy-50: #fff1f1;
  --color-fuzzy-wuzzy-100: #ffe3e3;
  --color-fuzzy-wuzzy-200: #ffc7c8;
  --color-fuzzy-wuzzy-300: #ffa3a7;
  --color-fuzzy-wuzzy-400: #e97b82;
  --color-fuzzy-wuzzy-500: #cc5d66;
  --color-fuzzy-wuzzy-600: #ac434d;
  --color-fuzzy-wuzzy-700: #8f2e3a;
  --color-fuzzy-wuzzy-800: #741e2a;
  --color-fuzzy-wuzzy-900: #5c131e;
  --color-fuzzy-wuzzy-950: #3d0811;
  --color-pacific-pleasure: #007b99;
  --color-pacific-pleasure-50: #e8f8ff;
  --color-pacific-pleasure-100: #d1f2ff;
  --color-pacific-pleasure-200: #a2e4fc;
  --color-pacific-pleasure-300: #82cfeb;
  --color-pacific-pleasure-400: #57b1cf;
  --color-pacific-pleasure-500: #3396b5;
  --color-pacific-pleasure-600: #007b99;
  --color-pacific-pleasure-700: #00627a;
  --color-pacific-pleasure-800: #004c60;
  --color-pacific-pleasure-900: #003b4b;
  --color-pacific-pleasure-950: #002530;
  --color-moor-monster: #135439;
  --color-moor-monster-50: #ddffec;
  --color-moor-monster-100: #d0f6e1;
  --color-moor-monster-200: #b6e4cb;
  --color-moor-monster-300: #9cd0b4;
  --color-moor-monster-400: #78b294;
  --color-moor-monster-500: #5b9879;
  --color-moor-monster-600: #427d60;
  --color-moor-monster-700: #2e664c;
  --color-moor-monster-800: #135439;
  --color-moor-monster-900: #13402c;
  --color-moor-monster-950: #08291b;
  --color-jazz: #5d262b;
  --color-jazz-50: #fff1f2;
  --color-jazz-100: #ffe4e4;
  --color-jazz-200: #fdc8ca;
  --color-jazz-300: #eaafb1;
  --color-jazz-400: #cf9092;
  --color-jazz-500: #b47578;
  --color-jazz-600: #995c5f;
  --color-jazz-700: #80484b;
  --color-jazz-800: #6a383b;
  --color-jazz-900: #5d262b;
  --color-jazz-950: #3a1a1c;
}