### 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"
```
```