-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HOWTO #1
Comments
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>.
|
This is how I do it:
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! |
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: |
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! |
Hi @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?
The text was updated successfully, but these errors were encountered: