Supported Browsers

• Internet Explorer (10/11)
• Microsoft Edge
• Mozilla Firefox
• Google Chrome and other Chromium-based browsers (Opera, Vivaldi, etc.)
• Opera Mini*

*Opera Mini on Extreme/Mini Mode is only partially supported.

Supported Properties

These are all properties you can put inside the rhslcolor attribute. They are formatted just like CSS: rhslcolor="align: right; update-self: text-color, hex;"

• size
• Values: width, height
• Example: size: 360, 200;
• Description: Changes the size of the color picker, in pixels. Neither value can go below 75. The comma is required. If either side of the comma is left empty, it'll use the default value for that field, which are 180px of width and 100px of height.

• padding
• Values: padding
• Example: padding: 10;
• Description: Changes the padding of the color picker, in pixels. Must not be a negative number. Default is 7px.

• align
• Values: left / center / right
• Example: align: center;
• Description: Makes the color picker align to an element's center or left/right borders. Note that the color picker will try not to align itself in a way that would make it render off-screen. Default value is "left".

• theme
• Values: light / dark / color1, color2, color3, color4
• Example: theme: dark; or theme: #374828, #525D38, #253518, #111711;
• Description: Customizes the color picker's theme. If using a custom theme, the colors will define the outer border's color, the background's color, the inner borders' color and the inputs' background color, respectively. A valid color (Hexadecimal, RGB or HSL) must be provided, otherwise it'll set it to #000000. Default theme is "light".

• hsltype
• Values: normal / luv
• Example: hsltype: luv;
• Description: Sets the colors inside the color picker to use either HSL or HSL_uv (hsluv.min.js required).

• inputs
• Values: false / true
• Example: inputs: true;
• Description: Displays input fields for hue, saturation and lightness below the color picker, as well as a close button.

• addclass
• Values: *
• Example: addclass: customclass;
• Description: Adds a class attribute to the color picker. This provides more CSS customization options for the color picker. Usage of the !important rule may be necessary depending on the attribute being customized.

• update-self
• Values: update¹, format²
• Example: update-self: none, rgb;
• Description: Defines how the color picker will update the <button> or <input> element that it's currently assigned to. Defaults to "color, hex".

• update-linked
• Values: (id update¹ format²), (id update¹ format²), [...]
• Example: update-linked: (elementIdGoesHere color hsl);
• Description: Defines how the color picker will update any number of other elements (the element's ID must be provided). Defaults to "both, hex".

² hex / rgb / hsl
¹ See the table below:

• none: Updates nothing. Invalid values are treated as "none".
• bg-color: Updates the background and will change the text color as necessary in order to keep it legible.
• bg-only: Updates the background but won't change the text color, which could cause ilegible text.
• text-color: Updates the text's color.
• border-color: Updates the border's color.
• outline-color: Updates the outline's color.
• text: Updates the element's text. Functionally equivalent to "none+text" (see below).

If you want the color to appear inside an element as text, you can add "+text" at the end of any of the values above. Note that this won't work for elements that can't have text inside them (ex. <img>). Also note that, due to the way that <input> elements work, their text will always get updated with the color value.

RHSL Functions

You're probably not going to need to use these functions, but in case you are coding a more advanced project, they might be helpful.

• RHSL.scan()
• Description: Will scan through the entire page looking for elements with the rhslcolor attribute, associating them with the tool itself.

• RHSL.addOrRemove(element, value, shouldRemove)
• Description: Adds or removes an EventListener from a particular element, which connects or disconnects it from RHSL.
• element: Required. The element that it should add or remove an EventListener from.
• value: The color value that the element has. In most cases this is just element.value, but you can also give it custom values to work with. Defaults to #FFFFFF.
• shouldRemove: Will remove the EventListener if true, and add it if false.

• RHSL.toggle(false, element, refresh)
• Description: Toggles the color picker window ON or OFF for a particular element.
• element: Required. The element that the color picker should attach to.
• refresh: If true, it'll call itself again once it finishes, effectively refreshing the color picker.

• RHSL.properties(properties, lookFor)
• Description: Goes through all the properties inside the rhslcolor attribute of an element and returns an array.
• properties: Required. This should contain the text inside the rhscolor attribute, which is provided by element.getAttribute("rhslcolor").
• lookFor: If true, it'll return only the value of the property provided (ex. providing "hsltype" will return "luv").

• RHSL.alignElement(colorpicker, element, align)
• Description: Realigns the colorpicker element against another element.
• colorpicker: Required. Can be retrieved by using document.getElementById("rhslcolorpickercontainer").
• element: Required. The element that the colopicker will try to align to.
• align: Required. Must be either "left", "right" or "center".

• RHSL.windowResize()
• Description: Realigns the colorpicker element against the currently-active element. It will fail if the color picker isn't currently open or if rhslCurrentElement doesn't contain a valid element.

• RHSL.colorPicker(colorpicker, false, true, [hue, sat, lig])
• Description: Provide valid hue/sat/lig to the color picker, along with the colorpicker element, and it'll update the color picker and the element's color.
• colorpicker: Required. Can be retrieved by using document.getElementById("rhslcolorpickercontainer").children[0].
• hue: Optional. If provided, this will be the hue's value. If not, it'll keep the previous value. Must be in the set [0, 360].
• sat: Optional. If provided, this will be the saturation value. If not, it'll keep the previous value. Must be in the set [0, 100].
• lig: Optional. If provided, this will be the brightness value. If not, it'll keep the previous value. Must be in the set [0, 100].
• Note: You can call RHSL.currentElement(element) to manipulate the element that the colorpicker will update.

• RHSL.fineChange(element, color, isLUV, ignoreValue)
• Description: This will update an element's colors.
• element: Required. The element to update.
• color: Required. The color in the HSL or HSLuv format, in the array [hue, sat, lig] where hue is in the set [0, 360] and the rest in the set [0, 100].
• isLUV: Set to true if the color is in the HSLuv format. If false, it'll treat it as if it was in the HSL format.
• ignoreValue: If true, it'll not update the element's value attribute.

• RHSL.getPosition(element, noScroll)
• Description: Returns the position of an element in the [x, y] format.
• element: Required.
• noScroll: If true, it'll calculate an element's position relative to the screen rather than the entire page.

• RHSL.currentElement(element)
• Description: Holds and updates the element that the colorpicker is currently assigned to.
• element: If provided (or if false), it'll change the current element. If not provided, it'll instead return the current element that's stored in it.

• RHSL.colorConverter(color, toHSL)
• Description: Validates colors and converts them to either RGB or HSL arrays.
• color: The color itself as a string, must be in either Hexadecimal, RGB or HSL.
• toHSL: If true, it'll convert the color to an HSL array. If false, it'll convert the color to an RGB array.

• RHSL.colorParser(color, changeTo, isLUV, toArray)
• Description: Converts HSL/HSLuv colors to Hexadecimal, RGB or HSL as strings or arrays.
• color: Required. Must be in the [hue, sat, lig] format as an array.
• changeTo: Can be either "hex", "rgb" or "hsl", depending on the format you want.
• isLUV: Set to true if the color variable uses HSLuv values instead of normal HSL.
• toArray: If true, it won't convert the color values into a string, it'll keep them as an array.

Other Functions

RHSL needs these functions in order to work, but they can also be used separately from RHSL.

• RHSL.isChildOf(child, parent): Checks to see if an element (child) is contained inside another element (parent).


• RHSL.rgbToHsl(r, g, b): Will take separate RGB values contained in the set [0, 255] and returns HSL values contained in the set [0, 1].
• RHSL.hslToRgb(h, s, l): Will take separate HSL values contained in the set [0, 1] and returns RGB values contained in the set [0, 255].


• window.hsluv.hsluvToHex([hue, sat, lig]): Converts an HSLuv value to a hex string. The hue must be contained in the set [0, 360], while the saturation and lightness must be in the set [0, 100].
• window.hsluv.hsluvToRgb([hue, sat, lig]): Like above, but returns an array of 3 numbers in the set [0, 1], for the r, g, and b channel.
• window.hsluv.hexToHsluv(hex): Converts a hexadecimal string to an array containing the HSLuv color. Note: The result can have rounding errors (ex. saturation can be 100.00000000000007). It's recommended to use Math.round().
• window.hsluv.rgbToHsluv([r, g, b]): Like above, but red, green and blue must be contained in the set [0, 1].

The window.hsluv functions are provided by HSL_uv.

HTML Content

• div#rhslcolorpickercontainer
• Parent Element: <body>
• Child Elements: div.rhslcolormousearea, <style>, div.rhslcolorinputs
• Description: This is the container element for the entirety of RHSL. It is absolute-positioned relative to the page, and it also has RHSL's border and background. The element is created and attatched to the document as the last element inside of <body> when rhslToggle() is called.

• div.rhslcolormousearea
• Parent Element: div#rhslcolorpickercontainer
• Child Elements: div.rhslcolorpicker, div.rhslcolorpickerside
• Description: This element contains the main part of the color picker. Clicking inside this element will call rhslColorPicker().

• div.rhslcolorpicker
• Parent Element: div.rhslcolormousearea
• Child Elements: <div>, img.rhslcolorpickerselected (nested child element)
• Description: This element contains RHSL's hue and saturation window. The outer div has the hue gradient and the border, while the inner div contains a transparent-to-gray gradient, representing the saturation. Inside the inner div is an 20x20 absolute-positioned image relative to the outer div, which serves as the cursor.

• div.rhslcolorpickerside
• Parent Element: div.rhslcolormousearea
• Child Elements: img.rhslcolorpickerselected
• Description: This element contains RHSL's brightness slider. Inside it is an 20x20 absolute-positioned image relative to its parent, which serves as the cursor.

• div.rhslcolorinputs
• Parent Element: div.rhslcolormousearea
• Child Elements: input.rhslcolorinput (3), button
• Description: This element contains and adjacent part of RHSL. It is only present there if the inputs: true; attribute is used. It contains a <style> tag right before it and three input elements inside it, along with a button element. Each input changes one axis (hue, saturation and brightness, respectively). Clicking the button closes the color picker window.

Helpful Images/Diagrams

• Using RHSL.colorParser and RHSL.colorConverter
• HTML elements used by RHSL