一、应用概述

1.1 应用简介

颜色选择器（Color Picker）是一款专业的颜色选择工具。支持RGB/HEX/HSL三种颜色模式切换、颜色预览、调色板保存和颜色值复制。该应用深入展示了ArkTS框架中的颜色空间转换算法、滑动条交互、颜色数据管理和剪贴板操作技术。

1.2 核心功能

二、颜色空间转换

2.1 RGB转HEX

rgbToHex(r: number, g: number, b: number): string {
  const toHex = (n: number) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16).toUpperCase();
    return hex.length === 1 ? '0' + hex : hex;
  };
  return '#' + toHex(r) + toHex(g) + toHex(b);
}

hexToRgb(hex: string): { r: number; g: number; b: number } {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

2.2 RGB转HSL

rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h /= 6;
  }
  return { h: h * 360, s: s * 100, l: l * 100 };
}

三、颜色保存

3.1 调色板管理

@State savedColors: string[] = [];

saveColor(color: string): void {
  if (!this.savedColors.includes(color)) {
    this.savedColors.push(color);
    if (this.savedColors.length > 20) this.savedColors.shift();
  }
}

四、总结

4.1 核心技术

1. 颜色空间转换算法
2. 滑动条交互
3. 颜色预览
4. 调色板管理
5. 剪贴板操作

4.2 扩展方向

1. 取色器工具
2. 渐变色生成
3. 配色方案推荐
4. 颜色命名识别
5. 设计系统集成