Adaptive color theme "Copy theme URL" function results in a broken link #211
Comments
jesselcampbell
added
bug
|
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",
}; |
|
@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",
}; |
|
@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",
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
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
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%7DThe text was updated successfully, but these errors were encountered: