Tool · Rainbow Palette

Rainbow Palette.

Generate a full rainbow scale — every named hue, every shade, from one master config. Export as CSS, SCSS, Tailwind, Bootstrap, or plain JSON.

8
10
Hue50100200300400500600700800900
8 hues · 10 shades = 80 colors
:root {
  --azure-50: #F2F5FB;
  --azure-100: #E5EAF8;
  --azure-200: #D7DEF4;
  --azure-300: #C7D1F0;
  --azure-400: #B6C4EC;
  --azure-500: #A2B5E8;
  --azure-600: #8BA4E3;
  --azure-700: #6D91DF;
  --azure-800: #3E79DB;
  --azure-900: #1358AE;

  --indigo-50: #F3F3FB;
  --indigo-100: #E7E6F8;
  --indigo-200: #DAD7F4;
  --indigo-300: #CCC8F0;
  --indigo-400: #BDB7EC;
  --indigo-500: #ACA3E8;
  --indigo-600: #988BE3;
  --indigo-700: #816DDF;
  --indigo-800: #623EDB;
  --indigo-900: #4213AE;

  --magenta-50: #FAF3FA;
  --magenta-100: #F7E6F6;
  --magenta-200: #F3D7F1;
  --magenta-300: #EFC8EC;
  --magenta-400: #EBB7E7;
  --magenta-500: #E7A3E1;
  --magenta-600: #E38BDC;
  --magenta-700: #DF6DD6;
  --magenta-800: #DB3ED0;
  --magenta-900: #AE13A5;

  --crimson-50: #FAF3F3;
  --crimson-100: #F7E6E7;
  --crimson-200: #F3D7D9;
  --crimson-300: #EFC8CB;
  --crimson-400: #EBB7BA;
  --crimson-500: #E7A3A8;
  --crimson-600: #E38B92;
  --crimson-700: #DF6D78;
  --crimson-800: #DB3E53;
  --crimson-900: #AE1331;

  --orange-50: #FAF6F3;
  --orange-100: #F7ECE6;
  --orange-200: #F3E1D7;
  --orange-300: #EFD6C8;
  --orange-400: #EBCAB7;
  --orange-500: #E7BDA3;
  --orange-600: #E3AE8B;
  --orange-700: #DF9E6D;
  --orange-800: #DB8C3E;
  --orange-900: #AE6913;

  --lime-green-50: #F6FBF3;
  --lime-green-100: #EEF8E6;
  --lime-green-200: #E5F4D7;
  --lime-green-300: #DCF0C8;
  --lime-green-400: #D2ECB7;
  --lime-green-500: #C8E8A3;
  --lime-green-600: #BDE38B;
  --lime-green-700: #B1DF6D;
  --lime-green-800: #A4DB3E;
  --lime-green-900: #7FAE13;

  --green-50: #F2FBF3;
  --green-100: #E5F8E6;
  --green-200: #D7F4D8;
  --green-300: #C7F0C8;
  --green-400: #B6ECB7;
  --green-500: #A2E8A4;
  --green-600: #8BE38D;
  --green-700: #6DDF70;
  --green-800: #3EDB43;
  --green-900: #13AE1C;

  --turquoise-50: #F2FBF8;
  --turquoise-100: #E5F8F2;
  --turquoise-200: #D7F4EA;
  --turquoise-300: #C7F0E3;
  --turquoise-400: #B6ECDB;
  --turquoise-500: #A2E8D3;
  --turquoise-600: #8BE3CA;
  --turquoise-700: #6DDFC1;
  --turquoise-800: #3EDBB8;
  --turquoise-900: #13AE90;
}