The Official Blog of Patcoola

Im just a dude watching over my parents,
and trying to make cartoons and video games from home.

Project Color Picker

, By Patcoola

Project Title: Color Picker
Programming Language: JavaScript
Date Created: 2022-07-21

Purpose: Provides a widget for color selecting within design software and Web Apps.

Description: Color Picker is a full featured widget for selecting colors. It supports RGB, HSL, HEX, and Alpha. Click and drag user interface for Hue, Color, and Alpha. Realtime preview of color changes and input values.

Color Picker provides perfect color as proven with Adobe Animate.


Donate Now!

Hi there, I spend a lot of time making this blog.

It would be great if you would consider donating.



The Color Picker Class

class.setTarget( str, elm );

hue, picker, alpha, preview; assign an element

class.setField( str, elm );

hex, alpha, red, green, blue, hue, saturation, light; assign an input element

class.setButton( str, elm );

hex, hsl, rgb; assign a button element


Disables the Alpha input field and hides the alpha slider.


Enables the Alpha input field and hides the alpha slider if disabled was used.


Function to run the widget.


Function to stop running the widget.


hex, hsl, rgb; Triggers an input display change.


Function to change the color selected, accepts HEX, RGB, RGBA.


Returns RGBA as a string. ex: 255,255,255,1


Returns Hex as a string. ex: #FFFFFF


Returns Alpha as a number. ex: 1


Toggling input tabs can be done by assigning buttons “hex, hsl, rgb” with the setButton function.

To assign an element has a “toggled” in the display, there are fixed class names: hex, hsl, color.

Designers Notes:

Elements Hue, Picker, Alpha, Preview use a wrapper and a canvas inside.

When using setTarget, select the element wrapper and not the canvas element.



Donate Now!

After a hard day, I like to relax with a cold jar of pickle juice and a hardy fart. If you like my blog, please consider donating.


Post Meta

Share Post


Comments: Write Comment

Be the first to write a comment.

Leave a Comment

All comments are reviewed before publishing. Comments must be related to the page topic, must not be spam, and must comply with the criminal code of Canada.