Tangerine Tango to Bold Irish Color Palette

About this palette

Tangerine Tango to Bold Irish is a 5-color vibrant, cool palette: #FF9B49 (Tangerine Tango), #008DA0 (Waikiki), #FF8C8C (Tulip), #CA67F4 (Bubblegum Baby Girl), #00814F (Bold Irish). It mixes orange, turquoise, red, purple, green tones and feels cool overall. The strongest text pairing is #FF9B49 on #00814F with a contrast ratio of 2.36:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tangerine Tango	rgb(255, 155, 73)	hsl(27, 100%, 64%)
Waikiki	rgb(0, 141, 160)	hsl(187, 100%, 31%)
Tulip	rgb(255, 140, 140)	hsl(0, 100%, 77%)
Bubblegum Baby Girl	rgb(202, 103, 244)	hsl(282, 87%, 68%)
Bold Irish	rgb(0, 129, 79)	hsl(157, 100%, 25%)

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

/* Tangerine Tango to Bold Irish — https://swatchly.xyz/palette/ff9b49-008da0-ff8c8c-ca67f4-00814f */
:root {
  --tangerine-tango: #ff9b49;
  --waikiki: #008da0;
  --tulip: #ff8c8c;
  --bubblegum-baby-girl: #ca67f4;
  --bold-irish: #00814f;
}

Tailwind CSS v4

/* Tangerine Tango to Bold Irish — https://swatchly.xyz/palette/ff9b49-008da0-ff8c8c-ca67f4-00814f */
@theme {
  --color-tangerine-tango: #ff9b49;
  --color-tangerine-tango-50: #ffecdf;
  --color-tangerine-tango-100: #ffddc5;
  --color-tangerine-tango-200: #ffc092;
  --color-tangerine-tango-300: #ff9b49;
  --color-tangerine-tango-400: #dd7e2a;
  --color-tangerine-tango-500: #bf6500;
  --color-tangerine-tango-600: #9b5100;
  --color-tangerine-tango-700: #7d4000;
  --color-tangerine-tango-800: #643200;
  --color-tangerine-tango-900: #4f2600;
  --color-tangerine-tango-950: #331600;
  --color-waikiki: #008da0;
  --color-waikiki-50: #def9ff;
  --color-waikiki-100: #baf3ff;
  --color-waikiki-200: #94e1f0;
  --color-waikiki-300: #6fcadc;
  --color-waikiki-400: #3eaabd;
  --color-waikiki-500: #008da0;
  --color-waikiki-600: #007281;
  --color-waikiki-700: #005a67;
  --color-waikiki-800: #004751;
  --color-waikiki-900: #003740;
  --color-waikiki-950: #002329;
  --color-tulip: #ff8c8c;
  --color-tulip-50: #ffe7e6;
  --color-tulip-100: #ffd6d4;
  --color-tulip-200: #ffb5b3;
  --color-tulip-300: #ff8c8c;
  --color-tulip-400: #de7071;
  --color-tulip-500: #c25658;
  --color-tulip-600: #a53e43;
  --color-tulip-700: #892c31;
  --color-tulip-800: #711e24;
  --color-tulip-900: #5d151b;
  --color-tulip-950: #3d090e;
  --color-bubblegum-baby-girl: #ca67f4;
  --color-bubblegum-baby-girl-50: #f9eeff;
  --color-bubblegum-baby-girl-100: #f4deff;
  --color-bubblegum-baby-girl-200: #eac0ff;
  --color-bubblegum-baby-girl-300: #df9aff;
  --color-bubblegum-baby-girl-400: #ca67f4;
  --color-bubblegum-baby-girl-500: #ae4bd7;
  --color-bubblegum-baby-girl-600: #922fb8;
  --color-bubblegum-baby-girl-700: #78189a;
  --color-bubblegum-baby-girl-800: #61067f;
  --color-bubblegum-baby-girl-900: #4d0066;
  --color-bubblegum-baby-girl-950: #330045;
  --color-bold-irish: #00814f;
  --color-bold-irish-50: #ddffea;
  --color-bold-irish-100: #c1fcd8;
  --color-bold-irish-200: #a3ebc0;
  --color-bold-irish-300: #83d6a7;
  --color-bold-irish-400: #58b885;
  --color-bold-irish-500: #339d69;
  --color-bold-irish-600: #00814f;
  --color-bold-irish-700: #00673e;
  --color-bold-irish-800: #00502f;
  --color-bold-irish-900: #003e23;
  --color-bold-irish-950: #002714;
}