Blue Ribbon to Atomic Tangerine Color Palette

About this palette

Blue Ribbon to Atomic Tangerine is a 5-color vibrant, cool, neon palette: #0061FA (Blue Ribbon), #8D8300 (Olive), #00A5A8 (Silken Jade), #6FB5FF (Cooler Than Ever), #FF9E64 (Atomic Tangerine). It mixes blue, yellow, turquoise, orange tones and feels cool overall. The strongest text pairing is #0061FA on #FF9E64 with a contrast ratio of 2.52:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Ribbon	rgb(0, 97, 250)	hsl(217, 100%, 49%)
Olive	rgb(141, 131, 0)	hsl(56, 100%, 28%)
Silken Jade	rgb(0, 165, 168)	hsl(181, 100%, 33%)
Cooler Than Ever	rgb(111, 181, 255)	hsl(211, 100%, 72%)
Atomic Tangerine	rgb(255, 158, 100)	hsl(22, 100%, 70%)

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

/* Blue Ribbon to Atomic Tangerine — https://swatchly.xyz/palette/0061fa-8d8300-00a5a8-6fb5ff-ff9e64 */
:root {
  --blue-ribbon: #0061fa;
  --olive: #8d8300;
  --silken-jade: #00a5a8;
  --cooler-than-ever: #6fb5ff;
  --atomic-tangerine: #ff9e64;
}

Tailwind CSS v4

/* Blue Ribbon to Atomic Tangerine — https://swatchly.xyz/palette/0061fa-8d8300-00a5a8-6fb5ff-ff9e64 */
@theme {
  --color-blue-ribbon: #0061fa;
  --color-blue-ribbon-50: #f0f5ff;
  --color-blue-ribbon-100: #e2edff;
  --color-blue-ribbon-200: #c6dbff;
  --color-blue-ribbon-300: #a3c5ff;
  --color-blue-ribbon-400: #71a4ff;
  --color-blue-ribbon-500: #4185ff;
  --color-blue-ribbon-600: #0061fa;
  --color-blue-ribbon-700: #004cc9;
  --color-blue-ribbon-800: #003ba0;
  --color-blue-ribbon-900: #002c7e;
  --color-blue-ribbon-950: #001b53;
  --color-olive: #8d8300;
  --color-olive-50: #fbf7c0;
  --color-olive-100: #f1ecae;
  --color-olive-200: #ded88d;
  --color-olive-300: #c8c068;
  --color-olive-400: #a9a038;
  --color-olive-500: #8d8300;
  --color-olive-600: #726900;
  --color-olive-700: #5a5300;
  --color-olive-800: #474100;
  --color-olive-900: #373200;
  --color-olive-950: #221f00;
  --color-silken-jade: #00a5a8;
  --color-silken-jade-50: #deffff;
  --color-silken-jade-100: #bbfdfe;
  --color-silken-jade-200: #9deeef;
  --color-silken-jade-300: #7bdbdd;
  --color-silken-jade-400: #48bfc1;
  --color-silken-jade-500: #00a5a8;
  --color-silken-jade-600: #008587;
  --color-silken-jade-700: #00696b;
  --color-silken-jade-800: #005254;
  --color-silken-jade-900: #003e40;
  --color-silken-jade-950: #002728;
  --color-cooler-than-ever: #6fb5ff;
  --color-cooler-than-ever-50: #f7fbff;
  --color-cooler-than-ever-100: #ebf4ff;
  --color-cooler-than-ever-200: #cde5ff;
  --color-cooler-than-ever-300: #a9d2ff;
  --color-cooler-than-ever-400: #6fb5ff;
  --color-cooler-than-ever-500: #5296dd;
  --color-cooler-than-ever-600: #3278bd;
  --color-cooler-than-ever-700: #1a5e9d;
  --color-cooler-than-ever-800: #06487f;
  --color-cooler-than-ever-900: #003664;
  --color-cooler-than-ever-950: #00203f;
  --color-atomic-tangerine: #ff9e64;
  --color-atomic-tangerine-50: #ffede4;
  --color-atomic-tangerine-100: #ffdfcd;
  --color-atomic-tangerine-200: #ffc2a0;
  --color-atomic-tangerine-300: #ff9e64;
  --color-atomic-tangerine-400: #dc8149;
  --color-atomic-tangerine-500: #c16528;
  --color-atomic-tangerine-600: #a34c04;
  --color-atomic-tangerine-700: #843c00;
  --color-atomic-tangerine-800: #692e00;
  --color-atomic-tangerine-900: #532300;
  --color-atomic-tangerine-950: #361400;
}