Tool · Rainbow Palette
Rainbow color 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
| Hue | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|---|
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;
}