Start generating

Tulip to Smashing Pumpkins color palette

FF878CTulip008091Bermuda00CAFATropical TurquoiseD36C00Cinnamon9D4BEFOrion NebulaFF512CSmashing Pumpkins
Open in generator Export PNG, PDF, ASE…

About this palette

Tulip to Smashing Pumpkins is a 6-color vibrant, neon palette: #FF878C (Tulip), #008091 (Bermuda), #00CAFA (Tropical Turquoise), #D36C00 (Cinnamon), #9D4BEF (Orion Nebula), #FF512C (Smashing Pumpkins). It mixes red, turquoise, blue, orange, purple tones and feels balanced overall. The strongest text pairing is #008091 on #00CAFA with a contrast ratio of 2.41:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tuliprgb(255, 135, 140)hsl(358, 100%, 76%)
Bermudargb(0, 128, 145)hsl(187, 100%, 28%)
Tropical Turquoisergb(0, 202, 250)hsl(192, 100%, 49%)
Cinnamonrgb(211, 108, 0)hsl(31, 100%, 41%)
Orion Nebulargb(157, 75, 239)hsl(270, 84%, 62%)
Smashing Pumpkinsrgb(255, 81, 44)hsl(11, 100%, 59%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Tulip to Smashing Pumpkins — https://swatchly.xyz/palette/ff878c-008091-00cafa-d36c00-9d4bef-ff512c */
:root {
  --tulip: #ff878c;
  --bermuda: #008091;
  --tropical-turquoise: #00cafa;
  --cinnamon: #d36c00;
  --orion-nebula: #9d4bef;
  --smashing-pumpkins: #ff512c;
}

    Tailwind CSS v4

    /* Tulip to Smashing Pumpkins — https://swatchly.xyz/palette/ff878c-008091-00cafa-d36c00-9d4bef-ff512c */
@theme {
  --color-tulip: #ff878c;
  --color-tulip-50: #fff9f8;
  --color-tulip-100: #ffefee;
  --color-tulip-200: #ffd6d6;
  --color-tulip-300: #ffb8b9;
  --color-tulip-400: #ff878c;
  --color-tulip-500: #dc696f;
  --color-tulip-600: #bb4a53;
  --color-tulip-700: #9a323c;
  --color-tulip-800: #7c202b;
  --color-tulip-900: #61131e;
  --color-tulip-950: #3e070f;
  --color-bermuda: #008091;
  --color-bermuda-50: #e2faff;
  --color-bermuda-100: #c7f6ff;
  --color-bermuda-200: #a3e7f4;
  --color-bermuda-300: #84d3e2;
  --color-bermuda-400: #59b5c6;
  --color-bermuda-500: #339aac;
  --color-bermuda-600: #008091;
  --color-bermuda-700: #006674;
  --color-bermuda-800: #004f5b;
  --color-bermuda-900: #003d46;
  --color-bermuda-950: #00262c;
  --color-tropical-turquoise: #00cafa;
  --color-tropical-turquoise-50: #dbf5ff;
  --color-tropical-turquoise-100: #beedff;
  --color-tropical-turquoise-200: #80deff;
  --color-tropical-turquoise-300: #00cafa;
  --color-tropical-turquoise-400: #00aad2;
  --color-tropical-turquoise-500: #008eb0;
  --color-tropical-turquoise-600: #00738f;
  --color-tropical-turquoise-700: #005c73;
  --color-tropical-turquoise-800: #00495c;
  --color-tropical-turquoise-900: #003949;
  --color-tropical-turquoise-950: #00242f;
  --color-cinnamon: #d36c00;
  --color-cinnamon-50: #fff4ed;
  --color-cinnamon-100: #ffe8da;
  --color-cinnamon-200: #ffd0b1;
  --color-cinnamon-300: #ffb17b;
  --color-cinnamon-400: #ed893d;
  --color-cinnamon-500: #d36c00;
  --color-cinnamon-600: #ab5600;
  --color-cinnamon-700: #884300;
  --color-cinnamon-800: #6b3400;
  --color-cinnamon-900: #532700;
  --color-cinnamon-950: #351600;
  --color-orion-nebula: #9d4bef;
  --color-orion-nebula-50: #f6f1ff;
  --color-orion-nebula-100: #ede3ff;
  --color-orion-nebula-200: #dec8ff;
  --color-orion-nebula-300: #cca8ff;
  --color-orion-nebula-400: #b576ff;
  --color-orion-nebula-500: #9d4bef;
  --color-orion-nebula-600: #832ece;
  --color-orion-nebula-700: #6b15ae;
  --color-orion-nebula-800: #560190;
  --color-orion-nebula-900: #430073;
  --color-orion-nebula-950: #2b004d;
  --color-smashing-pumpkins: #ff512c;
  --color-smashing-pumpkins-50: #ffece8;
  --color-smashing-pumpkins-100: #ffdcd4;
  --color-smashing-pumpkins-200: #ffbdae;
  --color-smashing-pumpkins-300: #ff977f;
  --color-smashing-pumpkins-400: #ff512c;
  --color-smashing-pumpkins-500: #e03100;
  --color-smashing-pumpkins-600: #b62600;
  --color-smashing-pumpkins-700: #931d00;
  --color-smashing-pumpkins-800: #761500;
  --color-smashing-pumpkins-900: #5e0e00;
  --color-smashing-pumpkins-950: #400600;
}

    Similar palettes