HOWTO about cielab.io

[ucarion]

Hi Marcos, I'm afraid I can't commit to doing such work right now. Maybe another time, when I'm actively using this tool frequently again. Thanks for taking the time to reach out!

…

On Wed, Oct 6, 2021, 1:07 AM Marcos Dione ***@***.***> wrote: Hi @ucarion <https://github.com/ucarion> . Great tool! Except that, even as I read stripe's article, I'm not sure how to use the tool. Lucily I didn't need a whole palette, just 3 hues representing red-ish, blue-ish and violet-ish, so I got what I wanted. Could you write a little howto to explain how to use it effectively? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQUIOM2BLM4MA2LEUFU5Q3UFP7T5ANCNFSM5FN2OHUA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[xbello]

This is how I do it:

1. Save the "Locally saved preset" pressing the "Save" button. It's now stored in the browser storage.

2. Clear that preset. On Chrome and Firefox, press F12, go to the tab [Application/Storage], look for "Local Storage" item, "https://cielab.io" entry. It shoud have only one key, "preset" and a long Json value that looks like '{"hues":["Red","Volcano"...'. Double-click the value and replace it with (maybe you want to change "Empty" with your soon-to-be first colour name):

   {"hues":["Empty"],"shades":["1"],"colors":[[{"r":1,"g":1,"b":1}]]}

   If you botch this step and end up with a totally empty page, it means you copy-pasted wrongly. To recover the page, you can re-try or delete the "preset" key completely and start at the step 1.

3. Close the development tab, and select any Preset other than "Locally Saved Preset", and then go back to "Locally saved preset". A sad empty all-white table and graphs should appear.

4. Start creating the hues and shadows manually, or pulling the starting values from some other site like https://thure.github.io/cielab-curved-palette/. Lets suppose you want three colours (red, blue and violet) with five levels of shadow each.

   • If you don't want a hue called "Empty", go again through step 2 and edit the value changing "Empty" with "Red".
   • Add Shades in "New shade name" box, adding 2, 3, 4 and 5.
   • Add two more hues in "New hue name", adding "blue" and "violet".
   • Click "Save". This is your starting point.

5. In the table, click on the Red-3 box, and ad a middle tone red. For example, eb0000, by adding this value on the HEX input at the bottom left.

6. In the table again, click on the Red-2 box, and ad a clear-ish red. for example ffccaa.

7. On Red-1 add an even more clear red, like ffddcc.

8. Do the same towards the darker side, using maybe 6a0f00 in Red-4 and 380000 in Red-5.

Now is time to tweak the values to get a pretty palette. Lets fix the luminance. The Red-2 and Red-4 fall well out of the straight line we want.

Select the Red-2 box, and lower the luminance in the "L" input besides the "HEX" box at the bottom left. Lower it from the actual 90.48 to maybe 75. Red-4 could be raised to 25.

Now the Chroma graph for Red-2 look bad, so click Red-2 and adjust the "C" input besides the "L" input. You'll notice that you can't rise it above 45 (this is where this tool really helps, keeping your values sane)! Leave it at that.

Now it's maybe a good moment to change Red-1 to something actually red instead of white. If you don't have a value, start with the value from Red-2, and then fix the Chroma (change it to 25 or so) and raise the Luminance to 85.

We already have a decent palette, except for maybe our middle Red-3. We can lower the Chroma so it's softer and the Chroma step from Red-2 to Red-3 is roughly the same than from Red-1 to Red-2. Maybe Red-3-Chroma to 80.

Now time to do the same with our other two colours!

[xbello]

As promissed let's add a second color. I will use a Violet EE82EE (the first result when you search Violet in duck.com) in the Violet-3 square. Quickly, you notice that luminance (top right graph) is much higher than red: 70 vs 49. Lets tune down at "L", setting it to 50 (rgb now: b54cb7).

Copy that RBG code into Violet-2, and again raise the "L" to the same than the equivalent Red shade (L:75, RBG: fe90fe).

Do the same with Violet-1, and you can't get a Luminance higher than 75! We have to "thread the needle" as they put it in the Stripe blog entry menctioned in the Readme. This means we have to sacrifice Chroma and maybe change Hue until we can raise the Luminance near the 85-ish we got for our Red-1 box. I ended up with Chroma: 35 and Luminance 86 (RGB: fec5fc). Good enough.

Lets go for Violet-4, copying the value from Violet-3 as a starting point. In this case, we can only go to L:30, so again we tweak Chroma/Hue to allow a Luminance of 25-ish. I ended up with C: 64, H:-0.65, then lowered the L to 25. RGB: 660b77.

Finally, Violet-5, starting with Violet-4 value. We are targeting a Luminance of 10-ish here. We can go straight for the Chroma: 35, and that allows L:8. In fact, we have some room to a higher Chroma while keeping the L:8, so raise Chroma as much as possible. I ended up with C:42, a RGB 2d003c , for this result:

The starting Violet-3 is not good enough, its Chroma is too low (I should have noticed in the first step). Lets raise it to C:85 (RGB: c336c8) or C:90 (RGB: c72ecc). Final result:

[xbello]

With blue is basically the same as with Violet, tweaking primarily the Chroma, and the Hue when necesary, to allow the Luminance to be near the other two colours while still being blue. I ended up with the following RGBs: d3d4fc, adb3fd, 5e69ea, 2a3380 and 061243.

Final result:

We can tweak colours if we still are not convinced. The tool shows if the tweaks are consistent and we are not drifting toward other colours or shades are not consistent with the other levels.

Nice tool! Thanks for creating it!