@kingecg/color

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

特性

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

安装

npm install @kingecg/color

基本用法

模块导入

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

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

在组件中使用

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提供了一系列与颜色相关的工具方法：

颜色转换

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%)'
}

颜色操作

// 调整颜色亮度
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');

对比度和可访问性

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

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

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

调色板

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

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

高级用法

自定义调色板

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']
  ];
}

与表单集成

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