更新记录
0.0.5(2024-09-30) 下载此版本
- fix: 修复 vue2类型问题
0.0.4(2024-06-25) 下载此版本
- chore: 更改为非
utssdk
结构
0.0.2(2024-03-30) 下载此版本
- fix: 修复 因equals导致web可能报错
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.0,Android:支持,iOS:支持,HarmonyOS:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
lime-color
- 颜色转换
安装
在插件市场导入插件即可
使用
import {tinyColor} from '@/uni_modules/lime-color'
接受的字符串输入
字符串解析非常宽容。它的目的是使输入颜色尽可能简单。所有的逗号、百分比、括号都是可选的,大多数输入允许使用 0-1、0%-100% 或 0-n(其中 n 取决于值的 100、255 或 360)。 HSL 和 HSV 都需要 0%-100% 或 0-1 作为 S/L/V 属性。H(色相)可以在 0%-100% 或 0-360 之间取值。 RGB 输入需要 0-255 或 0%-100%。 以下是一些字符串输入的示例:
Hex, 8-digit (RGBA) Hex
tinyColor('#000');
tinyColor('000');
tinyColor('#369C');
tinyColor('369C');
tinyColor('#f0f0f6');
tinyColor('f0f0f6');
tinyColor('#f0f0f688');
tinyColor('f0f0f688');
RGB, RGBA
tinyColor('rgb (255, 0, 0)');
tinyColor('rgb 255 0 0');
tinyColor('rgba (255, 0, 0, .5)');
tinyColor({ r: 255, g: 0, b: 0 });
HSL, HSLA
tinyColor('hsl(0, 100%, 50%)');
tinyColor('hsla(0, 100%, 50%, .5)');
tinyColor('hsl(0, 100%, 50%)');
tinyColor('hsl 0 1.0 0.5');
tinyColor({ h: 0, s: 1, l: 0.5 });
HSV, HSVA
tinyColor('hsv(0, 100%, 100%)');
tinyColor('hsva(0, 100%, 100%, .5)');
tinyColor('hsv (0 100% 100%)');
tinyColor('hsv 0 1 1');
tinyColor({ h: 0, s: 100, v: 100 });
Named
tinyColor('RED');
tinyColor('blanchedalmond');
tinyColor('darkblue');
Number
tinyColor(0x0);
tinyColor(0xaabbcc);
属性
originalInput
传递到构造函数中用于创建tinyColor
实例的原始输入。
const color = tinyColor('red');
color.originalInput; // "red"
const color2 = tinyColor({ r: 255, g: 255, b: 255 });
color2.originalInput; // "{r: 255, g: 255, b: 255}"
format
返回用于创建tinyColor
实例的格式
const color = tinyColor('red');
color.format; // "name"
const color2 = tinyColor({ r: 255, g: 255, b: 255 });
color2.format; // "rgb"
isValid
一个布尔值,指示颜色是否成功被解析。注意:如果颜色无效,则在与其他方法一起使用时将表现得像“黑色”。
const color1 = tinyColor('red');
color1.isValid; // true
color1.toHexString(); // "#ff0000"
const color2 = tinyColor('not a color');
color2.isValid; // false
color2.toString(); // "#000000"
Methods 方法
getBrightness
返回颜色的感知亮度,范围从 0-255,这是根据 Web内容无障碍指南(第1版) 定义的。
const color1 = tinyColor('#fff');
color1.getBrightness(); // 255
const color2 = tinyColor('#000');
color2.getBrightness(); // 0
isLight
返回一个布尔值,指示颜色的感知亮度是否为浅色。
const color1 = tinyColor('#fff');
color1.isLight(); // true
const color2 = tinyColor('#000');
color2.isLight(); // false
isDark
返回一个布尔值,指示颜色的感知亮度是否为深色。
const color1 = tinyColor('#fff');
color1.isDark(); // false
const color2 = tinyColor('#000');
color2.isDark(); // true
getLuminance
返回颜色的感知亮度(luminance),范围从 0-1,这是根据 Web内容无障碍指南(第2版) 定义的。
const color1 = tinyColor('#fff');
color1.getLuminance(); // 1
const color2 = tinyColor('#000');
color2.getLuminance(); // 0
getAlpha
返回颜色的alpha
(透明度)值,范围从 0-1
。
const color1 = tinyColor('rgba(255, 0, 0, .5)');
color1.getAlpha(); // 0.5
const color2 = tinyColor('rgb(255, 0, 0)');
color2.getAlpha(); // 1
const color3 = tinyColor('transparent');
color3.getAlpha(); // 0
setAlpha
在当前颜色上设置alpha
(透明度)值。接受的范围是 0-1
之间。
const color = tinyColor('red');
color.getAlpha(); // 1
color.setAlpha(0.5);
color.getAlpha(); // .5
color.toRgbString(); // "rgba(255, 0, 0, .5)"
onBackground
计算颜色在背景上的显示效果。当颜色完全透明(即 getAlpha() == 0
)时,结果将是背景颜色。当颜色完全不透明(即 getAlpha() == 1
)时,结果将是颜色本身。否则,你将得到一个计算结果。
const color = tinyColor('rgba(255, 0, 0, .5)');
const computedColor = color.onBackground('rgb(0, 0, 255)');
computedColor.toRgbString(); // "rgb(128, 0, 128)"
toHsv
const color = tinyColor('red');
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }
toHsvString
const color = tinyColor('red');
color.toHsvString(); // "hsv(0, 100%, 100%)"
color.setAlpha(0.5);
color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)"
toHsl
const color = tinyColor('red');
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
toHslString
const color = tinyColor('red');
color.toHslString(); // "hsl(0, 100%, 50%)"
color.setAlpha(0.5);
color.toHslString(); // "hsla(0, 100%, 50%, 0.5)"
toNumber
tinyColor('#aabbcc').toNumber() === 0xaabbcc // true
tinyColor('rgb(1, 1, 1)').toNumber() === (1 << 16) + (1 << 8) + 1 // true
toHex
const color = tinyColor('red');
color.toHex(); // "ff0000"
toHexString
const color = tinyColor('red');
color.toHexString(); // "#ff0000"
toHex8
const color = tinyColor('red');
color.toHex8(); // "ff0000ff"
toHex8String
const color = tinyColor('red');
color.toHex8String(); // "#ff0000ff"
toHexShortString
根据颜色的透明度(Alpha值)返回较短的十六进制值,并且值前面带有#符号
const color1 = tinyColor('#ff000000');
color1.toHexShortString(); // "#ff000000"
color1.toHexShortString(true); // "#f000"
const color2 = tinyColor('#ff0000ff');
color2.toHexShortString(); // "#ff0000"
color2.toHexShortString(true); // "#f00"
toRgb
const color = tinyColor('red');
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }
toRgbString
const color = tinyColor('red');
color.toRgbString(); // "rgb(255, 0, 0)"
color.setAlpha(0.5);
color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
toPercentageRgb
将当前颜色转换为百分比表示的 RGB
const color = tinyColor('red');
color.toPercentageRgb(); // { r: "100%", g: "0%", b: "0%", a: 1 }
toPercentageRgbString
const color = tinyColor('red');
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"
color.setAlpha(0.5);
color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)"
toName
const color = tinyColor('red');
color.toName(); // "red"
toString
根据输入格式打印成字符串。你也可以通过向函数中传入以下之一来覆盖这个行为:"rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv"
const color1 = tinyColor('red');
color1.toString(); // "red"
color1.toString('hsv'); // "hsv(0, 100%, 100%)"
const color2 = tinyColor('rgb(255, 0, 0)');
color2.toString(); // "rgb(255, 0, 0)"
color2.setAlpha(0.5);
color2.toString(); // "rgba(255, 0, 0, 0.5)"
颜色修改
这些方法操纵当前颜色,并返回它以进行链式调用。例如:
tinyColor('red')
.lighten()
.desaturate()
.toHexString(); // '#f53d3d'
lighten
lighten: function(amount = 10) -> TinyColor
.根据给定的量(从0到100)调亮颜色。提供100将始终返回白色.
tinyColor('#f00').lighten().toString(); // '#ff3333'
tinyColor('#f00').lighten(100).toString(); // '#ffffff'
brighten
brighten: function(amount = 10) -> TinyColor
. 根据给定的量(从0到100)提高颜色的亮度。
tinyColor('#f00').brighten().toString(); // '#ff1919'
darken
darken: function(amount = 10) -> TinyColor
. 根据给定的量(从0到100)调暗颜色。提供100将始终返回黑色.
tinyColor('#f00').darken().toString(); // '#cc0000'
tinyColor('#f00').darken(100).toString(); // '#000000'
tint
将颜色与纯白色混合,范围从0到100。提供0将不进行任何操作,提供100将始终返回白色.
tinyColor('#f00').tint().toString(); // "#ff1a1a"
tinyColor('#f00').tint(100).toString(); // "#ffffff"
shade
将颜色与纯黑色混合,范围从0到100。提供0将不进行任何操作,提供100将始终返回黑色。
tinyColor('#f00').shade().toString(); // "#e60000"
tinyColor('#f00').shade(100).toString(); // "#000000"
desaturate
desaturate: function(amount = 10) -> TinyColor
. 根据给定的量(从0到100)降低颜色的饱和度。提供100将与调用greyscale
相同。
tinyColor('#f00').desaturate().toString(); // "#f20d0d"
tinyColor('#f00').desaturate(100).toString(); // "#808080"
saturate
saturate: function(amount = 10) -> TinyColor
. 根据给定的量(从0到100)增加颜色的饱和度。
tinyColor('hsl(0, 10%, 50%)').saturate().toString(); // "hsl(0, 20%, 50%)"
greyscale
greyscale: function() -> TinyColor
. 完全降低颜色的饱和度,使其变为灰度。与调用desaturate(100)
相同。
tinyColor('#f00').greyscale().toString(); // "#808080"
spin
spin: function(amount = 0) -> TinyColor
. 根据给定的量(从-360到360)旋转色相。调用时使用0、360或-360将不进行任何操作(因为它将色相设置回原来的值)。
tinyColor('#f00').spin(180).toString(); // "#00ffff"
tinyColor('#f00').spin(-90).toString(); // "#7f00ff"
tinyColor('#f00').spin(90).toString(); // "#80ff00"
// spin(0) and spin(360) do nothing
tinyColor('#f00').spin(0).toString(); // "#ff0000"
tinyColor('#f00').spin(360).toString(); // "#ff0000"
mix
mix: function(amount = 50) => TinyColor
. 将当前颜色与另一种颜色按给定量(从0到100)混合。0表示不混合(返回当前颜色)。
let color1 = tinyColor('#f0f');
let color2 = tinyColor('#0f0');
color1.mix(color2).toHexString(); // #808080
颜色组合
组合函数除非特别说明,否则返回一个TinyColor
对象的数组。
analogous
生成一组与当前颜色相似的颜色。
analogous: function(results = 6, slices = 30) -> array<TinyColor>
.
const colors = tinyColor('#f00').analogous();
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]
monochromatic
生成一组与当前颜色具有相同色相和饱和度的颜色。
monochromatic: function(, results = 6) -> array<TinyColor>
.
const colors = tinyColor('#f00').monochromatic();
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]
splitcomplement
生成当前颜色的分裂补色。
splitcomplement: function() -> array<TinyColor>
.
const colors = tinyColor('#f00').splitcomplement();
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#ccff00", "#0066ff" ]
triad
生成当前颜色的三色调。
triad: function() -> array<TinyColor>
. Alias for polyad(3)
.
const colors = tinyColor('#f00').triad();
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#00ff00", "#0000ff" ]
tetrad
生成当前颜色的四色调。
tetrad: function() -> array<TinyColor>
. Alias for polyad(4)
.
const colors = tinyColor('#f00').tetrad();
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
polyad
生成当前颜色的 n 色调。
polyad: function(number) -> array<TinyColor>
.
const colors = tinyColor('#f00').polyad(4);
colors.map((t):string => t.toHexString()); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
complement
计算当前颜色的补色。
complement: function() -> TinyColor
.
tinyColor('#f00').complement().toHexString(); // "#00ffff"
颜色工具
equals
判断两色是否相同
let color1 = tinyColor('red');
let color2 = tinyColor('#f00');
color1.equals(color2); // true
常见操作
clone
clone: function() -> TinyColor
.
使用相同的颜色实例化一个新的TinyColor
对象。对新的对象的任何更改都不会影响旧的对象。
const color1 = tinyColor('#F00');
const color2 = color1.clone();
color2.setAlpha(0.5);
color1.toString(); // "#ff0000"
color2.toString(); // "rgba(255, 0, 0, 0.5)"
generate
通过一个主色生成10个等级的颜色数组,使用 Ant Design 的颜色生成算法。
import {generate, LGenerateOptions} from '@/uni_modules/lime-color'
// 第二个参数为选填,如果不填则默认为 'default'
generate('red',{ theme: 'default'|'dark'} as LGenerateOptions)
// ['#2c1113', '#450f11', '#5b0e0e', '#7e0b0b', '#ad0707', '#dc0303', '#e82d27', '#f3594f', '#f88577', '#faaca0']
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。