Adaptive color theme "Copy theme URL" function results in a broken link

[jesselcampbell]

Description

When using the Adaptive color theme tool, by opening the Share dropdown and clicking Copy theme URL, a URL is copied to the clipboard. That URL contains all of the necessary information to load the color theme into the Leonardo Web Tool in a new tab or browser. However, the result of pasting that URL into a new tab is an indefinite loading screen.

Steps to reproduce

1. Go to http://leonardocolor.io
2. Click on Adaptive color theme
3. Click on the Share button at the top right
4. Click Copy theme URL
5. Open a new tab and paste the URL into the address bar
6. Observe an indefinite loading screen

Expected behavior

When I paste the copied URL into a new tab or browser window, I expect the resulting web page to be the same as the adaptive color theme I copied from.

Screenshots

Environment

• Chrome version 111.0.5563.146 on MacOS Ventura 13.2.1
• Safari version 16.3 (18614.4.6.1.6) on MacOS Ventura 13.2.1

Additional context

This isn't happening on every color set, but it has happened to me a handful of times. I have a feeling that some of the URL variables are causing this. Whether it's how they're getting translated into the URL, or read back into the app after pasting the URL.

Here is one that fails for reference:
https://leonardocolor.io/theme.html?name=Untitled&config=%7B%22baseScale%22%3A%22Sky%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Sky%22%2C%22colorKeys%22%3A%5B%22%23bbd2ec%22%2C%22%23837afa%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%221.025%22%2C%221.125%22%2C%221.25%22%2C%221.75%22%2C%222.5%22%2C%223.25%22%2C%224.5%22%2C%227%22%2C%229.25%22%2C%2213%22%2C%2218%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D

[damiankorcz]

I've also encountered this issue.
Here is a link that doesn't load for me:
https://leonardocolor.io/theme.html?name=Prism+-+Periwinkle&config=%7B%22baseScale%22%3A%22blue%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22grey%22%2C%22colorKeys%22%3A%5B%22%23333333%22%5D%2C%22colorspace%22%3A%22HSLuv%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22red%22%2C%22colorKeys%22%3A%5B%22%23df2020%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22orange%22%2C%22colorKeys%22%3A%5B%22%23ec8713%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22yellow%22%2C%22colorKeys%22%3A%5B%22%23f0c742%22%2C%22%23805100%22%5D%2C%22colorspace%22%3A%22HSLuv%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22green%22%2C%22colorKeys%22%3A%5B%22%2371c639%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22mint%22%2C%22colorKeys%22%3A%5B%22%233cdda7%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22cyan%22%2C%22colorKeys%22%3A%5B%22%233cd2dd%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22blue%22%2C%22colorKeys%22%3A%5B%22%232059df%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22purple%22%2C%22colorKeys%22%3A%5B%22%237513ec%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22pink%22%2C%22colorKeys%22%3A%5B%22%23d926a0%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%229%22%2C%2235%22%2C%2270%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A96%2C%22contrast%22%3A0.95%2C%22saturation%22%3A95%2C%22formula%22%3A%22wcag3%22%7D

[GarthDB]

Looking at the console, it looks like there's something wrong with at least one of the hex colors in the URL.

To make debugging easier, I converted the URL strings to a data object.

@jesselcampbell here is yours:

config = {
  baseScale: "Sky",
  colorScales: [
    {
      name: "Sky",
      colorKeys: ["#bbd2ec", "#837afa"],
      colorspace: "OKLCH",
      ratios: [
        "1.025",
        "1.125",
        "1.25",
        "1.75",
        "2.5",
        "3.25",
        "4.5",
        "7",
        "9.25",
        "13",
        "18",
      ],
      smooth: false,
    },
  ],
  lightness: 100,
  contrast: 1,
  saturation: 100,
  formula: "wcag2",
};

@damiankorcz here is yours:

let config = {
  baseScale: "blue",
  colorScales: [
    {
      name: "grey",
      colorKeys: ["#333333"],
      colorspace: "HSLuv",
      ratios: ["9", "35", "70"],
      smooth: true,
    },
    {
      name: "red",
      colorKeys: ["#df2020"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "orange",
      colorKeys: ["#ec8713"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "yellow",
      colorKeys: ["#f0c742", "#805100"],
      colorspace: "HSLuv",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "green",
      colorKeys: ["#71c639"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "mint",
      colorKeys: ["#3cdda7"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "cyan",
      colorKeys: ["#3cd2dd"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "blue",
      colorKeys: ["#2059df"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "purple",
      colorKeys: ["#7513ec"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "pink",
      colorKeys: ["#d926a0"],
      colorspace: "OKLCH",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
  ],
  lightness: 96,
  contrast: 0.95,
  saturation: 95,
  formula: "wcag3",
};

[GarthDB]

@jesselcampbell I think it's the OKLCH colorspace that's causing the issue. If I change your URL data to RGB, it loads:

This URL uses this data:

config = {
  baseScale: "Sky",
  colorScales: [
    {
      name: "Sky",
      colorKeys: ["#bbd2ec", "#837afa"],
      colorspace: "RGB",
      ratios: [
        "1.025",
        "1.125",
        "1.25",
        "1.75",
        "2.5",
        "3.25",
        "4.5",
        "7",
        "9.25",
        "13",
        "18",
      ],
      smooth: false,
    },
  ],
  lightness: 100,
  contrast: 1,
  saturation: 100,
  formula: "wcag2",
};

[GarthDB]

@damiankorcz same issue with your url - leonardo is converting the color to an RGB colorspace in the config (as a hex color), but it isn't changing the colorspace to RGB, so it's failing to trying to load an RGB color in a different color space. If I convert your data to use the RGB colorspace, it loads.

Here's that updated URL using this data:

config = {
  baseScale: "blue",
  colorScales: [
    {
      name: "grey",
      colorKeys: ["#333333"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: true,
    },
    {
      name: "red",
      colorKeys: ["#df2020"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "orange",
      colorKeys: ["#ec8713"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "yellow",
      colorKeys: ["#f0c742", "#805100"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "green",
      colorKeys: ["#71c639"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "mint",
      colorKeys: ["#3cdda7"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "cyan",
      colorKeys: ["#3cd2dd"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "blue",
      colorKeys: ["#2059df"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "purple",
      colorKeys: ["#7513ec"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
    {
      name: "pink",
      colorKeys: ["#d926a0"],
      colorspace: "RGB",
      ratios: ["9", "35", "70"],
      smooth: false,
    },
  ],
  lightness: 96,
  contrast: 0.95,
  saturation: 95,
  formula: "wcag3",
};

[dmthrill]

Hello. I have a similar problem, this is a link to my Leonardo theme

https://leonardocolor.io/theme.html?name=Untitled&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%231e1e3c%22%5D%2C%22colorspace%22%3A%22HSV%22%2C%22ratios%22%3A%5B%221.13%22%2C%221.31%22%2C%221.5%22%2C%222.31%22%2C%223.59%22%2C%228.15%22%2C%229.7%22%2C%2216.08%22%5D%2C%22smooth%22%3Atrue%7D%2C%7B%22name%22%3A%22Primary%22%2C%22colorKeys%22%3A%5B%22%234a44fd%22%5D%2C%22colorspace%22%3A%22OKLCH%22%2C%22ratios%22%3A%5B%221.13%22%2C%221.31%22%2C%221.5%22%2C%222.31%22%2C%223.59%22%2C%228.15%22%2C%229.7%22%2C%2216.08%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D

[GarthDB]

@dmthrill, that might have been related to a separate issue, #242 which I fixed this morning. Could you recheck it? Trying your URL now, I'm seeing this: