首页
/ 【亲测免费】 TinyColor 技术文档

【亲测免费】 TinyColor 技术文档

2026-01-25 06:48:50作者:温玫谨Lighthearted

TinyColor 是一个轻量级的JavaScript库,专门用于颜色的操作和转换。该库是tinycolor2的一个改进版本,由Brian Grinstead原始创建,并经过@ctrl团队重构以适应现代开发需求。

安装指南

您可以通过npm轻松地将TinyColor添加到您的项目中:

npm install @ctrl/tinycolor

使用说明

安装完成后,您需要导入TinyColor并实例化它来开始操作颜色:

import { TinyColor } from '@ctrl/tinycolor';
const myColor = new TinyColor('red');
console.log(myColor.toHexString()); // 输出:"#ff0000"

API使用文档

初始化颜色

TinyColor支持多种输入格式,包括十六进制、RGB、RGBA、HSL、HSLA、HSV、HSVA、CMYK以及颜色名。

示例输入格式:

  • 十六进制:'#FF0000', 'ff0000', '#FF000088'
  • RGB/RGBA:'rgb(255, 0, 0)', 'rgb 255 0 0', 'rgba(255, 0, 0, 0.5)'
  • HSL/HSLA:'hsl(0, 100%, 50%)', 'hsla(0, 100%, 50%, .5)'
  • HSV/HSVA:'hsv(0, 100%, 100%)', 'hsv 0 100% 100%'
  • CMYK:'cmyk(0, 25, 20, 0)'
  • 颜色名:'red', 'blanchedalmond', 'darkblue'
  • 数字:0x0, 0xaabbcc

属性

  • originalInput:返回原始输入字符串。
  • format:返回颜色实例使用的格式。
  • isValid:布尔值,指示颜色是否解析成功。

方法

获取亮度和明暗度

  • getBrightness():返回颜色的感知亮度(0-255)。
  • isLight():判断颜色是否为亮色。
  • isDark():判断颜色是否为暗色。

转换方法

  • 各种格式之间的转换如.toHexString(), .toRgbString(), .toHsvString()等,允许灵活输出颜色代码。

Alpha处理

  • getAlpha():获取透明度(0-1)。
  • setAlpha(alpha):设置透明度。

特殊功能

  • onBackground(color):计算颜色在指定背景上的表现效果。
  • random():生成随机颜色对象。

其他实用方法

  • 包含.getLuminance(), .mix(color2[, weight]), .equals(color2)等方法,分别用于获取颜色的相对亮度,混合两种颜色,比较两个颜色是否相等等功能。

总结

TinyColor库提供了一个简洁的接口来处理复杂的颜色操作任务,无论是前端还是后端开发,都能通过这个库方便地进行颜色的转换和调整。利用其提供的丰富API,可以轻松实现对颜色的各种控制,增强应用的颜色处理能力。

登录后查看全文
热门项目推荐
相关项目推荐