NCol 颜色
NCol Calculator
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)
H:
W:
B:
自然色 (NCol)
自然色 (NCol) 是 BEGTUT 的一项倡议。
该系统旨在使选择 HTML 颜色变得更加容易。
NCol 使用带有数字的颜色字母指定颜色,以指定与颜色的距离(以百分比为单位)。
R30 表示距离 Red 30%,向 Yellow 移动。 (换句话说:红色加 30% 黄色)
字母 | 颜色 | 色调 |
---|---|---|
R | Red |
R
R25
R50
R75
|
Y | Yellow |
Y
Y25
Y50
Y75
|
G | Green |
G
G25
G50
G75
|
C | Cyan |
C
C25
C50
C75
|
B | Blue |
B
B25
B50
B75
|
M | Magenta |
M
M25
M50
M75
|
R | Y | G | C | B | M | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
颜色和距离也可以用色调(0-360)给出:
R = 000 | Y = 060 | G = 120 | C = 180 | B = 240 | M = 300 |
HTML 支持
HTML 不支持 NCol,但它非常接近 CSS4 中建议的新 HWB 颜色系统。
您可以包含 BEGTUT 的颜色库,并使用 NCol 作为 HTML 属性,如下所示:
实例
<div
data-bt-color="R50,50%,0">
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<script src="/lib/btcolor.js"></script>
亲自试一试 »
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<script src="/lib/btcolor.js"></script>
BEGTUT 颜色库
上面示例中使用的 JavaScript 库可以从下载
https://www.begtut.com/lib/btcolor.js
为什么选择 NCol?
尝试使用 RGB 或 HEX 符号来解释颜色非常困难。
你能说出 rgb(199,21,133) 是什么颜色吗?
RGB 是基于如何通过混合光源物理产生颜色。
NCol 基于人眼看起来的颜色。
正因为如此,NCol 使得描述颜色变得更加容易。
卡尔·埃瓦尔德·康斯坦丁·赫林 (Karl Ewald Konstantin Hering)(德国 1834 - 1918 年)首次描述了自然色。