Color Format Conversion

/**
 * Returns hex representation without hash prefix
 * @param allow3Char - Allow 3-character hex shorthand when possible
 * @returns string hex value without #
 */
toHex(allow3Char?: boolean): string;

import tinycolor from "tinycolor2";

const red = tinycolor("red");
const darkGray = tinycolor("#333333");

console.log(red.toHex());           // "ff0000"
console.log(red.toHex(true));       // "f00" (3-char shorthand)
console.log(darkGray.toHex());      // "333333"
console.log(darkGray.toHex(true));  // "333" (3-char shorthand)

/**
 * Returns hex representation with hash prefix
 * @param allow3Char - Allow 3-character hex shorthand when possible
 * @returns string hex value with #
 */
toHexString(allow3Char?: boolean): string;

const blue = tinycolor("blue");
const lightGray = tinycolor("#cccccc");

console.log(blue.toHexString());           // "#0000ff"
console.log(blue.toHexString(true));       // "#00f" (3-char shorthand)
console.log(lightGray.toHexString(true));  // "#ccc" (3-char shorthand)

// Common usage in CSS
const cssColor = blue.toHexString();

/**
 * Returns 8-character hex with alpha channel
 * @param allow4Char - Allow 4-character hex shorthand when possible
 * @returns string 8-character hex value without #
 */
toHex8(allow4Char?: boolean): string;

const semiTransparentRed = tinycolor("rgba(255, 0, 0, 0.5)");
const opaqueBlue = tinycolor("blue");

console.log(semiTransparentRed.toHex8());      // "ff000080"
console.log(semiTransparentRed.toHex8(true));  // "f008" (4-char shorthand)
console.log(opaqueBlue.toHex8());              // "0000ffff"

/**
 * Returns 8-character hex string with hash prefix and alpha
 * @param allow4Char - Allow 4-character hex shorthand when possible
 * @returns string 8-character hex value with #
 */
toHex8String(allow4Char?: boolean): string;

const transparentGreen = tinycolor("rgba(0, 255, 0, 0.3)");

console.log(transparentGreen.toHex8String());      // "#00ff004d"
console.log(transparentGreen.toHex8String(true));  // "#0f04" (4-char shorthand)

/**
 * Returns RGB representation as an object
 * @returns object with r, g, b (0-255) and a (0-1) properties
 */
toRgb(): {r: number, g: number, b: number, a: number};

const purple = tinycolor("purple");
const rgba = tinycolor("rgba(128, 0, 128, 0.7)");

console.log(purple.toRgb());
// { r: 128, g: 0, b: 128, a: 1 }

console.log(rgba.toRgb());
// { r: 128, g: 0, b: 128, a: 0.7 }

// Destructure for individual values
const { r, g, b, a } = purple.toRgb();

/**
 * Returns RGB/RGBA string representation
 * @returns string RGB or RGBA format
 */
toRgbString(): string;

const orange = tinycolor("orange");
const transparentOrange = tinycolor("rgba(255, 165, 0, 0.5)");

console.log(orange.toRgbString());           // "rgb(255, 165, 0)"
console.log(transparentOrange.toRgbString()); // "rgba(255, 165, 0, 0.5)"

// Use in CSS
const element = document.querySelector(".box");
element.style.backgroundColor = orange.toRgbString();

/**
 * Returns RGB representation with percentage values
 * @returns object with r, g, b as percentages (0-100) and a (0-1)
 */
toPercentageRgb(): {r: string, g: string, b: string, a: number};

const cyan = tinycolor("cyan");

console.log(cyan.toPercentageRgb());
// { r: "0%", g: "100%", b: "100%", a: 1 }

/**
 * Returns RGB string with percentage values
 * @returns string RGB format with percentages
 */
toPercentageRgbString(): string;

const yellow = tinycolor("yellow");

console.log(yellow.toPercentageRgbString());
// "rgb(100%, 100%, 0%)"

/**
 * Returns HSL representation as an object
 * @returns object with h (0-360), s (0-1), l (0-1), and a (0-1) properties
 */
toHsl(): {h: number, s: number, l: number, a: number};

const red = tinycolor("red");
const lightBlue = tinycolor("lightblue");

console.log(red.toHsl());
// { h: 0, s: 1, l: 0.5, a: 1 }

console.log(lightBlue.toHsl());
// { h: 195, s: 0.53, l: 0.79, a: 1 }

// Use for color adjustments
const { h, s, l, a } = red.toHsl();
const darkerRed = tinycolor({ h, s, l: l * 0.8, a });

/**
 * Returns HSL/HSLA string representation
 * @returns string HSL or HSLA format
 */
toHslString(): string;

const green = tinycolor("green");
const transparentGreen = tinycolor("rgba(0, 128, 0, 0.6)");

console.log(green.toHslString());           // "hsl(120, 100%, 25%)"
console.log(transparentGreen.toHslString()); // "hsla(120, 100%, 25%, 0.6)"

/**
 * Returns HSV representation as an object
 * @returns object with h (0-360), s (0-1), v (0-1), and a (0-1) properties
 */
toHsv(): {h: number, s: number, v: number, a: number};

const magenta = tinycolor("magenta");

console.log(magenta.toHsv());
// { h: 300, s: 1, v: 1, a: 1 }

// Create color wheel
const colors = [];
for (let h = 0; h < 360; h += 30) {
  colors.push(tinycolor({ h, s: 1, v: 1 }));
}

/**
 * Returns HSV/HSVA string representation
 * @returns string HSV or HSVA format
 */
toHsvString(): string;

const violet = tinycolor("violet");

console.log(violet.toHsvString());
// "hsv(300, 47%, 93%)"

/**
 * Returns the named color if available
 * @returns string named color or false if no name exists
 */
toName(): string | false;

const red = tinycolor("#ff0000");
const customColor = tinycolor("#ff0001");

console.log(red.toName());        // "red"
console.log(customColor.toName()); // false

// Fallback to hex if no name available
function getColorName(color) {
  return color.toName() || color.toHexString();
}

/**
 * Returns string representation in specified format
 * @param format - Optional format specifier
 * @returns string representation of color
 */
toString(format?: string): string;

const color = tinycolor("red");

console.log(color.toString());        // Uses original format or default
console.log(color.toString("hex"));   // "#ff0000"
console.log(color.toString("rgb"));   // "rgb(255, 0, 0)"
console.log(color.toString("hsl"));   // "hsl(0, 100%, 50%)"
console.log(color.toString("name"));  // "red"

// Auto-format based on alpha
function smartFormat(color) {
  return color.getAlpha() < 1 
    ? color.toString("rgb")  // Use RGBA for transparency
    : color.toString("hex"); // Use hex for opaque colors
}

/**
 * Returns IE filter string for gradients
 * @param secondColor - Optional second color for gradient
 * @returns string IE filter format
 */
toFilter(secondColor?: any): string;

const startColor = tinycolor("red");
const endColor = tinycolor("blue");

console.log(startColor.toFilter(endColor));
// "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ff0000ff)"

// Single color filter
console.log(startColor.toFilter());
// "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)"

const color = tinycolor("rgba(255, 128, 0, 0.8)");

// All format outputs for the same color
console.log("Hex:", color.toHexString());           // "#ff8000"
console.log("Hex8:", color.toHex8String());         // "#ff8000cc"
console.log("RGB:", color.toRgbString());           // "rgba(255, 128, 0, 0.8)"
console.log("HSL:", color.toHslString());           // "hsla(30, 100%, 50%, 0.8)"
console.log("HSV:", color.toHsvString());           // "hsva(30, 100%, 100%, 0.8)"
console.log("Name:", color.toName() || "No name");  // "No name"

// Object formats
console.log("RGB Object:", color.toRgb());
// { r: 255, g: 128, b: 0, a: 0.8 }

console.log("HSL Object:", color.toHsl());
// { h: 30, s: 1, l: 0.5, a: 0.8 }

console.log("HSV Object:", color.toHsv());
// { h: 30, s: 1, v: 1, a: 0.8 }

/**
 * Creates a new tinycolor instance with the same color values
 * @returns new tinycolor instance
 */
clone(): tinycolor;

const original = tinycolor("red");
const copy = original.clone();

// Modify copy without affecting original
copy.lighten(20);

console.log(original.toHexString()); // "#ff0000" (unchanged)
console.log(copy.toHexString());     // "#ff6666" (lightened)