0

I want to create a scale of shades from 050 to 900. (I refer to Material Design Color palettes like here: https://material.io/design/color/the-color-system.html#color-usage-and-palettes)

I have my primary color: # 39C063 ie HSL: 139 54 49.

I found such a shade generator: https://noeldelgado.github.io/shadowlord/#39c063

This generator seems to me - it makes no sense because, for example, a 10% darker shade is: HEX: # 33AD59 HSL 129 54 44.

This means that Light is 5 points less (from 49 to 44). And now I think - if it's 10%, how do 5 points relate to it? Does this generator give me the correct answer? How do I create a palette from 050 to 900 from the output color HSL: 139 54 49.? 😂 Because probably not from the generator 😅 Should I manually reduce/increase the light intensity by 10 points (L)?

PS. (I know this color is not accessible, but that's another point that I don't want to touch on now).

Improve this question
3
  • 2
    What is the scale from 050 to 900 supposed to mean exactly? That doesn’t immediately seem like a meaningful scale for colour shades to me. You can’t expect the actual colour values in a scale of shades to make immediate sense, even in HSL. Simply adjusting L alone will often not give you shades that look like they belong to the same colour.
    – Janus Bahs Jacquet
    Apr 30, 2021 at 14:21
  • I refer to Material Design Color palettes like here: material.io/design/color/… on the bottom
    – Lorelei Heckmann
    Apr 30, 2021 at 14:24
  • Hi. Welcome to GDSE. You've asked several questions here, but I don't know if they're answerable. What do you mean by "how to evaluate"? Not sure I understand. In what way do you want to evaluate them? Also you ask how do 5 points relate to 10%. I'm not sure since I don't know how the generator is calculating it. Then you asked if the generator has given you the correct answer. Again I've no way to evaluate that. Maybe you should contact the developer of the generator site.
    – Billy Kerr
    Apr 30, 2021 at 18:31

2 Answers 2

Reset to default
2

"This means that Light is 5 points less (from 49 to 44). And now I think - if it's 10%, how do 5 points relate to it?"

The L in HSL is the average of the minimum value and the maximum value of the RGB triplet.

RGB is commonly quoted as a number in the range of 0 to 255 (decimal, but your hex values equate to this range). This range is common because that is the range of a single byte and RGB is perhaps most commonly 1 byte per pixel per color. Your colors are RGB(51, 173, 89) and RGB(57,192,99).

The L value for the two colors you quote are 124.5 for one and 112 for the other.

The L value you are quoting is actually on a scale from 0 to 1 but it omits the decimal: many sliders and pickers transform this to a percentage and display it as an integer.

0.49 times 255 is approx. 125; 0.40 times 255 is approx 112. The math checks out.

44 is 10% less than 49; 112 is roughly 10% less than 124.5.

Improve this answer
1
  • wow, amazing! its a great explanation thank you soo much!! it makes sense to me now! they should teach me that while I was studying!
    – Lorelei Heckmann
    May 2, 2021 at 15:55
1

The generator is on the same page that you posted.

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

enter image description here

Improve this answer
1
  • that's amazing thanks! Now I see it!
    – Lorelei Heckmann
    May 2, 2021 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.