It is currently February 23rd, 2024, 2:55 am

HSLiders | Color Selector

Skins that control functions in Windows or Rainmeter
Posts: 124
Joined: December 28th, 2022, 9:30 pm
Location: México

HSLiders | Color Selector

Post by RicardoTM »

----------- HSLiders -----------
by RicardoTM and Yincognito

What started as a rework of the RGBCode skin I use on my ResizableGauges skin, became an experiment on Color Models and the challenge of doing it using only Rainmeter. No images, libraries nor scripting, pure math.
After a lot of research and experimentation, Yincognito and I got to this result:

The design is inspired on RGBCode skin and HSLPicker website.

You can either drag, scroll, or input HSL or RGB values directly to select a color, then you can copy the color code on RGB or HEX format.
You can also save up to 30 color swatches. Neat, right?.
Why HSL? Because I like it, that's it. You can select any color and then find different shades and tones pretty quickly.
Hex output is quite useful when working on Photoshop, Illustrator or any other software, even Rainmeter, you just copy the code and paste it wherever you need to.

While not the most simple skin code-wise (700+ lines), it gets the job done quite nicely.

Although it was designed mainly as an standalone tool, it can be perfectly implemented on other skins, all colors (including swatches) are stored on a separated .inc file.

How it works:
RGB2HSL and HSL2RGB color space conversions (1), RGB2HEX conversion (2), as well as POS2VAL and VAL2POS circular dragging conversions (3) made by Yincognito:

(1) The OfRGB and OfHSL, aka "FromRGB" and "FromHSL" measures use the color space conversion formulas for the corresponding intervals to get the other color space attributes, when the current color space attributes are changed.

(2) The RGB2HEX measure is using addition and multiplication in the base conversion formulas to store the decimal representations of the hexadecimal digits in a decimal number, whose string is then substituted into the proper hexadecimal form (where 10 is A, 11 is B, and so on).

(3) The MOUSE plugin measure retrieves the X and Y of the mouse pointer and calculates the two argument arctangent angle representing the POSition of the mouse in relation to the center of the circle or rotation. It also subsequently converts that angle into suited intervals and directions to get the VALue of H, S, L or R, G and B corresponding to it on the circular shape, taking into account the excluded arc on which dragging is not permitted. Then, in the Shape meter, the ratios of the said VALues of R, G or B to their maximums, in relation to the starting and rotation angles, are used with the trigonometric functions to display the dragging marker in the proper POSition on the circular shape.

Mouse Dragging | Scrolling | Right click to input new value | Double click to reset.

Mouse Dragging | Scrolling | Left click on value to input new value.

Copy Color Code to Clipboard:
Click on either RGB or HEX.

Color Swatches:
Click on "▼" to open swatches tab.
Right click on a swatch to set swatch to current color.
Left click to set current color to swatch.
Scroll wheel click to delete.
Click on "▲" to close swatches tab.

Enjoy it

Happy New Year.
You do not have the required permissions to view the files attached to this post.