MDN link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
About this color selector, how to calculate the X, y coordinates and calculate the hue, saturation, lightness and brightness according to the X, y coordinates? Is there a fixed formula?
Get the X coordinate: ((this.color.sat * size) / 100) | 0
Get the Y coordinate: (size - (value * size) / 100) | 0
The lightness is calculated according to the Y coordinate: (100 - (y * 100) / width) | 0
The saturation is calculated according to the X coordinate: ((x * 100) / width) | 0
How do you get these four formulas? Is it a fixed formula? Can you provide a reference link if you can?
Hello @jiazhuangme
not sure if i got you
but could that help you https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
also for the link you mentioned you can right click the element then spectate then read the html and css and navigate to debugger tab and check the js files if you like
hope that help and have a nice day
Thank you for your offer! But I have seen this data, mainly algorithm is how to generate, I want to know what about this information!
you welcome i did not dive into the code but just a tiny thing you have to check how the code rendre the box that has the color then you will get how it calculate the hsl value from that formula
if i get sometime i will try to dive and let you know what i found
hope that help and have a nice day 