更新记录

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

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问