Algorithm problems in color picker tool

MDN
, ,
#1

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?

#2

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

#3

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!

#4

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 :slight_smile: