Spectrum colors variables for css

colors.css

:root {
  /* Persisted colors variables (not changed on dark mode) */
  --color-persist-white: #ffffff;
  --color-persist-gray-50: #fdfdfd;
  --color-persist-gray-100: #f8f8f8;
  --color-persist-gray-200: #e6e6e6;
  --color-persist-gray-300: #d5d5d5;
  --color-persist-gray-400: #b1b1b1;
  --color-persist-gray-500: #909090;
  --color-persist-gray-600: #6d6d6d;
  --color-persist-gray-700: #464646;
  --color-persist-gray-800: #222222;
  --color-persist-gray-900: #151515;
  --color-persist-black: #000000;

  --color-persist-blue-100: #e0f2ff;
  --color-persist-blue-200: #cae8ff;
  --color-persist-blue-300: #b5deff;
  --color-persist-blue-400: #96cefd;
  --color-persist-blue-500: #78bbfa;
  --color-persist-blue-600: #59a7f6;
  --color-persist-blue-700: #3892f3;
  --color-persist-blue-800: #147af3;
  --color-persist-blue-900: #0265dc;
  --color-persist-blue-1000: #0054b6;
  --color-persist-blue-1100: #004491;
  --color-persist-blue-1200: #003571;
  --color-persist-blue-1300: #002754;

  --color-persist-green-100: #cef8e0;
  --color-persist-green-200: #adf4ce;
  --color-persist-green-300: #89ecbc;
  --color-persist-green-400: #67dea8;
  --color-persist-green-500: #49cc93;
  --color-persist-green-600: #2fb880;
  --color-persist-green-700: #15a46e;
  --color-persist-green-800: #008f5d;
  --color-persist-green-900: #007a4d;
  --color-persist-green-1000: #00653e;
  --color-persist-green-1100: #005132;
  --color-persist-green-1200: #053f27;
  --color-persist-green-1300: #0a2e1d;

  --color-persist-orange-100: #ffeccc;
  --color-persist-orange-200: #ffdfad;
  --color-persist-orange-300: #fdd291;
  --color-persist-orange-400: #ffbb63;
  --color-persist-orange-500: #ffa037;
  --color-persist-orange-600: #f68511;
  --color-persist-orange-700: #e46f00;
  --color-persist-orange-800: #cb5d00;
  --color-persist-orange-900: #b14c00;
  --color-persist-orange-1000: #953d00;
  --color-persist-orange-1100: #7a2f00;
  --color-persist-orange-1200: #612300;
  --color-persist-orange-1300: #491901;

  --color-persist-red-100: #ffebe7;
  --color-persist-red-200: #ffddd6;
  --color-persist-red-300: #ffcdc3;
  --color-persist-red-400: #ffb7a9;
  --color-persist-red-500: #ff9b88;
  --color-persist-red-600: #ff7c65;
  --color-persist-red-700: #f75c46;
  --color-persist-red-800: #ea3829;
  --color-persist-red-900: #d31510;
  --color-persist-red-1000: #b40000;
  --color-persist-red-1100: #930000;
  --color-persist-red-1200: #740000;
  --color-persist-red-1300: #590000;

  --color-persist-celery-100: #cdfcbf;
  --color-persist-celery-200: #aef69d;
  --color-persist-celery-300: #96ee85;
  --color-persist-celery-400: #72e06a;
  --color-persist-celery-500: #4ecf50;
  --color-persist-celery-600: #27bb36;
  --color-persist-celery-700: #07a721;
  --color-persist-celery-800: #009112;
  --color-persist-celery-900: #007c0f;
  --color-persist-celery-1000: #00670f;
  --color-persist-celery-1100: #00530d;
  --color-persist-celery-1200: #00400a;
  --color-persist-celery-1300: #003007;

  --color-persist-chartreuse-100: #dbfc6e;
  --color-persist-chartreuse-200: #cbf443;
  --color-persist-chartreuse-300: #bce92a;
  --color-persist-chartreuse-400: #aad816;
  --color-persist-chartreuse-500: #98c50a;
  --color-persist-chartreuse-600: #87b103;
  --color-persist-chartreuse-700: #769c00;
  --color-persist-chartreuse-800: #678800;
  --color-persist-chartreuse-900: #577400;
  --color-persist-chartreuse-1000: #486000;
  --color-persist-chartreuse-1100: #3a4d00;
  --color-persist-chartreuse-1200: #2c3b00;
  --color-persist-chartreuse-1300: #212c00;

  --color-persist-cyan-100: #c5f8ff;
  --color-persist-cyan-200: #a4f0ff;
  --color-persist-cyan-300: #88e7fa;
  --color-persist-cyan-400: #60d8f3;
  --color-persist-cyan-500: #33c5e8;
  --color-persist-cyan-600: #12b0da;
  --color-persist-cyan-700: #019cc8;
  --color-persist-cyan-800: #0086b4;
  --color-persist-cyan-900: #00719f;
  --color-persist-cyan-1000: #005d89;
  --color-persist-cyan-1100: #004a73;
  --color-persist-cyan-1200: #00395d;
  --color-persist-cyan-1300: #002a46;

  --color-persist-fuchsia-100: #ffe9fc;
  --color-persist-fuchsia-200: #ffdafa;
  --color-persist-fuchsia-300: #fec7f8;
  --color-persist-fuchsia-400: #fbaef6;
  --color-persist-fuchsia-500: #f592f3;
  --color-persist-fuchsia-600: #ed74ed;
  --color-persist-fuchsia-700: #e055e2;
  --color-persist-fuchsia-800: #cd3ace;
  --color-persist-fuchsia-900: #b622b7;
  --color-persist-fuchsia-1000: #9d039e;
  --color-persist-fuchsia-1100: #800081;
  --color-persist-fuchsia-1200: #640664;
  --color-persist-fuchsia-1300: #470e46;

  --color-persist-indigo-100: #edeeff;
  --color-persist-indigo-200: #e0e2ff;
  --color-persist-indigo-300: #d3d5ff;
  --color-persist-indigo-400: #c1c4ff;
  --color-persist-indigo-500: #acafff;
  --color-persist-indigo-600: #9599ff;
  --color-persist-indigo-700: #7e84fc;
  --color-persist-indigo-800: #686df4;
  --color-persist-indigo-900: #5258e4;
  --color-persist-indigo-1000: #4046ca;
  --color-persist-indigo-1100: #3236a8;
  --color-persist-indigo-1200: #262986;
  --color-persist-indigo-1300: #1b1e64;

  --color-persist-magenta-100: #ffeaf1;
  --color-persist-magenta-200: #ffdce8;
  --color-persist-magenta-300: #ffcadd;
  --color-persist-magenta-400: #ffb2ce;
  --color-persist-magenta-500: #ff95bd;
  --color-persist-magenta-600: #fa77aa;
  --color-persist-magenta-700: #ef5a98;
  --color-persist-magenta-800: #de3d82;
  --color-persist-magenta-900: #c82269;
  --color-persist-magenta-1000: #ad0955;
  --color-persist-magenta-1100: #8e0045;
  --color-persist-magenta-1200: #700037;
  --color-persist-magenta-1300: #54032a;

  --color-persist-purple-100: #f6ebff;
  --color-persist-purple-200: #eeddff;
  --color-persist-purple-300: #e6d0ff;
  --color-persist-purple-400: #dbbbfe;
  --color-persist-purple-500: #cca4fd;
  --color-persist-purple-600: #bd8bfc;
  --color-persist-purple-700: #ae72f9;
  --color-persist-purple-800: #9d57f4;
  --color-persist-purple-900: #893de7;
  --color-persist-purple-1000: #7326d3;
  --color-persist-purple-1100: #5d13b7;
  --color-persist-purple-1200: #470c94;
  --color-persist-purple-1300: #33106a;

  --color-persist-seafoam-100: #cef7f3;
  --color-persist-seafoam-200: #aaf1ea;
  --color-persist-seafoam-300: #8ce9e2;
  --color-persist-seafoam-400: #65dad2;
  --color-persist-seafoam-500: #3fc9c1;
  --color-persist-seafoam-600: #0fb5ae;
  --color-persist-seafoam-700: #00a19a;
  --color-persist-seafoam-800: #008c87;
  --color-persist-seafoam-900: #007772;
  --color-persist-seafoam-1000: #00635f;
  --color-persist-seafoam-1100: #0c4f4c;
  --color-persist-seafoam-1200: #123c3a;
  --color-persist-seafoam-1300: #122c2b;

  --color-persist-yellow-100: #fbf198;
  --color-persist-yellow-200: #f8e750;
  --color-persist-yellow-300: #f8d904;
  --color-persist-yellow-400: #e8c600;
  --color-persist-yellow-500: #d7b300;
  --color-persist-yellow-600: #c49f00;
  --color-persist-yellow-700: #b08c00;
  --color-persist-yellow-800: #9b7800;
  --color-persist-yellow-900: #856600;
  --color-persist-yellow-1000: #705300;
  --color-persist-yellow-1100: #5b4300;
  --color-persist-yellow-1200: #483300;
  --color-persist-yellow-1300: #362500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #000000;

    --color-gray-50: #151515;
    --color-gray-100: #222222;
    --color-gray-200: #464646;
    --color-gray-300: #6d6d6d;
    --color-gray-400: #909090;
    --color-gray-500: #b1b1b1;
    --color-gray-600: #d5d5d5;
    --color-gray-700: #e6e6e6;
    --color-gray-800: #f8f8f8;
    --color-gray-900: #fdfdfd;

    --color-black: #ffffff;

    --color-blue-100: #003877;
    --color-blue-200: #00418a;
    --color-blue-300: #004da3;
    --color-blue-400: #0059c2;
    --color-blue-500: #0367e0;
    --color-blue-600: #1379f3;
    --color-blue-700: #348ff4;
    --color-blue-800: #54a3f6;
    --color-blue-900: #72b7f9;
    --color-blue-1000: #8fcafc;
    --color-blue-1100: #aedbfe;
    --color-blue-1200: #cce9ff;
    --color-blue-1300: #e8f6ff;

    --color-green-100: #044329;
    --color-green-200: #004e2f;
    --color-green-300: #005c38;
    --color-green-400: #006c43;
    --color-green-500: #007d4e;
    --color-green-600: #008f5d;
    --color-green-700: #12a26c;
    --color-green-800: #2bb47d;
    --color-green-900: #43c78f;
    --color-green-1000: #5ed9a2;
    --color-green-1100: #81e9b8;
    --color-green-1200: #b1f4d1;
    --color-green-1300: #dffaea;

    --color-orange-100: #662500;
    --color-orange-200: #752d00;
    --color-orange-300: #893700;
    --color-orange-400: #9e4200;
    --color-orange-500: #b44e00;
    --color-orange-600: #ca5d00;
    --color-orange-700: #e16d00;
    --color-orange-800: #f4810c;
    --color-orange-900: #fe9a2e;
    --color-orange-1000: #ffb558;
    --color-orange-1100: #fdce88;
    --color-orange-1200: #ffe1b3;
    --color-orange-1300: #fff2dd;

    --color-red-100: #7b0000;
    --color-red-200: #8d0000;
    --color-red-300: #a50000;
    --color-red-400: #be0403;
    --color-red-500: #d71913;
    --color-red-600: #ea3829;
    --color-red-700: #f65843;
    --color-red-800: #ff755e;
    --color-red-900: #ff9581;
    --color-red-1000: #ffb0a1;
    --color-red-1100: #ffc9bd;
    --color-red-1200: #ffded8;
    --color-red-1300: #fff1ee;

    --color-celery-100: #00450a;
    --color-celery-200: #00500c;
    --color-celery-300: #005e0e;
    --color-celery-400: #006d0f;
    --color-celery-500: #007f0f;
    --color-celery-600: #009112;
    --color-celery-700: #04a51e;
    --color-celery-800: #22b833;
    --color-celery-900: #44ca49;
    --color-celery-1000: #69dc63;
    --color-celery-1100: #8eeb7f;
    --color-celery-1200: #b4f7a2;
    --color-celery-1300: #ddfdd3;

    --color-chartreuse-100: #304000;
    --color-chartreuse-200: #374a00;
    --color-chartreuse-300: #415700;
    --color-chartreuse-400: #4c6600;
    --color-chartreuse-500: #597600;
    --color-chartreuse-600: #668800;
    --color-chartreuse-700: #759a00;
    --color-chartreuse-800: #84ad01;
    --color-chartreuse-900: #94c008;
    --color-chartreuse-1000: #a6d312;
    --color-chartreuse-1100: #b8e525;
    --color-chartreuse-1200: #cdf547;
    --color-chartreuse-1300: #e7fe9a;

    --color-cyan-100: #003d62;
    --color-cyan-200: #00476f;
    --color-cyan-300: #00557f;
    --color-cyan-400: #006491;
    --color-cyan-500: #0074a2;
    --color-cyan-600: #0086b4;
    --color-cyan-700: #0099c6;
    --color-cyan-800: #0eadd7;
    --color-cyan-900: #2cc1e6;
    --color-cyan-1000: #54d3f1;
    --color-cyan-1100: #7fe4f9;
    --color-cyan-1200: #a7f1ff;
    --color-cyan-1300: #d7faff;

    --color-fuchsia-100: #6b036a;
    --color-fuchsia-200: #7b007b;
    --color-fuchsia-300: #900091;
    --color-fuchsia-400: #a50da6;
    --color-fuchsia-500: #b925b9;
    --color-fuchsia-600: #cd39ce;
    --color-fuchsia-700: #df51e0;
    --color-fuchsia-800: #eb6eec;
    --color-fuchsia-900: #f48cf2;
    --color-fuchsia-1000: #faa8f5;
    --color-fuchsia-1100: #fec2f8;
    --color-fuchsia-1200: #ffdbfa;
    --color-fuchsia-1300: #ffeffc;

    --color-indigo-100: #282c8c;
    --color-indigo-200: #2f34a3;
    --color-indigo-300: #393fbb;
    --color-indigo-400: #464bd3;
    --color-indigo-500: #555be7;
    --color-indigo-600: #686df4;
    --color-indigo-700: #7c81fb;
    --color-indigo-800: #9195ff;
    --color-indigo-900: #a7aaff;
    --color-indigo-1000: #bcbeff;
    --color-indigo-1100: #d0d2ff;
    --color-indigo-1200: #e2e4ff;
    --color-indigo-1300: #f3f3fe;

    --color-magenta-100: #76003a;
    --color-magenta-200: #890042;
    --color-magenta-300: #a0004d;
    --color-magenta-400: #b6125a;
    --color-magenta-500: #cb266d;
    --color-magenta-600: #de3d82;
    --color-magenta-700: #ed5795;
    --color-magenta-800: #f972a7;
    --color-magenta-900: #ff8fb9;
    --color-magenta-1000: #ffacca;
    --color-magenta-1100: #ffc6da;
    --color-magenta-1200: #ffdde9;
    --color-magenta-1300: #fff0f5;

    --color-purple-100: #4c0d9d;
    --color-purple-200: #5911b1;
    --color-purple-300: #691cc8;
    --color-purple-400: #7a2dda;
    --color-purple-500: #8c41e9;
    --color-purple-600: #9d57f3;
    --color-purple-700: #ac6ff9;
    --color-purple-800: #bb87fb;
    --color-purple-900: #ca9ffc;
    --color-purple-1000: #d7b6fe;
    --color-purple-1100: #e4ccfe;
    --color-purple-1200: #efdfff;
    --color-purple-1300: #f9f0ff;

    --color-seafoam-100: #12413f;
    --color-seafoam-200: #0e4c49;
    --color-seafoam-300: #045a57;
    --color-seafoam-400: #006965;
    --color-seafoam-500: #007a75;
    --color-seafoam-600: #008c87;
    --color-seafoam-700: #009e98;
    --color-seafoam-800: #03b2ab;
    --color-seafoam-900: #36c5bd;
    --color-seafoam-1000: #5dd6cf;
    --color-seafoam-1100: #84e6df;
    --color-seafoam-1200: #b0f2ec;
    --color-seafoam-1300: #dff9f6;

    --color-yellow-100: #4c3600;
    --color-yellow-200: #584000;
    --color-yellow-300: #674c00;
    --color-yellow-400: #775900;
    --color-yellow-500: #886800;
    --color-yellow-600: #9b7800;
    --color-yellow-700: #ae8900;
    --color-yellow-800: #c09c00;
    --color-yellow-900: #d3ae00;
    --color-yellow-1000: #e4c200;
    --color-yellow-1100: #f4d500;
    --color-yellow-1200: #f9e85c;
    --color-yellow-1300: #fcf6bb;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;

    --color-gray-50: #fdfdfd;
    --color-gray-100: #f8f8f8;
    --color-gray-200: #e6e6e6;
    --color-gray-300: #d5d5d5;
    --color-gray-400: #b1b1b1;
    --color-gray-500: #909090;
    --color-gray-600: #6d6d6d;
    --color-gray-700: #464646;
    --color-gray-800: #222222;
    --color-gray-900: #151515;

    --color-black: #000000;

    --color-blue-100: #e0f2ff;
    --color-blue-200: #cae8ff;
    --color-blue-300: #b5deff;
    --color-blue-400: #96cefd;
    --color-blue-500: #78bbfa;
    --color-blue-600: #59a7f6;
    --color-blue-700: #3892f3;
    --color-blue-800: #147af3;
    --color-blue-900: #0265dc;
    --color-blue-1000: #0054b6;
    --color-blue-1100: #004491;
    --color-blue-1200: #003571;
    --color-blue-1300: #002754;

    --color-green-100: #cef8e0;
    --color-green-200: #adf4ce;
    --color-green-300: #89ecbc;
    --color-green-400: #67dea8;
    --color-green-500: #49cc93;
    --color-green-600: #2fb880;
    --color-green-700: #15a46e;
    --color-green-800: #008f5d;
    --color-green-900: #007a4d;
    --color-green-1000: #00653e;
    --color-green-1100: #005132;
    --color-green-1200: #053f27;
    --color-green-1300: #0a2e1d;

    --color-orange-100: #ffeccc;
    --color-orange-200: #ffdfad;
    --color-orange-300: #fdd291;
    --color-orange-400: #ffbb63;
    --color-orange-500: #ffa037;
    --color-orange-600: #f68511;
    --color-orange-700: #e46f00;
    --color-orange-800: #cb5d00;
    --color-orange-900: #b14c00;
    --color-orange-1000: #953d00;
    --color-orange-1100: #7a2f00;
    --color-orange-1200: #612300;
    --color-orange-1300: #491901;

    --color-red-100: #ffebe7;
    --color-red-200: #ffddd6;
    --color-red-300: #ffcdc3;
    --color-red-400: #ffb7a9;
    --color-red-500: #ff9b88;
    --color-red-600: #ff7c65;
    --color-red-700: #f75c46;
    --color-red-800: #ea3829;
    --color-red-900: #d31510;
    --color-red-1000: #b40000;
    --color-red-1100: #930000;
    --color-red-1200: #740000;
    --color-red-1300: #590000;

    --color-celery-100: #cdfcbf;
    --color-celery-200: #aef69d;
    --color-celery-300: #96ee85;
    --color-celery-400: #72e06a;
    --color-celery-500: #4ecf50;
    --color-celery-600: #27bb36;
    --color-celery-700: #07a721;
    --color-celery-800: #009112;
    --color-celery-900: #007c0f;
    --color-celery-1000: #00670f;
    --color-celery-1100: #00530d;
    --color-celery-1200: #00400a;
    --color-celery-1300: #003007;

    --color-chartreuse-100: #dbfc6e;
    --color-chartreuse-200: #cbf443;
    --color-chartreuse-300: #bce92a;
    --color-chartreuse-400: #aad816;
    --color-chartreuse-500: #98c50a;
    --color-chartreuse-600: #87b103;
    --color-chartreuse-700: #769c00;
    --color-chartreuse-800: #678800;
    --color-chartreuse-900: #577400;
    --color-chartreuse-1000: #486000;
    --color-chartreuse-1100: #3a4d00;
    --color-chartreuse-1200: #2c3b00;
    --color-chartreuse-1300: #212c00;

    --color-cyan-100: #c5f8ff;
    --color-cyan-200: #a4f0ff;
    --color-cyan-300: #88e7fa;
    --color-cyan-400: #60d8f3;
    --color-cyan-500: #33c5e8;
    --color-cyan-600: #12b0da;
    --color-cyan-700: #019cc8;
    --color-cyan-800: #0086b4;
    --color-cyan-900: #00719f;
    --color-cyan-1000: #005d89;
    --color-cyan-1100: #004a73;
    --color-cyan-1200: #00395d;
    --color-cyan-1300: #002a46;

    --color-fuchsia-100: #ffe9fc;
    --color-fuchsia-200: #ffdafa;
    --color-fuchsia-300: #fec7f8;
    --color-fuchsia-400: #fbaef6;
    --color-fuchsia-500: #f592f3;
    --color-fuchsia-600: #ed74ed;
    --color-fuchsia-700: #e055e2;
    --color-fuchsia-800: #cd3ace;
    --color-fuchsia-900: #b622b7;
    --color-fuchsia-1000: #9d039e;
    --color-fuchsia-1100: #800081;
    --color-fuchsia-1200: #640664;
    --color-fuchsia-1300: #470e46;

    --color-indigo-100: #edeeff;
    --color-indigo-200: #e0e2ff;
    --color-indigo-300: #d3d5ff;
    --color-indigo-400: #c1c4ff;
    --color-indigo-500: #acafff;
    --color-indigo-600: #9599ff;
    --color-indigo-700: #7e84fc;
    --color-indigo-800: #686df4;
    --color-indigo-900: #5258e4;
    --color-indigo-1000: #4046ca;
    --color-indigo-1100: #3236a8;
    --color-indigo-1200: #262986;
    --color-indigo-1300: #1b1e64;

    --color-magenta-100: #ffeaf1;
    --color-magenta-200: #ffdce8;
    --color-magenta-300: #ffcadd;
    --color-magenta-400: #ffb2ce;
    --color-magenta-500: #ff95bd;
    --color-magenta-600: #fa77aa;
    --color-magenta-700: #ef5a98;
    --color-magenta-800: #de3d82;
    --color-magenta-900: #c82269;
    --color-magenta-1000: #ad0955;
    --color-magenta-1100: #8e0045;
    --color-magenta-1200: #700037;
    --color-magenta-1300: #54032a;

    --color-purple-100: #f6ebff;
    --color-purple-200: #eeddff;
    --color-purple-300: #e6d0ff;
    --color-purple-400: #dbbbfe;
    --color-purple-500: #cca4fd;
    --color-purple-600: #bd8bfc;
    --color-purple-700: #ae72f9;
    --color-purple-800: #9d57f4;
    --color-purple-900: #893de7;
    --color-purple-1000: #7326d3;
    --color-purple-1100: #5d13b7;
    --color-purple-1200: #470c94;
    --color-purple-1300: #33106a;

    --color-seafoam-100: #cef7f3;
    --color-seafoam-200: #aaf1ea;
    --color-seafoam-300: #8ce9e2;
    --color-seafoam-400: #65dad2;
    --color-seafoam-500: #3fc9c1;
    --color-seafoam-600: #0fb5ae;
    --color-seafoam-700: #00a19a;
    --color-seafoam-800: #008c87;
    --color-seafoam-900: #007772;
    --color-seafoam-1000: #00635f;
    --color-seafoam-1100: #0c4f4c;
    --color-seafoam-1200: #123c3a;
    --color-seafoam-1300: #122c2b;

    --color-yellow-100: #fbf198;
    --color-yellow-200: #f8e750;
    --color-yellow-300: #f8d904;
    --color-yellow-400: #e8c600;
    --color-yellow-500: #d7b300;
    --color-yellow-600: #c49f00;
    --color-yellow-700: #b08c00;
    --color-yellow-800: #9b7800;
    --color-yellow-900: #856600;
    --color-yellow-1000: #705300;
    --color-yellow-1100: #5b4300;
    --color-yellow-1200: #483300;
    --color-yellow-1300: #362500;
  }
}