npm package: @kingecg/color
Description: 一个功能丰富的Angular颜色选择器库，提供多种颜色选择模式和颜色操作工具。
Latest version: 0.0.1

# @kingecg/color

一个功能丰富的Angular颜色选择器库，提供多种颜色选择模式和颜色操作工具。

## 特性

- **多种颜色选择模式**：调色板、色轮、滑块和直接输入
- **多种颜色格式支持**：HEX、RGB、HSL
- **透明度控制**
- **颜色历史记录**
- **预设调色板**：包含Material Design和Tailwind调色板
- **对比度检查**：符合WCAG可访问性标准
- **颜色转换工具**：在不同颜色格式间轻松转换
- **颜色方案生成**：创建互补色、类似色和三元色方案
- **深色/浅色主题支持**
- **完全响应式设计**
- **键盘导航和辅助功能支持**

## 安装

```bash
npm install @kingecg/color
```

## 基本用法

### 模块导入

```typescript
import { ColorModule } from '@kingecg/color';

@NgModule({
  imports: [
    // ...
    ColorModule
  ],
})
export class AppModule { }
```

### 在组件中使用

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h2>颜色选择器示例</h2>
    <lib-color-picker 
      [color]="initialColor" 
      [modes]="['palette', 'wheel', 'slider', 'input']"
      [format]="'hex'"
      [showAlpha]="true"
      (colorSelect)="onColorSelect($event)">
    </lib-color-picker>
    <div>选中的颜色: {{ selectedColor }}</div>
  `
})
export class ExampleComponent {
  initialColor = '#3f51b5';
  selectedColor = '#3f51b5';

  onColorSelect(color: string) {
    this.selectedColor = color;
  }
}
```

## ColorPickerComponent API

### 输入属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `color` | `string` | `'#3f51b5'` | 初始颜色值 |
| `modes` | `ColorPickerMode[]` | `['palette', 'wheel', 'slider', 'input']` | 可用的颜色选择模式 |
| `format` | `ColorFormat` | `'hex'` | 颜色输出格式（'hex'、'rgb'、'hsl'） |
| `showAlpha` | `boolean` | `false` | 是否显示透明度控制 |
| `theme` | `'light' \| 'dark'` | `'light'` | 组件主题 |
| `paletteSize` | `number` | `32` | 调色板模式下的颜色数量（16、32或64） |
| `customPalettes` | `string[][]` | `[]` | 自定义调色板颜色数组 |

### 输出事件

| 事件 | 类型 | 描述 |
|------|------|------|
| `colorSelect` | `EventEmitter<string>` | 当用户选择颜色时触发 |
| `colorChange` | `EventEmitter<string>` | 当颜色值变化时触发（包括中间状态） |

## ColorService API

`ColorService`提供了一系列与颜色相关的工具方法：

### 颜色转换

```typescript
import { ColorService, ColorFormat } from '@kingecg/color';

constructor(private colorService: ColorService) {
  // 颜色格式转换
  const hexColor = this.colorService.convertColor('#3f51b5', 'rgb'); // 'rgb(63, 81, 181)'
  const rgbColor = this.colorService.convertColor('rgb(63, 81, 181)', 'hsl'); // 'hsl(231, 48%, 48%)'
}
```

### 颜色操作

```typescript
// 调整颜色亮度
const lighterColor = this.colorService.adjustBrightness('#3f51b5', 20); // 增加20%亮度

// 调整颜色饱和度
const moreSaturated = this.colorService.adjustSaturation('#3f51b5', 15); // 增加15%饱和度

// 获取互补色
const complementary = this.colorService.getComplementaryColor('#3f51b5');

// 生成颜色方案
const analogousColors = this.colorService.getAnalogousColors('#3f51b5');
const triadicColors = this.colorService.getTriadicColors('#3f51b5');
```

### 对比度和可访问性

```typescript
// 计算两个颜色之间的对比度
const contrast = this.colorService.calculateContrast('#3f51b5', '#ffffff');

// 检查颜色对比度是否符合WCAG AA标准
const isAccessible = this.colorService.checkContrast('#3f51b5', '#ffffff');

// 获取适合背景色的文本颜色（黑色或白色）
const textColor = this.colorService.getTextColor('#3f51b5');
```

### 调色板

```typescript
// 获取所有可用的预设调色板
const palettes = this.colorService.getAvailablePalettes();

// 获取特定调色板
const materialPalette = this.colorService.getPalette('Material Design');
```

## 高级用法

### 自定义调色板

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-palettes',
  template: `
    <lib-color-picker 
      [color]="initialColor" 
      [customPalettes]="myCustomPalettes">
    </lib-color-picker>
  `
})
export class CustomPalettesComponent {
  initialColor = '#3f51b5';
  
  myCustomPalettes = [
    ['#ff4136', '#ff851b', '#ffdc00', '#2ecc40', '#0074d9', '#b10dc9'],
    ['#001f3f', '#85144b', '#3d9970', '#39cccc', '#01ff70', '#f012be']
  ];
}
```

### 与表单集成

```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form-integration',
  template: `
    <form [formGroup]="colorForm">
      <div>
        <label for="themeColor">主题颜色:</label>
        <lib-color-picker 
          [color]="colorForm.get('themeColor').value" 
          (colorSelect)="onColorSelect($event)">
        </lib-color-picker>
      </div>
      <button type="submit" [disabled]="colorForm.invalid">保存</button>
    </form>
  `
})
export class FormIntegrationComponent {
  colorForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.colorForm = this.fb.group({
      themeColor: ['#3f51b5']
    });
  }

  onColorSelect(color: string) {
    this.colorForm.patchValue({ themeColor: color });
  }
}
```

## 浏览器兼容性

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## 贡献

欢迎贡献代码、报告问题或提出功能请求。请遵循项目的贡献指南。

## 许可证

MIT