Color Analysis

/**
 * Returns true if the color is dark (brightness < 128)
 * @returns boolean indicating if color is dark
 */
isDark(): boolean;

import tinycolor from "tinycolor2";

const darkColor = tinycolor("#333333");
const lightColor = tinycolor("#cccccc");

console.log(darkColor.isDark());  // true
console.log(lightColor.isDark()); // false

// Useful for determining text color
const backgroundColor = tinycolor("#2c3e50");
const textColor = backgroundColor.isDark() ? "#ffffff" : "#000000";

/**
 * Returns true if the color is light (brightness >= 128)
 * @returns boolean indicating if color is light
 */
isLight(): boolean;

const darkColor = tinycolor("#333333");
const lightColor = tinycolor("#cccccc");

console.log(darkColor.isLight());  // false
console.log(lightColor.isLight()); // true

// Choose appropriate overlay
const bgColor = tinycolor("#f8f9fa");
const overlayOpacity = bgColor.isLight() ? 0.1 : 0.8;

/**
 * Returns the perceived brightness using W3C formula
 * Formula: (r * 299 + g * 587 + b * 114) / 1000
 * @returns number between 0-255 representing brightness
 */
getBrightness(): number;

const red = tinycolor("red");
const blue = tinycolor("blue");
const white = tinycolor("white");

console.log(red.getBrightness());   // 76.245
console.log(blue.getBrightness());  // 28.814
console.log(white.getBrightness()); // 255

// Sort colors by brightness
const colors = ["red", "blue", "green", "yellow"].map(tinycolor);
colors.sort((a, b) => b.getBrightness() - a.getBrightness());

/**
 * Returns the relative luminance using WCAG formula
 * Used for accessibility calculations
 * @returns number between 0-1 representing luminance
 */
getLuminance(): number;

const white = tinycolor("white");
const black = tinycolor("black");
const red = tinycolor("red");

console.log(white.getLuminance()); // 1
console.log(black.getLuminance()); // 0
console.log(red.getLuminance());   // ~0.2126

// Calculate contrast ratio manually
const bg = tinycolor("#2c3e50");
const text = tinycolor("#ffffff");
const l1 = Math.max(bg.getLuminance(), text.getLuminance());
const l2 = Math.min(bg.getLuminance(), text.getLuminance());
const contrast = (l1 + 0.05) / (l2 + 0.05);

/**
 * Returns true if the color was successfully parsed
 * @returns boolean indicating if color is valid
 */
isValid(): boolean;

const validColor = tinycolor("red");
const invalidColor = tinycolor("not-a-color");
const emptyColor = tinycolor("");

console.log(validColor.isValid());   // true
console.log(invalidColor.isValid()); // false
console.log(emptyColor.isValid());   // false

// Validate user input
function processUserColor(input) {
  const color = tinycolor(input);
  if (!color.isValid()) {
    throw new Error("Invalid color format");
  }
  return color;
}

/**
 * Returns the original input used to create the color
 * @returns any - the original input value
 */
getOriginalInput(): any;

const hexColor = tinycolor("#ff0000");
const rgbColor = tinycolor("rgb(255, 0, 0)");
const objColor = tinycolor({ r: 255, g: 0, b: 0 });

console.log(hexColor.getOriginalInput());   // "#ff0000"
console.log(rgbColor.getOriginalInput());   // "rgb(255, 0, 0)"
console.log(objColor.getOriginalInput());   // { r: 255, g: 0, b: 0 }

// Store original format for round-trip conversions
const userInput = "#ff0000";
const color = tinycolor(userInput);
const originalFormat = color.getOriginalInput();

/**
 * Returns the format that was detected during parsing
 * @returns string indicating the detected format
 */
getFormat(): string;

const hexColor = tinycolor("#ff0000");
const rgbColor = tinycolor("rgb(255, 0, 0)");
const namedColor = tinycolor("red");
const objColor = tinycolor({ r: 255, g: 0, b: 0 });

console.log(hexColor.getFormat());   // "hex"
console.log(rgbColor.getFormat());   // "rgb"
console.log(namedColor.getFormat()); // "name"
console.log(objColor.getFormat());   // "rgb"

// Preserve original format in conversions
function preserveFormat(color) {
  const format = color.getFormat();
  switch (format) {
    case "hex": return color.toHexString();
    case "rgb": return color.toRgbString();
    case "hsl": return color.toHslString();
    case "name": return color.toName() || color.toHexString();
    default: return color.toString();
  }
}

/**
 * Returns the alpha value of the color
 * @returns number between 0-1 representing transparency (0 = transparent, 1 = opaque)
 */
getAlpha(): number;

const opaqueColor = tinycolor("red");
const transparentColor = tinycolor("rgba(255, 0, 0, 0.5)");
const transparentHex = tinycolor("#ff000080");

console.log(opaqueColor.getAlpha());      // 1
console.log(transparentColor.getAlpha()); // 0.5
console.log(transparentHex.getAlpha());   // ~0.5

// Check if color needs transparency support
function needsAlphaChannel(color) {
  return color.getAlpha() < 1;
}

// Create CSS with appropriate format
function toCssColor(color) {
  return needsAlphaChannel(color) 
    ? color.toRgbString() 
    : color.toHexString();
}

function classifyColor(colorInput) {
  const color = tinycolor(colorInput);
  
  if (!color.isValid()) {
    return { type: "invalid" };
  }
  
  const brightness = color.getBrightness();
  const luminance = color.getLuminance();
  const alpha = color.getAlpha();
  
  return {
    type: "valid",
    darkness: color.isDark() ? "dark" : "light",
    brightness: brightness,
    luminance: luminance,
    transparency: alpha < 1 ? "transparent" : "opaque",
    format: color.getFormat(),
    original: color.getOriginalInput()
  };
}

function prepareForAccessibility(color) {
  return {
    color: color,
    luminance: color.getLuminance(),
    brightness: color.getBrightness(),
    isDark: color.isDark(),
    alpha: color.getAlpha(),
    // These values are used by tinycolor.readability()
    rgb: color.toRgb()
  };
}