Google Chrome and other Chromium-based browsers (Opera, Vivaldi, etc.)
*Opera Mini on Extreme/Mini Mode is only partially supported.
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;"
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.
Description: Changes the padding of the color picker, in pixels. Must not be a negative number. Default is 7px.
Values: left / center / right
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".
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".
Values: normal / luv
Description: Sets the colors inside the color picker to use either HSL or HSLuv (hsluv.min.js required).
Values: false / true
Description: Displays input fields for hue, saturation and luminance below the color picker, as well as a close button.
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".
Values: (id update¹, format²), (id update¹, format²), [...]
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.
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.
Description: Will scan through the entire page looking for elements with the rhslcolor attribute, associating them with the tool itself.
rhslAddRemove(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.
rhslToggle(false, element, refresh)
Description: Toggles the color picker 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.
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").
rhslAlignElement(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".
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, lum] 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.
Description: Returns the position of an element in the [x, y] format.
noScroll: If true, it'll calculate an element's position relative to the screen rather than the entire page.
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.
Description: Validates colors and converts them to either RGB or HSL arrays.
color: The color itself, 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.
rhslColorParser(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, lum] 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.
RHSL needs these functions in order to work, but they can also be used separately from RHSL.
isChildOf(child, parent): Checks to see if an element (child) is contained inside another element (parent).
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].
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, lum]): 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, lum]): 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].