[呼
胡斯[HYOOZ]是一个非常简单的 零依赖性 javascript (tiny) 为无障碍、 RGBa 和 HSLa 操纵而建的已测试的色彩库.
彩色的Hues,Tints,Shades,以及Tones,Hues只是颜色的又一词. QQ
如何安装
npm install --save @ap.cx/hues
or
yarn add @ap.cx/hues
如何使用
import * as hues from "@ap.cx/hues";
或一个人...
import str2rgba from "@ap.cx/hues";
或者说
const {
str2rgba,
rgba2hsla,
rgb2hsl,
hsla2rgba,
hsl2rgb,
rgba2hex,
rgb2hex,
contrast,
relativeLuminance,
aa,
aaa,
} = require("@ap.cx/hues");
[HYOOZ]定义
相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
花是颜色的属性,使它们彼此相区别,由主要的光波长度决定—— 与可见光谱最短波长相接的花色为紫色.
-
大海今天有着神奇的绿地
-
彩虹的花朵
这个小的lib是关于RGBa和HSLa的颜色和无障碍(AA,AAA).
职能
- 斯特尔克巴, (中文(简体) ),
- rgba2hsla( 纳克), (中文(简体) ),
- rgb2hsl 时, (中文(简体) ),
- hsla2rgba (英语), (中文(简体) ),
- hsl2 尔克b, (中文(简体) ),
- rgba2hex 键, (中文(简体) ),
- rgb2hex 键, (中文(简体) ),
- 对比, (中文(简体) ),
- 相对光度, (中文(简体) ),
- aa 数据为:, (中文(简体) ),
- 页:1, (中文(简体) ),
- hsla 维克多3
马上就
- 颜色为盲( 即时)
- 最近的可访问颜色( 顺风)
- 最接近的颜色为盲人安全颜色( 很快)
rgb2hex 键
import { rgb2hex } from "@ap.cx/hues";
const result = rgb2hex({
r: 1.0,
g: 1.0,
b: 1.0,
});
console.log(result);
> #ffffff
rgba2hex 键
import { rgba2hex } from "@ap.cx/hues";
const result = rgba2hex({
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0
});
console.log(result);
> #ffffffff
rgb2hsl 时
import { rgb2hsl } from "@ap.cx/hues";
const result = rgb2hsl({
r: 1.0,
g: 1.0,
b: 1.0,
});
console.log(result);
> {
h: 0,
s: 0,
l: 100,
}
将 {r, g, b} 对象转换为 {h, s, l} 对象 .
rgba2hsla( 纳克)
import { rgba2hsla } from "@ap.cx/hues";
const result = rgb2hsl({
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0
});
console.log(result);
> {
h: 0,
s: 0,
l: 100,
a: 1,
}
将 {r, g, b, a} 对象转换为 {h, s, l, a} 对象 .
相对光度
import { relativeLuminance } from "@ap.cx/hues";
const result = relativeLuminance({
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0
});
console.log(result);
> 1
https://www.topster.net/relative-luminance/ 页面存档备份,存于互联网档案馆
WCAG 相对亮度的定义
色相空间中任意点的相对亮度,最暗的黑色和最浅的白色分别正常为0和1.
https://www.w3.org/WAI/GL/wiki/Relative luminance (英语)
对比 (A11 对比度)
比较2相对光度并计算出无障碍率.
| 文本大小 | AA级 | AA级 |
|---|---|---|
| 小文本 < 18 | 4.5+ (简体中文) | 7个+ |
| 大文本 qq 18 | 3个+ | 4.5+ (简体中文) |
所需最低对比比值
import { contrast, relativeLuminance } from "@ap.cx/hues";
const relativeLuminance1 = relativeLuminance({
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0
});
const relativeLuminance2 = relativeLuminance({
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.0
});
const ratio = contrast(
relativeLuminance1,
relativeLuminance2,
);
console.log(ratio);
> 21
aa 数据为:
import { aa } from "@ap.cx/hues";
const isAA = aa(ratio); // contrat ratio
console.log(isAA);
> true // or false
aa 数据为:
import { aa } from "@ap.cx/hues";
const isAAA = aa(ratio); // contrat ratio
console.log(isAAA);
> true // or false
斯特尔克巴
import { str2rgba } from "@ap.cx/hues";
将 Css 颜色字符串转换为浮点的 rgba 对象.
const result = str2rgba('#ffffffff')
console.log(result);
> {
r: 1.0,
g: 1.0,
b: 1.0,
a: 1.0,
}
hsla 维克多3
import { hslaVector3 } from "@ap.cx/hues";
更改 hsl 值.
const result = hslaVector3({ h: 0, s: 90, l: 90, a: 1 }, [0,0,1])
console.log(result);
> { h: 0, s: 90, l: 91, a: 1 };
颜色字符串
如果您想要使用颜色字符串请查看 https://github.com/Qix-/color-string 页面存档备份,存于互联网档案馆。 。 。 .
什么是相对的光芒
相对亮度遵循了光度测定的亮度定义,但参照白色的值通常为1或100。 与光度测定定义一样,它与特定方向的发光通量密度有关,发光通量密度被CIE标准观察器的发光函数y(λ)加权. 在绝对复制不切实际的系统中,使用相对值是有用的. 例如,在平面媒体的预压中,从平面上反射出光线的绝对亮度取决于发光,因此无法保证绝对复制.
WCAG是什么来着
网络内容无障碍准则(WCAG)由W3C WAI(万维网联盟网络无障碍倡议)制定,目的是为网络内容无障碍提供单一的共享标准. WCAG文件解释了如何使视觉、听觉、身体、语言、认知、语言、学习和神经残疾的人更容易获得网络内容.
获取代码
网页
git clone https://github.com/thierryc/hues.git
SSH 服务器
git clone [email protected]:thierryc/hues.git
gh (github 官方语录)
gh repo clone thierryc/hues
npm 发布 -- -- 公开访问
📦 @ap.cx/[email protected]
=== Tarball Contents ===
9.0kB dist/hues.cjs.js
8.8kB dist/hues.esm.js
10.0kB dist/hues.umd.js
695B package.json
1.9kB README.md
=== Tarball Details ===
name: @ap.cx/hues
version: 2.0.1
package size: 5.6 kB
unpacked size: 30.5 kB
shasum: 36d55d09a0030aba49dc0146367e29970d652908
total files: 5
许可证
麻省理工学院。 。 。 .