Color Palettes

/**
 * ColorBrewer palette collection
 * Organized by palette type with arrays of hex colors
 */
const brewer: {
  // Sequential palettes (single hue progressions)
  Blues: string[][];
  Greens: string[][];
  Greys: string[][];
  Oranges: string[][];
  Purples: string[][];
  Reds: string[][];
  BuGn: string[][];
  BuPu: string[][];
  GnBu: string[][];
  OrRd: string[][];
  PuBu: string[][];
  PuBuGn: string[][];
  PuRd: string[][];
  RdPu: string[][];
  YlGn: string[][];
  YlGnBu: string[][];
  YlOrBr: string[][];
  YlOrRd: string[][];
  
  // Diverging palettes (centered progressions)
  BrBG: string[][];
  PiYG: string[][];
  PRGn: string[][];
  PuOr: string[][];
  RdBu: string[][];
  RdGy: string[][];
  RdYlBu: string[][];
  RdYlGn: string[][];
  Spectral: string[][];
  
  // Qualitative palettes (distinct colors)
  Accent: string[][];
  Dark2: string[][];
  Paired: string[][];
  Pastel1: string[][];
  Pastel2: string[][];
  Set1: string[][];
  Set2: string[][];
  Set3: string[][];
};

import chroma, { brewer } from "chroma-js";

// Sequential palettes for ordered data
console.log(brewer.Blues);    // [['#f7fbff', '#deebf7', ...], ['#f7fbff', '#deebf7', '#c6dbef', ...], ...]
console.log(brewer.Reds);     // Red sequential palette
console.log(brewer.Greens);   // Green sequential palette

// Use specific palette size
const blueScale = chroma.scale(brewer.Blues[5]); // 5-color blue scale
const redScale = chroma.scale(brewer.Reds[7]);   // 7-color red scale

// Diverging palettes for data with meaningful center
const temperatureScale = chroma.scale(brewer.RdBu[9]).domain([-40, 0, 40]);
const elevationScale = chroma.scale(brewer.BrBG[7]);

// Qualitative palettes for categories
const categories = ['A', 'B', 'C', 'D', 'E'];
const categoryColors = brewer.Set1[5]; // 5 distinct colors
const categoryMap = {};
categories.forEach((cat, i) => {
  categoryMap[cat] = categoryColors[i];
});

// Data visualization usage
function createChoroplethMap(data, values, palette = 'YlOrRd') {
  const minVal = Math.min(...values);
  const maxVal = Math.max(...values);
  const scale = chroma.scale(brewer[palette][7])
    .domain([minVal, maxVal]);
    
  return data.map((item, i) => ({
    ...item,
    color: scale(values[i]).hex()
  }));
}

/**
 * W3C/X11 named colors collection
 * 147 standard color names mapped to hex values
 */
const colors: {
  aliceblue: string;
  antiquewhite: string;
  aqua: string;
  aquamarine: string;
  azure: string;
  beige: string;
  bisque: string;
  black: string;
  blanchedalmond: string;
  blue: string;
  blueviolet: string;
  brown: string;
  burlywood: string;
  cadetblue: string;
  chartreuse: string;
  chocolate: string;
  coral: string;
  cornflowerblue: string;
  cornsilk: string;
  crimson: string;
  cyan: string;
  darkblue: string;
  darkcyan: string;
  darkgoldenrod: string;
  darkgray: string;
  darkgreen: string;
  darkgrey: string;
  darkkhaki: string;
  darkmagenta: string;
  darkolivegreen: string;
  darkorange: string;
  darkorchid: string;
  darkred: string;
  darksalmon: string;
  darkseagreen: string;
  darkslateblue: string;
  darkslategray: string;
  darkslategrey: string;
  darkturquoise: string;
  darkviolet: string;
  deeppink: string;
  deepskyblue: string;
  dimgray: string;
  dimgrey: string;
  dodgerblue: string;
  firebrick: string;
  floralwhite: string;
  forestgreen: string;
  fuchsia: string;
  gainsboro: string;
  ghostwhite: string;
  gold: string;
  goldenrod: string;
  gray: string;
  green: string;
  greenyellow: string;
  grey: string;
  honeydew: string;
  hotpink: string;
  indianred: string;
  indigo: string;
  ivory: string;
  khaki: string;
  lavender: string;
  lavenderblush: string;
  lawngreen: string;
  lemonchiffon: string;
  lightblue: string;
  lightcoral: string;
  lightcyan: string;
  lightgoldenrodyellow: string;
  lightgray: string;
  lightgreen: string;
  lightgrey: string;
  lightpink: string;
  lightsalmon: string;
  lightseagreen: string;
  lightskyblue: string;
  lightslategray: string;
  lightslategrey: string;
  lightsteelblue: string;
  lightyellow: string;
  lime: string;
  limegreen: string;
  linen: string;
  magenta: string;
  maroon: string;
  mediumaquamarine: string;
  mediumblue: string;
  mediumorchid: string;
  mediumpurple: string;
  mediumseagreen: string;
  mediumslateblue: string;
  mediumspringgreen: string;
  mediumturquoise: string;
  mediumvioletred: string;
  midnightblue: string;
  mintcream: string;
  mistyrose: string;
  moccasin: string;
  navajowhite: string;
  navy: string;
  oldlace: string;
  olive: string;
  olivedrab: string;
  orange: string;
  orangered: string;
  orchid: string;
  palegoldenrod: string;
  palegreen: string;
  paleturquoise: string;
  palevioletred: string;
  papayawhip: string;
  peachpuff: string;
  peru: string;
  pink: string;
  plum: string;
  powderblue: string;
  purple: string;
  red: string;
  rosybrown: string;
  royalblue: string;
  saddlebrown: string;
  salmon: string;
  sandybrown: string;
  seagreen: string;
  seashell: string;
  sienna: string;
  silver: string;
  skyblue: string;
  slateblue: string;
  slategray: string;
  slategrey: string;
  snow: string;
  springgreen: string;
  steelblue: string;
  tan: string;
  teal: string;
  thistle: string;
  tomato: string;
  turquoise: string;
  violet: string;
  wheat: string;
  white: string;
  whitesmoke: string;
  yellow: string;
  yellowgreen: string;
  // ... and more
};

import chroma, { colors } from "chroma-js";

// Access named colors
console.log(colors.red);        // "#ff0000"
console.log(colors.forestgreen); // "#228b22"
console.log(colors.cornflowerblue); // "#6495ed"

// Use in color operations
const red = chroma(colors.red);
const darkRed = red.darken();
const lightRed = red.brighten();

// Create palette from named colors
const earthTones = [
  colors.saddlebrown,
  colors.peru,
  colors.sandybrown,
  colors.tan,
  colors.wheat
];

// Random named color
const colorNames = Object.keys(colors);
const randomName = colorNames[Math.floor(Math.random() * colorNames.length)];
const randomColor = chroma(colors[randomName]);

// Filter colors by criteria
function findColorsByLightness(minL, maxL) {
  return Object.entries(colors)
    .filter(([name, hex]) => {
      const lightness = chroma(hex).get('hsl.l');
      return lightness >= minL && lightness <= maxL;
    })
    .map(([name, hex]) => ({ name, hex, color: chroma(hex) }));
}

const darkColors = findColorsByLightness(0, 0.3);
const lightColors = findColorsByLightness(0.7, 1.0);

// Color name lookup
function getColorName(hexColor) {
  return Object.entries(colors)
    .find(([name, hex]) => hex.toLowerCase() === hexColor.toLowerCase())?.[0];
}

console.log(getColorName('#FF0000')); // "red"
console.log(getColorName('#008000')); // "green"

/**
 * Pre-defined color scales
 */
const scales: {
  /** Cool color scale (blue to cyan) */
  cool(): string[];
  /** Hot color scale (red to yellow) */
  hot(): string[];
};

import chroma, { scales } from "chroma-js";

// Cool scale (blue to cyan progression)
const coolColors = scales.cool();
console.log(coolColors); // Array of cool colors

// Hot scale (red to yellow progression)  
const hotColors = scales.hot();
console.log(hotColors); // Array of hot colors

// Use as scale base
const coolScale = chroma.scale(scales.cool());
const hotScale = chroma.scale(scales.hot());

// Create temperature visualization
function createTemperatureScale(minTemp, maxTemp) {
  if (minTemp < 0 && maxTemp > 0) {
    // Diverging scale for temperatures crossing zero
    return chroma.scale([...scales.cool().reverse(), ...scales.hot()])
      .domain([minTemp, 0, maxTemp]);
  } else if (maxTemp <= 0) {
    // Cold temperatures only
    return chroma.scale(scales.cool()).domain([minTemp, maxTemp]);
  } else {
    // Warm temperatures only
    return chroma.scale(scales.hot()).domain([minTemp, maxTemp]);
  }
}

// Usage
const winterScale = createTemperatureScale(-20, 5);   // Cold weather
const summerScale = createTemperatureScale(15, 40);   // Warm weather
const yearScale = createTemperatureScale(-30, 45);    // Full year range

// Custom palette creation patterns

/**
 * Create monochromatic palette
 */
function createMonochromaticPalette(baseColor: Color | string, steps: number): Color[];

/**
 * Create analogous palette
 */
function createAnalogousPalette(baseColor: Color | string, angle?: number, count?: number): Color[];

/**
 * Create complementary palette
 */
function createComplementaryPalette(baseColor: Color | string): Color[];

/**
 * Create triadic palette
 */
function createTriadicPalette(baseColor: Color | string): Color[];

/**
 * Create custom palette from brand colors
 */
function createBrandPalette(brandColors: (Color | string)[], variations?: number): Color[];

// Monochromatic palette (single hue, varying lightness/saturation)
function createMonochromaticPalette(baseColor, steps = 5) {
  const base = chroma(baseColor);
  const colors = [];
  
  for (let i = 0; i < steps; i++) {
    const factor = (i / (steps - 1)) * 2 - 1; // -1 to 1
    if (factor < 0) {
      colors.push(base.darken(Math.abs(factor) * 2));
    } else if (factor > 0) {
      colors.push(base.brighten(factor * 2));
    } else {
      colors.push(base);
    }
  }
  
  return colors;
}

// Analogous palette (adjacent colors on color wheel)
function createAnalogousPalette(baseColor, angle = 30, count = 3) {
  const base = chroma(baseColor);
  const [h, s, l] = base.hsl();
  const colors = [];
  
  for (let i = 0; i < count; i++) {
    const newHue = (h + (angle * i)) % 360;
    colors.push(chroma.hsl(newHue, s, l));
  }
  
  return colors;
}

// Complementary palette
function createComplementaryPalette(baseColor) {
  const base = chroma(baseColor);
  const [h, s, l] = base.hsl();
  const complement = chroma.hsl((h + 180) % 360, s, l);
  return [base, complement];
}

// Triadic palette (120° apart)
function createTriadicPalette(baseColor) {
  const base = chroma(baseColor);
  const [h, s, l] = base.hsl();
  return [
    base,
    chroma.hsl((h + 120) % 360, s, l),
    chroma.hsl((h + 240) % 360, s, l)
  ];
}

// Brand palette with variations
function createBrandPalette(brandColors, variations = 3) {
  const palette = [];
  
  brandColors.forEach(color => {
    const base = chroma(color);
    palette.push(base);
    
    // Add lighter variations
    for (let i = 1; i <= variations; i++) {
      palette.push(base.brighten(i * 0.5));
    }
    
    // Add darker variations
    for (let i = 1; i <= variations; i++) {
      palette.push(base.darken(i * 0.5));
    }
  });
  
  return palette;
}

// Usage examples
const brand = '#FF6B35';
const mono = createMonochromaticPalette(brand, 7);
const analogous = createAnalogousPalette(brand, 25, 5);
const complementary = createComplementaryPalette(brand);
const triadic = createTriadicPalette(brand);

const brandColors = ['#FF6B35', '#004E89', '#1A936F'];
const fullBrandPalette = createBrandPalette(brandColors, 2);

// Palette utility functions

/**
 * Extract palette from image or dominant colors
 */
function extractPalette(colors: (Color | string)[], count?: number): Color[];

/**
 * Optimize palette for accessibility
 */
function optimizePaletteContrast(colors: (Color | string)[], background?: Color | string): Color[];

/**
 * Generate palette variations
 */
function generatePaletteVariations(colors: (Color | string)[], operations: string[]): Color[][];

/**
 * Blend palettes together
 */
function blendPalettes(palette1: (Color | string)[], palette2: (Color | string)[], ratio?: number): Color[];

// Extract dominant colors (simplified implementation)
function extractPalette(colors, count = 5) {
  // Use color clustering based on distance
  const clusters = [];
  const used = new Set();
  
  for (const color of colors) {
    if (used.has(color)) continue;
    
    const cluster = [chroma(color)];
    used.add(color);
    
    for (const otherColor of colors) {
      if (used.has(otherColor)) continue;
      if (chroma.distance(color, otherColor, 'lab') < 20) {
        cluster.push(chroma(otherColor));
        used.add(otherColor);
      }
    }
    
    // Average cluster colors
    if (cluster.length > 0) {
      clusters.push(chroma.average(cluster));
    }
  }
  
  return clusters.slice(0, count);
}

// Optimize for contrast
function optimizePaletteContrast(colors, background = '#FFFFFF') {
  const bg = chroma(background);
  
  return colors.map(color => {
    const c = chroma(color);
    const currentContrast = chroma.contrast(c, bg);
    
    // If contrast is too low, adjust
    if (currentContrast < 4.5) {
      // Try darkening first
      let adjusted = c.darken();
      if (chroma.contrast(adjusted, bg) >= 4.5) {
        return adjusted;
      }
      
      // If that doesn't work, try brightening
      adjusted = c.brighten();
      if (chroma.contrast(adjusted, bg) >= 4.5) {
        return adjusted;
      }
    }
    
    return c;
  });
}

// Generate variations
function generatePaletteVariations(colors, operations = ['darken', 'brighten', 'saturate']) {
  const variations = [];
  
  operations.forEach(op => {
    const variation = colors.map(color => {
      const c = chroma(color);
      switch (op) {
        case 'darken': return c.darken();
        case 'brighten': return c.brighten();
        case 'saturate': return c.saturate();
        case 'desaturate': return c.desaturate();
        default: return c;
      }
    });
    variations.push(variation);
  });
  
  return variations;
}

// Blend palettes
function blendPalettes(palette1, palette2, ratio = 0.5) {
  const maxLength = Math.max(palette1.length, palette2.length);
  const blended = [];
  
  for (let i = 0; i < maxLength; i++) {
    const color1 = palette1[i % palette1.length];
    const color2 = palette2[i % palette2.length];
    blended.push(chroma.mix(color1, color2, ratio));
  }
  
  return blended;
}

// Usage
const originalPalette = [colors.red, colors.green, colors.blue];
const optimized = optimizePaletteContrast(originalPalette, '#F0F0F0');
const variations = generatePaletteVariations(originalPalette);
const blended = blendPalettes(brewer.Set1[3], brewer.Pastel1[3]);