Dark Orange to Nevermind Nirvana color palette

C35300Dark Orange 008BBFMermaid Dreams CC4CFFBubblegum Baby Girl E96EFFVenus Slipper Orchid 6CC9FFNevermind Nirvana

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Orange to Nevermind Nirvana is a 5-color vibrant, cool, neon palette: #C35300 (Dark Orange), #008BBF (Mermaid Dreams), #CC4CFF (Bubblegum Baby Girl), #E96EFF (Venus Slipper Orchid), #6CC9FF (Nevermind Nirvana). It mixes orange, blue, purple tones and feels cool overall. The strongest text pairing is #C35300 on #6CC9FF with a contrast ratio of 2.51:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Orange	rgb(195, 83, 0)	hsl(26, 100%, 38%)
Mermaid Dreams	rgb(0, 139, 191)	hsl(196, 100%, 37%)
Bubblegum Baby Girl	rgb(204, 76, 255)	hsl(283, 100%, 65%)
Venus Slipper Orchid	rgb(233, 110, 255)	hsl(291, 100%, 72%)
Nevermind Nirvana	rgb(108, 201, 255)	hsl(202, 100%, 71%)

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

/* Dark Orange to Nevermind Nirvana — https://swatchly.xyz/palette/c35300-008bbf-cc4cff-e96eff-6cc9ff */
:root {
  --dark-orange: #c35300;
  --mermaid-dreams: #008bbf;
  --bubblegum-baby-girl: #cc4cff;
  --venus-slipper-orchid: #e96eff;
  --nevermind-nirvana: #6cc9ff;
}

Tailwind CSS v4

/* Dark Orange to Nevermind Nirvana — https://swatchly.xyz/palette/c35300-008bbf-cc4cff-e96eff-6cc9ff */
@theme {
  --color-dark-orange: #c35300;
  --color-dark-orange-50: #ffefe8;
  --color-dark-orange-100: #ffdfd0;
  --color-dark-orange-200: #ffc1a3;
  --color-dark-orange-300: #ff9b69;
  --color-dark-orange-400: #e37235;
  --color-dark-orange-500: #c35300;
  --color-dark-orange-600: #9e4200;
  --color-dark-orange-700: #7f3300;
  --color-dark-orange-800: #652700;
  --color-dark-orange-900: #511e00;
  --color-dark-orange-950: #351100;
  --color-mermaid-dreams: #008bbf;
  --color-mermaid-dreams-50: #e8f7ff;
  --color-mermaid-dreams-100: #d1eeff;
  --color-mermaid-dreams-200: #a2ddff;
  --color-mermaid-dreams-300: #6fc8f8;
  --color-mermaid-dreams-400: #3ea8dc;
  --color-mermaid-dreams-500: #008bbf;
  --color-mermaid-dreams-600: #00709b;
  --color-mermaid-dreams-700: #00597c;
  --color-mermaid-dreams-800: #004662;
  --color-mermaid-dreams-900: #00364d;
  --color-mermaid-dreams-950: #002232;
  --color-bubblegum-baby-girl: #cc4cff;
  --color-bubblegum-baby-girl-50: #f8eaff;
  --color-bubblegum-baby-girl-100: #f2d9ff;
  --color-bubblegum-baby-girl-200: #e8b9ff;
  --color-bubblegum-baby-girl-300: #dc91ff;
  --color-bubblegum-baby-girl-400: #cc4cff;
  --color-bubblegum-baby-girl-500: #b12ae2;
  --color-bubblegum-baby-girl-600: #9400c1;
  --color-bubblegum-baby-girl-700: #77009c;
  --color-bubblegum-baby-girl-800: #5f007e;
  --color-bubblegum-baby-girl-900: #4c0065;
  --color-bubblegum-baby-girl-950: #330045;
  --color-venus-slipper-orchid: #e96eff;
  --color-venus-slipper-orchid-50: #fef5ff;
  --color-venus-slipper-orchid-100: #fce8ff;
  --color-venus-slipper-orchid-200: #f8ccff;
  --color-venus-slipper-orchid-300: #f2a9ff;
  --color-venus-slipper-orchid-400: #e96eff;
  --color-venus-slipper-orchid-500: #c94fde;
  --color-venus-slipper-orchid-600: #a92cbe;
  --color-venus-slipper-orchid-700: #8b0a9f;
  --color-venus-slipper-orchid-800: #6e007e;
  --color-venus-slipper-orchid-900: #550062;
  --color-venus-slipper-orchid-950: #36003f;
  --color-nevermind-nirvana: #6cc9ff;
  --color-nevermind-nirvana-50: #e8f6ff;
  --color-nevermind-nirvana-100: #d2edff;
  --color-nevermind-nirvana-200: #a6ddff;
  --color-nevermind-nirvana-300: #6cc9ff;
  --color-nevermind-nirvana-400: #4fa9dc;
  --color-nevermind-nirvana-500: #2a8ec1;
  --color-nevermind-nirvana-600: #0073a3;
  --color-nevermind-nirvana-700: #005b82;
  --color-nevermind-nirvana-800: #004867;
  --color-nevermind-nirvana-900: #003751;
  --color-nevermind-nirvana-950: #002235;
}