Hotspot to Bleu Ciel Color Palette

About this palette

Hotspot to Bleu Ciel is a 5-color vibrant, warm palette: #FF4F3E (Hotspot), #FF70C5 (Nervous Neon Pink), #00E887 (Shivering Green), #D56100 (Cinnamon), #007A9D (Bleu Ciel). It mixes red, pink, green, orange, blue tones and feels warm overall. The strongest text pairing is #00E887 on #007A9D with a contrast ratio of 3.02:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hotspot	rgb(255, 79, 62)	hsl(5, 100%, 62%)
Nervous Neon Pink	rgb(255, 112, 197)	hsl(324, 100%, 72%)
Shivering Green	rgb(0, 232, 135)	hsl(155, 100%, 45%)
Cinnamon	rgb(213, 97, 0)	hsl(27, 100%, 42%)
Bleu Ciel	rgb(0, 122, 157)	hsl(193, 100%, 31%)

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.

Aa3.02:1 Poor#00E887 on #007A9D
Aa3.02:1 Poor#007A9D on #00E887

Color blindness preview

CSS variables

/* Hotspot to Bleu Ciel — https://swatchly.xyz/palette/ff4f3e-ff70c5-00e887-d56100-007a9d */
:root {
  --hotspot: #ff4f3e;
  --nervous-neon-pink: #ff70c5;
  --shivering-green: #00e887;
  --cinnamon: #d56100;
  --bleu-ciel: #007a9d;
}

Tailwind CSS v4

/* Hotspot to Bleu Ciel — https://swatchly.xyz/palette/ff4f3e-ff70c5-00e887-d56100-007a9d */
@theme {
  --color-hotspot: #ff4f3e;
  --color-hotspot-50: #ffece9;
  --color-hotspot-100: #ffdcd6;
  --color-hotspot-200: #ffbdb2;
  --color-hotspot-300: #ff9686;
  --color-hotspot-400: #ff4f3e;
  --color-hotspot-500: #e02e21;
  --color-hotspot-600: #bf0200;
  --color-hotspot-700: #9a0100;
  --color-hotspot-800: #7c0000;
  --color-hotspot-900: #630000;
  --color-hotspot-950: #430000;
  --color-nervous-neon-pink: #ff70c5;
  --color-nervous-neon-pink-50: #fff6fa;
  --color-nervous-neon-pink-100: #ffeaf4;
  --color-nervous-neon-pink-200: #ffcee7;
  --color-nervous-neon-pink-300: #ffacd9;
  --color-nervous-neon-pink-400: #ff70c5;
  --color-nervous-neon-pink-500: #dd51a7;
  --color-nervous-neon-pink-600: #bb3089;
  --color-nervous-neon-pink-700: #9b146f;
  --color-nervous-neon-pink-800: #7d0057;
  --color-nervous-neon-pink-900: #600042;
  --color-nervous-neon-pink-950: #3d0029;
  --color-shivering-green: #00e887;
  --color-shivering-green-50: #e2ffeb;
  --color-shivering-green-100: #beffd4;
  --color-shivering-green-200: #81f6af;
  --color-shivering-green-300: #00e887;
  --color-shivering-green-400: #00c370;
  --color-shivering-green-500: #00a25c;
  --color-shivering-green-600: #008249;
  --color-shivering-green-700: #006739;
  --color-shivering-green-800: #00512b;
  --color-shivering-green-900: #003e20;
  --color-shivering-green-950: #002712;
  --color-cinnamon: #d56100;
  --color-cinnamon-50: #fff3ec;
  --color-cinnamon-100: #ffe6d9;
  --color-cinnamon-200: #ffccb1;
  --color-cinnamon-300: #ffab7e;
  --color-cinnamon-400: #f1803b;
  --color-cinnamon-500: #d56100;
  --color-cinnamon-600: #ad4d00;
  --color-cinnamon-700: #8a3c00;
  --color-cinnamon-800: #6d2e00;
  --color-cinnamon-900: #552200;
  --color-cinnamon-950: #371300;
  --color-bleu-ciel: #007a9d;
  --color-bleu-ciel-50: #e9f8ff;
  --color-bleu-ciel-100: #d3f1ff;
  --color-bleu-ciel-200: #a3e3ff;
  --color-bleu-ciel-300: #82cfef;
  --color-bleu-ciel-400: #57b0d3;
  --color-bleu-ciel-500: #3295b9;
  --color-bleu-ciel-600: #007a9d;
  --color-bleu-ciel-700: #00617d;
  --color-bleu-ciel-800: #004c63;
  --color-bleu-ciel-900: #003a4d;
  --color-bleu-ciel-950: #002431;
}