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

adobe / leonardo

Generate colors based on a desired contrast ratio

http://www.leonardocolor.io

Apache License 2.0

1.94k stars 104 forks source link

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

Open jesselcampbell opened 1 year ago

jesselcampbell commented 1 year ago

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

Go to http://leonardocolor.io
Click on Adaptive color theme
Click on the Share button at the top right
Click Copy theme URL
Open a new tab and paste the URL into the address bar
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 commented 1 year ago

GarthDB commented 11 months ago

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 commented 11 months ago

@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 commented 11 months ago

@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 commented 5 months ago

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 commented 4 months ago

@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: