### Install TinyColor via npm (Node.js/Browser) Source: https://context7.com/bgrins/tinycolor/llms.txt Demonstrates how to install and import TinyColor using npm for both CommonJS and ES Modules environments. It shows basic usage by creating a color instance from a string. ```javascript // Install via npm // npm install tinycolor2 // CommonJS var tinycolor = require("tinycolor2"); var color = tinycolor("red"); // ES Modules import tinycolor from "tinycolor2"; var color = tinycolor("red"); ``` -------------------------------- ### Include TinyColor in Node.js Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Demonstrates how to install and import the TinyColor library in a Node.js environment using npm and either require or import statements. ```javascript var tinycolor = require("tinycolor2"); var color = tinycolor("red"); ``` ```javascript import tinycolor from "tinycolor2"; var color = tinycolor("red"); ``` -------------------------------- ### Import TinyColor in Browser (ESM) Source: https://context7.com/bgrins/tinycolor/llms.txt Shows how to import and use TinyColor in a browser environment using ES Modules via a CDN. It includes an example of converting a color to its hex string representation. ```html ``` -------------------------------- ### Parse Color Inputs Source: https://github.com/bgrins/tinycolor/blob/master/README.md Examples of various string and object formats accepted by the TinyColor constructor, including Hex, RGB, HSL, HSV, and named colors. ```javascript tinycolor("#000"); tinycolor("rgb(255, 0, 0)"); tinycolor({ r: 255, g: 0, b: 0 }); tinycolor("hsl(0, 100%, 50%)"); tinycolor("RED"); ``` -------------------------------- ### TinyColor: Get Color Format Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Demonstrates the `getFormat()` method, which returns a string indicating the input format used to create the TinyColor instance (e.g., 'name', 'rgb'). ```javascript var color = tinycolor("red"); color.getFormat(); // "name" color = tinycolor({r:255, g:255, b:255}); color.getFormat(); // "rgb" ``` -------------------------------- ### TinyColor: Parse HSV and HSVA Color Strings and Objects Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Shows examples of parsing HSV and HSVA colors from various string formats and JavaScript objects, including using `fromRatio` for normalized hue, saturation, and value. ```javascript tinycolor("hsv(0, 100%, 100%)"); tinycolor("hsva(0, 100%, 100%, .5)"); tinycolor("hsv (0 100% 100%)"); tinycolor("hsv 0 1 1"); tinycolor({ h: 0, s: 100, v: 100 }); tinycolor.fromRatio({ h: 1, s: 0, v: 0 }); tinycolor.fromRatio({ h: .5, s: .5, v: .5 }); ``` -------------------------------- ### TinyColor: Parse Named Colors Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Provides examples of parsing CSS named colors (case-insensitive) into TinyColor instances. ```javascript tinycolor("RED"); tinycolor("blanchedalmond"); tinycolor("darkblue"); ``` -------------------------------- ### TinyColor: Parse Hexadecimal Color Strings Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Examples of parsing various hexadecimal color string formats, including shorthand, full, and RGBA versions, with or without a prefix. ```javascript tinycolor("#000"); tinycolor("000"); tinycolor("#369C"); tinycolor("369C"); tinycolor("#f0f0f6"); tinycolor("f0f0f6"); tinycolor("#f0f0f688"); tinycolor("f0f0f688"); ``` -------------------------------- ### GET /color/analysis Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Methods to analyze color properties such as brightness, luminance, and alpha values. ```APIDOC ## GET /color/isLight ### Description Returns a boolean indicating whether the color's perceived brightness is light. ### Method GET ### Response - **isLight** (boolean) - True if light, false otherwise. ## GET /color/isDark ### Description Returns a boolean indicating whether the color's perceived brightness is dark. ### Method GET ### Response - **isDark** (boolean) - True if dark, false otherwise. ## GET /color/getLuminance ### Description Returns the perceived luminance of a color, from 0-1 as defined by WCAG 2.0. ### Method GET ### Response - **luminance** (number) - Value between 0 and 1. ``` -------------------------------- ### GET /color/conversion Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Methods to convert color objects into various string or object representations. ```APIDOC ## GET /color/toHex ### Description Returns the hexadecimal representation of the color. ### Method GET ### Response - **hex** (string) - The hex string (e.g., "ff0000"). ## GET /color/toRgbString ### Description Returns the RGB or RGBA string representation of the color. ### Method GET ### Response - **rgb** (string) - The rgb/rgba string (e.g., "rgba(255, 0, 0, 0.5)"). ``` -------------------------------- ### Event Listener Setup for TinyColor Input Source: https://github.com/bgrins/tinycolor/blob/master/index.html This JavaScript code sets up event listeners for an input element to trigger color changes using the TinyColor library. It listens for 'keyup' and 'change' events on the color input and also handles clicks on sample color links to update the input value and re-render the color information. It initializes the color with a default value. ```javascript document.addEventListener("DOMContentLoaded", function () { var color = document.querySelector("#color"); color.addEventListener("keyup", onchange); color.addEventListener("change", onchange); function onchange() { colorChange(color.value); } colorChange({ r: 150, g: 0, b: 100 }); document.querySelector("#inputter").addEventListener("click", function (e) { if (e.target.matches("a")) { color.value = e.target.textContent; onchange(); e.preventDefault(); } }); }); ``` -------------------------------- ### TinyColor: Get Original Input Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Shows the `getOriginalInput()` method, which returns the exact input value that was passed to the TinyColor constructor. ```javascript var color = tinycolor("red"); color.getOriginalInput(); // "red" color = tinycolor({r:255, g:255, b:255}); color.getOriginalInput(); // "{r: 255, g: 255, b: 255}" ``` -------------------------------- ### Auto Select Text Color Based on Background Source: https://context7.com/bgrins/tinycolor/llms.txt A practical example of using `mostReadable` to automatically select an appropriate text color (black or white) that provides sufficient contrast against a given background color, with customizable options for WCAG level and text size. ```javascript function autoTextColor(bgColor, options) { options = options || {}; var textColors = options.palette || ["#ffffff", "#000000"]; return tinycolor.mostReadable(bgColor, textColors, { includeFallbackColors: true, level: options.level || "AA", size: options.size || "small" }).toHexString(); } autoTextColor("#3498db"); // "#ffffff" or "#000000" based on contrast ``` -------------------------------- ### Get Color Format with TinyColor Source: https://context7.com/bgrins/tinycolor/llms.txt Retrieves the format of the color string or object used to initialize the TinyColor instance. Supported formats include name, hex, rgb, hsl, and hsv. ```javascript tinycolor("red").getFormat(); // "name" tinycolor("#ff0000").getFormat(); // "hex" tinycolor("rgb(255,0,0)").getFormat(); // "rgb" tinycolor("hsl(0, 100%, 50%)").getFormat(); // "hsl" tinycolor("hsv(0, 100%, 100%)").getFormat(); // "hsv" tinycolor({ r: 255, g: 0, b: 0 }).getFormat(); // "rgb" tinycolor({ h: 0, s: 1, l: 0.5 }).getFormat(); // "hsl" ``` -------------------------------- ### Initialize TinyColor in Browser Source: https://github.com/bgrins/tinycolor/blob/master/README.md Shows how to load TinyColor in a browser environment using either ES modules or a traditional UMD script tag. ```html ``` ```html ``` -------------------------------- ### Get and Set Alpha Channel - TinyColor Source: https://context7.com/bgrins/tinycolor/llms.txt Provides methods to get the current alpha (opacity) value of a color and to set a new alpha value. Setting alpha returns the color object for chaining operations. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). ```javascript tinycolor("rgba(255, 0, 0, 0.5)").getAlpha(); tinycolor("rgb(255, 0, 0)").getAlpha(); tinycolor("transparent").getAlpha(); var color = tinycolor("red"); color.getAlpha(); color.setAlpha(0.5); color.getAlpha(); color.toRgbString(); tinycolor("blue") .setAlpha(0.8) .lighten(20) .toRgbString(); ``` -------------------------------- ### Color Luminance and Alpha Source: https://github.com/bgrins/tinycolor/blob/master/README.md Methods to get the luminance and alpha values of a color. ```APIDOC ## getLuminance ### Description Returns the perceived luminance of a color, from `0-1` as defined by Web Content Accessibility Guidelines. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript var color1 = tinycolor("#fff"); color1.getLuminance(); // 1 var color2 = tinycolor("#000"); color2.getLuminance(); // 0 ``` ### Response #### Success Response (number) - **luminance** (number) - The luminance value between 0 and 1. #### Response Example ```json 1 ``` ## getAlpha ### Description Returns the alpha value of a color, from `0-1`. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript var color1 = tinycolor("rgba(255, 0, 0, .5)"); color1.getAlpha(); // 0.5 var color2 = tinycolor("rgb(255, 0, 0)"); color2.getAlpha(); // 1 var color3 = tinycolor("transparent"); color3.getAlpha(); // 0 ``` ### Response #### Success Response (number) - **alpha** (number) - The alpha value between 0 and 1. #### Response Example ```json 0.5 ``` ``` -------------------------------- ### Use TinyColor Utility Methods Source: https://github.com/bgrins/tinycolor/blob/master/README.md Demonstrates common utility methods like getFormat, getOriginalInput, isValid, and getBrightness to inspect color properties. ```javascript var color = tinycolor("red"); color.getFormat(); color.getOriginalInput(); color.isValid(); color.getBrightness(); ``` -------------------------------- ### Alpha Channel Manipulation Source: https://context7.com/bgrins/tinycolor/llms.txt Methods for getting and setting the alpha (opacity) value of a color. ```APIDOC ## getAlpha and setAlpha ### Description `getAlpha()` retrieves the alpha value of a color, while `setAlpha(value)` sets it. `setAlpha` returns the color object for chaining. ### Method `getAlpha()` `setAlpha(value)` ### Parameters #### setAlpha Parameters - **value** (number) - Required - The alpha value to set, ranging from 0 (transparent) to 1 (opaque). ### Request Example ```javascript // Get alpha tinycolor("rgba(255, 0, 0, 0.5)").getAlpha(); // 0.5 tinycolor("rgb(255, 0, 0)").getAlpha(); // 1 tinycolor("transparent").getAlpha(); // 0 // Set alpha (returns the color for chaining) var color = tinycolor("red"); color.getAlpha(); // 1 color.setAlpha(0.5); color.getAlpha(); // 0.5 color.toRgbString(); // "rgba(255, 0, 0, 0.5)" // Chain setAlpha with other operations tinycolor("blue") .setAlpha(0.8) .lighten(20) .toRgbString(); // "rgba(102, 102, 255, 0.8)" ``` ### Response #### Success Response (200) - **getAlpha**: Returns a number representing the alpha value (0-1). - **setAlpha**: Returns the modified color object. #### Response Example ```json { "alpha": 0.5 } ``` ``` -------------------------------- ### TinyColor Initialization Source: https://github.com/bgrins/tinycolor/blob/master/README.md Initialize a new TinyColor instance using various input formats such as strings or objects. ```APIDOC ## Constructor tinycolor(input) ### Description Creates a new TinyColor instance from a string or object input. The parser is permissive and supports multiple color spaces. ### Method Constructor ### Parameters #### Request Body - **input** (string|object) - Required - The color value to parse (e.g., "#fff", "rgb(255,0,0)", or {r: 255, g: 0, b: 0}). ### Request Example ```js var color = tinycolor("red"); var rgbColor = tinycolor({ r: 255, g: 0, b: 0 }); ``` ### Response #### Success Response (Object) - **instance** (object) - A TinyColor instance with utility methods for manipulation and conversion. ``` -------------------------------- ### Chaining Color Modifications in TinyColor Source: https://context7.com/bgrins/tinycolor/llms.txt Demonstrates chaining multiple color modification methods (like lighten, desaturate, spin) on a single TinyColor instance. Each method returns the color instance, allowing for sequential adjustments. Also shows cloning a color to create variations. ```javascript // Multiple modifications chained together var chainedColor = tinycolor("red") .lighten(20) .desaturate(10) .spin(30) .toHexString(); // chainedColor will be "#f36d53" // Create color variations using clone() var baseColor = tinycolor("#3498db"); var lighter = baseColor.clone().lighten(20).toHexString(); // "#7ec0ee" var darker = baseColor.clone().darken(20).toHexString(); // "#1d6fa5" var muted = baseColor.clone().desaturate(30).toHexString(); // "#638faa" ``` -------------------------------- ### TinyColor: Parse RGB and RGBA Color Strings and Objects Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Demonstrates parsing RGB and RGBA colors from various string formats (with/without commas and spaces) and from JavaScript objects, including using `fromRatio` for normalized values. ```javascript tinycolor("rgb (255, 0, 0)"); tinycolor("rgb 255 0 0"); tinycolor("rgba (255, 0, 0, .5)"); tinycolor({ r: 255, g: 0, b: 0 }); tinycolor.fromRatio({ r: 1, g: 0, b: 0 }); tinycolor.fromRatio({ r: .5, g: .5, b: .5 }); ``` -------------------------------- ### Include TinyColor in Browser (UMD) Source: https://context7.com/bgrins/tinycolor/llms.txt Illustrates how to include the TinyColor library in a browser using a UMD (Universal Module Definition) script tag. It demonstrates basic usage by creating a color instance and converting it to a hex string. ```html ``` -------------------------------- ### Get Color Luminance - TinyColor Source: https://context7.com/bgrins/tinycolor/llms.txt Calculates and returns the relative luminance of a color using the WCAG 2.0 formula. The luminance value ranges from 0 (black) to 1 (white). ```javascript tinycolor("#ffffff").getLuminance(); tinycolor("#000000").getLuminance(); tinycolor("#ff0000").getLuminance(); tinycolor("#00ff00").getLuminance(); tinycolor("#0000ff").getLuminance(); tinycolor("#808080").getLuminance(); ``` -------------------------------- ### Include TinyColor in Browser (ESM) Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Shows how to use TinyColor in a web browser using the ESM module system, leveraging a CDN for the library. ```html ``` -------------------------------- ### TinyColor: Parse HSL and HSLA Color Strings and Objects Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Illustrates parsing HSL and HSLA colors from different string formats and JavaScript objects, including using `fromRatio` for normalized hue, saturation, and lightness. ```javascript tinycolor("hsl(0, 100%, 50%)"); tinycolor("hsla(0, 100%, 50%, .5)"); tinycolor("hsl(0, 100%, 50%)"); tinycolor("hsl 0 1.0 0.5"); tinycolor({ h: 0, s: 1, l: .5 }); tinycolor.fromRatio({ h: 1, s: 0, l: 0 }); tinycolor.fromRatio({ h: .5, s: .5, l: .5 }); ``` -------------------------------- ### Get Complementary Color with TinyColor Source: https://context7.com/bgrins/tinycolor/llms.txt Calculates and returns the complementary color of a given color. The complementary color is located 180 degrees opposite on the color wheel. The result can be returned in various string formats. ```javascript tinycolor("#f00").complement().toHexString(); // Output: "#00ffff" tinycolor("#00ff00").complement().toHexString(); // Output: "#ff00ff" tinycolor("#0000ff").complement().toHexString(); // Output: "#ffff00" tinycolor("hsl(30, 100%, 50%)").complement().toHslString(); // Output: "hsl(210, 100%, 50%)" ``` -------------------------------- ### TinyColor Utility Methods Source: https://github.com/bgrins/tinycolor/blob/master/README.md Methods to retrieve information about the parsed color instance. ```APIDOC ## Methods ### getFormat() Returns the format used to create the instance (e.g., "name", "rgb", "hex"). ### getOriginalInput() Returns the raw input passed into the constructor. ### isValid() Returns a boolean indicating if the color was parsed successfully. Invalid colors default to black. ### getBrightness() Returns the perceived brightness of the color (0-255) based on WCAG guidelines. ### Example Usage ```js var color = tinycolor("red"); console.log(color.isValid()); // true console.log(color.getBrightness()); // 76 ``` ``` -------------------------------- ### Include TinyColor in Browser (UMD) Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Illustrates how to include TinyColor in a web browser using a UMD (Universal Module Definition) file via a script tag. ```html ``` -------------------------------- ### Color Manipulation and Output with TinyColor Source: https://github.com/bgrins/tinycolor/blob/master/index.html This JavaScript function demonstrates how to use the TinyColor library to parse a color input, convert it to various formats (hex, rgb, hsl, hsv), and display the results. It also includes functionality to apply color filters like lighten, darken, saturate, desaturate, greyscale, and brighten, and to find the most readable color. Dependencies include the TinyColor library. ```javascript function colorChange(color) { var tiny = tinycolor(color); var output = [ "hex:\t" + tiny.toHexString(), "hex8:\t" + tiny.toHex8String(), "rgb:\t" + tiny.toRgbString(), "hsl:\t" + tiny.toHslString(), "hsv:\t" + tiny.toHsvString(), "name:\t" + (tiny.toName() || "none"), "format:\t" + (tiny.getFormat()), "format string:\t" + tiny.toString(), ].join("\n"); let codeOutput = document.querySelector("#code-output"); codeOutput.textContent = output; codeOutput.style.borderColor = tiny.toHexString(); var filters = document.querySelector("#filter-output"); filters.classList.toggle("invisible", !tiny.isValid()); filters.querySelector(".lighten").style.backgroundColor = tinycolor(color).lighten(20).toHexString(); filters.querySelector(".darken").style.backgroundColor = tinycolor(color).darken(20).toHexString(); filters.querySelector(".saturate").style.backgroundColor = tinycolor(color).saturate(20).toHexString(); filters.querySelector(".desaturate").style.backgroundColor = tinycolor(color).desaturate(20).toHexString(); filters.querySelector(".greyscale").style.backgroundColor = tinycolor(color).greyscale().toHexString(); filters.querySelector(".brighten").style.backgroundColor = tinycolor(color).brighten(20).toHexString(); var allColors = []; for (var i in tinycolor.names) { allColors.push(i); } var mostReadable = tinycolor.mostReadable(color, allColors); document.querySelector("#mostReadable").style.backgroundColor = mostReadable.toHexString(); var combines = document.querySelector("#combine-output"); combines.classList.toggle("invisible", !tiny.isValid()); function colorArrayToHTML(arr) { return arr.map(function (e) { return '' }).join(''); } var triad = tiny.triad(); combines.querySelector(".triad").innerHTML = colorArrayToHTML(triad); console.log(triad.map(function (f) { return f.toHexString(); })); var tetrad = tiny.tetrad(); combines.querySelector(".tetrad").innerHTML = colorArrayToHTML(tetrad); var mono = tiny.monochromatic(); combines.querySelector(".mono").innerHTML = colorArrayToHTML(mono); var analogous = tiny.analogous(); combines.querySelector(".analogous").innerHTML = colorArrayToHTML(analogous); var splitcomplement = tiny.splitcomplement(); combines.querySelector(".sc").innerHTML = colorArrayToHTML(splitcomplement); } ``` -------------------------------- ### Accessibility (WCAG) Methods Source: https://context7.com/bgrins/tinycolor/llms.txt Functions to check color contrast ratios and readability according to WCAG guidelines. ```APIDOC ## readability ### Description Returns the contrast ratio between two colors (WCAG 2.0). ### Method Static method ### Endpoint `tinycolor.readability(color1, color2)` ### Parameters #### Query Parameters - **color1** (string) - Required - The first color. - **color2** (string) - Required - The second color. ### Request Example ```javascript tinycolor.readability("#000", "#fff"); // 21 tinycolor.readability("#000", "#111"); // 1.1121... ``` ## isReadable ### Description Checks if color combination meets WCAG guidelines. ### Method Static method ### Endpoint `tinycolor.isReadable(color1, color2, [options])` ### Parameters #### Query Parameters - **color1** (string) - Required - The first color. - **color2** (string) - Required - The second color. - **options** (object) - Optional - Configuration for WCAG level and text size. - **level** (string) - Optional - WCAG level ('AA' or 'AAA'). Defaults to 'AA'. - **size** (string) - Optional - Text size ('small' or 'large'). Defaults to 'small'. ### Request Example ```javascript // Default: AA level, small text (requires 4.5:1) tinycolor.isReadable("#000", "#fff"); // true // With options tinycolor.isReadable("#000", "#777", { level: "AA", size: "large" }); // true (3:1) tinycolor.isReadable("#000", "#fff", { level: "AAA", size: "small" }); // true ``` ``` -------------------------------- ### Chaining Modifications API Source: https://context7.com/bgrins/tinycolor/llms.txt Demonstrates how to chain multiple color modification methods together for complex color transformations. ```APIDOC ## Chaining Modifications ### Description All modification methods return the color instance, allowing for method chaining. ### Method `method1().method2()...` ### Endpoint N/A (Instance method chaining) ### Parameters See individual method documentation. ### Request Example ```javascript var modifiedColor = tinycolor("red") .lighten(20) .desaturate(10) .spin(30) .toHexString(); var baseColor = tinycolor("#3498db"); var lighter = baseColor.clone().lighten(20).toHexString(); var darker = baseColor.clone().darken(20).toHexString(); var muted = baseColor.clone().desaturate(30).toHexString(); ``` ### Response #### Success Response (200) - **color** (string) - The final color string after all chained modifications. #### Response Example ```json { "color": "#f36d53" } ``` ``` -------------------------------- ### Color Utility Functions Source: https://github.com/bgrins/tinycolor/blob/master/README.md Static methods for comparing, mixing, and generating random colors. ```APIDOC ## Color Utilities ### equals ### Description Checks if two colors are equal. ### Method `tinycolor.equals(color1, color2)` ### Endpoint N/A (Static method) ### Parameters #### Path Parameters - **color1** (TinyColor) - Required - The first color to compare. - **color2** (TinyColor) - Required - The second color to compare. ### Response Example ```javascript true ``` ## mix ### Description Mixes two colors. ### Method `tinycolor.mix(color1, color2, amount = 50)` ### Endpoint N/A (Static method) ### Parameters #### Path Parameters - **color1** (TinyColor) - Required - The first color. - **color2** (TinyColor) - Required - The second color. - **amount** (number) - Optional - The amount to mix (0-100). ### Response Example ```javascript TinyColor object ``` ## random ### Description Returns a random color. ### Method `tinycolor.random()` ### Endpoint N/A (Static method) ### Request Example ```javascript var color = tinycolor.random(); color.toRgb(); ``` ### Response Example ```javascript {r: 145, g: 40, b: 198, a: 1} ``` ``` -------------------------------- ### Color Conversion Methods Source: https://context7.com/bgrins/tinycolor/llms.txt Methods for converting color instances into various formats including Hex, RGB, HSL, and HSV. ```APIDOC ## Color Conversion Methods ### Description Convert a TinyColor instance into different color representations. All methods support alpha channel handling where applicable. ### Available Methods - `toHex()` / `toHexString()`: Converts to standard 6-digit hex string. - `toHex8()` / `toHex8String()`: Converts to 8-digit hex string including alpha. - `toRgb()` / `toRgbString()`: Converts to RGB object or string. - `toHsl()` / `toHslString()`: Converts to HSL object or string. - `toHsv()` / `toHsvString()`: Converts to HSV object or string. ### Response Example ```javascript // Example: toRgbString tinycolor("red").toRgbString(); // "rgb(255, 0, 0)" // Example: toHsl tinycolor("red").toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 } ``` ``` -------------------------------- ### Color Conversion and Formatting Source: https://context7.com/bgrins/tinycolor/llms.txt Methods for converting colors to different string representations, including default formats and specific overrides. ```APIDOC ## toString ### Description Converts a color object to its string representation. It can use the original format or a specified format. ### Method `toString([format])` ### Parameters #### Query Parameters - **format** (string) - Optional - The desired output format (e.g., "hex", "rgb", "hsl", "name"). ### Request Example ```javascript // Default: uses original format tinycolor("red").toString(); // "red" tinycolor("#ff0000").toString(); // "#ff0000" tinycolor("rgb(255, 0, 0)").toString(); // "rgb(255, 0, 0)" // Override format var color = tinycolor("red"); color.toString("hex"); // "#ff0000" color.toString("hex6"); // "#ff0000" color.toString("hex3"); // "#f00" color.toString("hex8"); // "#ff0000ff" color.toString("rgb"); // "rgb(255, 0, 0)" color.toString("prgb"); // "rgb(100%, 0%, 0%)" color.toString("hsl"); // "hsl(0, 100%, 50%)" color.toString("hsv"); // "hsv(0, 100%, 100%)" color.toString("name"); // "red" // Alpha automatically switches to rgba when needed var transparent = tinycolor("#ff000080"); transparent.toString(); // "rgba(255, 0, 0, 0.5)" ``` ### Response #### Success Response (200) - **colorString** (string) - The color represented as a string in the specified or default format. #### Response Example ```json { "colorString": "#ff0000" } ``` ``` ```APIDOC ## toFilter ### Description Generates the IE gradient filter syntax for legacy browser support. ### Method `toFilter([endColor])` ### Parameters #### Query Parameters - **endColor** (string) - Optional - The color to use for the end of the gradient. If not provided, the start color is used for both. ### Request Example ```javascript var color = tinycolor("red"); color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)" // With second color for gradient color.toFilter("blue"); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ff0000ff)" ``` ### Response #### Success Response (200) - **filterString** (string) - The IE gradient filter string. #### Response Example ```json { "filterString": "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)" } ``` ``` -------------------------------- ### Calculate luminance and manage alpha Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Use getLuminance to retrieve the WCAG 2.0 perceived luminance (0-1) and getAlpha/setAlpha to manage the color's transparency. ```javascript var color = tinycolor("red"); color.getLuminance(); // 0 color.getAlpha(); // 1 color.setAlpha(.5); color.getAlpha(); // .5 ``` -------------------------------- ### Parse HSL/HSLA Input (TinyColor) Source: https://context7.com/bgrins/tinycolor/llms.txt Demonstrates parsing HSL and HSLA color values with TinyColor. It supports percentage and decimal notations in string formats, object input, and ratio-based conversions. ```javascript // HSL string formats tinycolor("hsl(0, 100%, 50%)").toHexString(); // "#ff0000" tinycolor("hsl 0 100% 50%").toHexString(); // "#ff0000" tinycolor("hsl(0, 1.0, 0.5)").toHexString(); // "#ff0000" // HSLA string formats tinycolor("hsla(0, 100%, 50%, 0.5)").toRgbString(); // "rgba(255, 0, 0, 0.5)" // Object input tinycolor({ h: 0, s: 1, l: 0.5 }).toHexString(); // "#ff0000" tinycolor({ h: 120, s: 1, l: 0.5 }).toHexString(); // "#00ff00" // Ratio input tinycolor.fromRatio({ h: 0.5, s: 0.5, l: 0.5 }).toHexString(); // "#40bfbf" ``` -------------------------------- ### Color Metadata Methods Source: https://context7.com/bgrins/tinycolor/llms.txt Methods to validate color instances, determine the original input format, and retrieve the original input value. ```APIDOC ## Color Metadata Methods ### Description These methods provide information about the current color instance, including validation status and original input details. ### Methods - `isValid()`: Returns boolean indicating if the color was successfully parsed. - `getFormat()`: Returns the string format (e.g., 'hex', 'rgb', 'hsl') used to create the instance. - `getOriginalInput()`: Returns the original input passed to the constructor. ### Request Example ```javascript var color = tinycolor("red"); color.isValid(); // true color.getFormat(); // "name" color.getOriginalInput(); // "red" ``` ``` -------------------------------- ### Color Utility Functions Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Static utility functions for comparing and mixing colors. ```APIDOC ## Color Utilities ### equals Compares two colors for equality. ### Method Static Method ### Endpoint N/A (Static Method) ### Parameters - **color1** (TinyColor or string) - The first color to compare. - **color2** (TinyColor or string) - The second color to compare. ### Request Example ```javascript tinycolor.equals(color1, color2); ``` ### Response #### Success Response (Boolean) - Returns `true` if the colors are equal, `false` otherwise. ### mix Mixes two colors together. ### Method Static Method ### Endpoint N/A (Static Method) ### Parameters - **color1** (TinyColor or string) - The first color. - **color2** (TinyColor or string) - The second color. - **amount** (number) - Optional - The percentage of the second color to mix in. Defaults to 50. ### Request Example ```javascript tinycolor.mix(color1, color2, amount); ``` ### Response #### Success Response (Instance of TinyColor) - Returns a new TinyColor object representing the mixed color. #### Response Example ```json // Example response depends on input colors and amount ``` ``` ```APIDOC ## random ### Description Returns a random color. ### Method Static Method ### Endpoint N/A (Static Method) ### Parameters None ### Request Example ```javascript var color = tinycolor.random(); color.toRgb(); ``` ### Response #### Success Response (Instance of TinyColor) - Returns a new TinyColor object with random color values. #### Response Example ```json { "r": 145, "g": 40, "b": 198, "a": 1 } ``` ``` -------------------------------- ### TinyColor: Calculate Brightness Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Demonstrates the `getBrightness()` method, which returns the perceived brightness of a color on a scale of 0-255, based on WCAG 1.0 guidelines. ```javascript var color1 = tinycolor("#fff"); color1.getBrightness(); // 255 var color2 = tinycolor("#000"); color2.getBrightness(); // 0 ``` -------------------------------- ### Parse HSV/HSVA Input (TinyColor) Source: https://context7.com/bgrins/tinycolor/llms.txt Explains how to parse HSV and HSVA color values using TinyColor. It covers string formats, object notation, and ratio-based conversions for the HSV color model. ```javascript // HSV string formats tinycolor("hsv(0, 100%, 100%)").toHexString(); // "#ff0000" tinycolor("hsv 0 100% 100%").toHexString(); // "#ff0000" tinycolor("hsv(0, 1, 1)").toHexString(); // "#ff0000" // HSVA string formats tinycolor("hsva(0, 100%, 100%, 0.5)").toRgbString(); // "rgba(255, 0, 0, 0.5)" // Object input tinycolor({ h: 0, s: 100, v: 100 }).toHexString(); // "#ff0000" tinycolor({ h: 240, s: 100, v: 100 }).toHexString(); // "#0000ff" // Ratio input tinycolor.fromRatio({ h: 0.5, s: 0.5, v: 0.5 }).toHexString(); // "#406080" ``` -------------------------------- ### Color Combination Methods Source: https://context7.com/bgrins/tinycolor/llms.txt Methods for generating harmonious color schemes based on a base color. ```APIDOC ## complement ### Description Returns the complementary color (180 degrees opposite on the color wheel). ### Method `complement()` ### Parameters None ### Request Example ```javascript tinycolor("#f00").complement().toHexString(); ``` ### Response #### Success Response (200) - **color** (string) - The complementary color string. #### Response Example ```json { "color": "#00ffff" } ``` ``` ```APIDOC ## triad ### Description Returns an array of three colors evenly spaced (120 degrees apart) on the color wheel. ### Method `triad()` ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").triad(); colors.map(function(c) { return c.toHexString(); }); ``` ### Response #### Success Response (200) - **colors** (array) - An array of color strings representing the triad. #### Response Example ```json { "colors": ["#ff0000", "#00ff00", "#0000ff"] } ``` ``` ```APIDOC ## tetrad ### Description Returns an array of four colors evenly spaced (90 degrees apart) on the color wheel. ### Method `tetrad()` ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").tetrad(); colors.map(function(c) { return c.toHexString(); }); ``` ### Response #### Success Response (200) - **colors** (array) - An array of color strings representing the tetrad. #### Response Example ```json { "colors": ["#ff0000", "#80ff00", "#00ffff", "#7f00ff"] } ``` ``` ```APIDOC ## splitcomplement ### Description Returns three colors: the original color and its two split-complementary colors. ### Method `splitcomplement()` ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").splitcomplement(); colors.map(function(c) { return c.toHexString(); }); ``` ### Response #### Success Response (200) - **colors** (array) - An array of color strings representing the split-complementary colors. #### Response Example ```json { "colors": ["#ff0000", "#ccff00", "#0066ff"] } ``` ``` ```APIDOC ## analogous ### Description Returns analogous colors, which are colors that are close to each other on the color wheel. ### Method `analogous([count], [slice])` ### Parameters #### Query Parameters - **count** (number) - Optional - The number of analogous colors to return. Defaults to 6. - **slice** (number) - Optional - The degree slice between colors. Defaults to 30. ### Request Example ```javascript // Default: 6 colors, 30-degree slices tinycolor("#f00").analogous(); // Custom: 3 colors, 15-degree slices tinycolor("#f00").analogous(3, 15); ``` ### Response #### Success Response (200) - **colors** (array) - An array of color strings representing the analogous colors. #### Response Example ```json { "colors": ["#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600"] } ``` ``` ```APIDOC ## monochromatic ### Description Returns variations of the same hue with different brightness levels. ### Method `monochromatic([count])` ### Parameters #### Query Parameters - **count** (number) - Optional - The number of monochromatic variations to return. Defaults to 6. ### Request Example ```javascript // Default: 6 variations tinycolor("#f00").monochromatic(); // Custom number of variations tinycolor("#3498db").monochromatic(4); ``` ### Response #### Success Response (200) - **colors** (array) - An array of color strings representing the monochromatic variations. #### Response Example ```json { "colors": ["#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000"] } ``` ``` -------------------------------- ### Color Combination Methods Source: https://github.com/bgrins/tinycolor/blob/master/npm/README.md Methods for generating arrays of related colors based on a given color. ```APIDOC ## analogous ### Description Generates analogous colors based on the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters - **results** (number) - Optional - The number of analogous colors to generate. Defaults to 6. - **slices** (number) - Optional - The number of slices to divide the color wheel into for calculation. Defaults to 30. ### Request Example ```javascript var colors = tinycolor("#f00").analogous(); colors.map(function(t) { return t.toHexString(); }); ``` ### Response #### Success Response (Array of TinyColor) - Returns an array of TinyColor objects representing the analogous colors. #### Response Example ```json [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ] ``` ``` ```APIDOC ## monochromatic ### Description Generates monochromatic colors based on the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters - **results** (number) - Optional - The number of monochromatic colors to generate. Defaults to 6. ### Request Example ```javascript var colors = tinycolor("#f00").monochromatic(); colors.map(function(t) { return t.toHexString(); }); ``` ### Response #### Success Response (Array of TinyColor) - Returns an array of TinyColor objects representing the monochromatic colors. #### Response Example ```json [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ] ``` ``` ```APIDOC ## splitcomplement ### Description Generates the split complementary colors based on the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").splitcomplement(); colors.map(function(t) { return t.toHexString(); }); ``` ### Response #### Success Response (Array of TinyColor) - Returns an array of TinyColor objects representing the split complementary colors. #### Response Example ```json [ "#ff0000", "#ccff00", "#0066ff" ] ``` ``` ```APIDOC ## triad ### Description Generates the triad colors based on the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").triad(); colors.map(function(t) { return t.toHexString(); }); ``` ### Response #### Success Response (Array of TinyColor) - Returns an array of TinyColor objects representing the triad colors. #### Response Example ```json [ "#ff0000", "#00ff00", "#0000ff" ] ``` ``` ```APIDOC ## tetrad ### Description Generates the tetrad colors based on the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript var colors = tinycolor("#f00").tetrad(); colors.map(function(t) { return t.toHexString(); }); ``` ### Response #### Success Response (Array of TinyColor) - Returns an array of TinyColor objects representing the tetrad colors. #### Response Example ```json [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ] ``` ``` ```APIDOC ## complement ### Description Returns the complementary color of the input color. ### Method Instance Method ### Endpoint N/A (Instance Method) ### Parameters None ### Request Example ```javascript tinycolor("#f00").complement().toHexString(); ``` ### Response #### Success Response (Instance of TinyColor) - Returns a new TinyColor object representing the complementary color. #### Response Example ```json "#00ffff" ``` ```