d3-color, 颜色空间 RGB,HSL,Cubehelix,实验室( CIELAB ) 和 HCL ( CIELCH )

分享于 

9分钟阅读

GitHub

  繁體 雙語
Colorspaces! RGB, HSL, Lab and HCL (Lch).
  • 源代码名称:d3-color
  • 源代码网址:http://www.github.com/d3/d3-color
  • d3-color源代码文档
  • d3-color源代码下载
  • Git URL:
    git://www.github.com/d3/d3-color.git
    Git Clone代码到本地:
    git clone http://www.github.com/d3/d3-color
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/d3/d3-color
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    d3-color

    尽管你的浏览器理解了很多颜色,但是它并不提供通过JavaScript操纵颜色的大量帮助。 因此 d3-color MODULE 为各种颜色空间提供表示,允许规范。转换和操作。 ( 也可以查看 d3-interpolate 用于颜色插值。)

    例如以名为"steelblue"的颜色为例:

    var c =d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

    让我们尝试将它的转换为 HSL:

    var c =d3.hsl("steelblue"); // {h: 207.27..., s: 0.44, l: 0.4902..., opacity: 1}

    现在将色调旋转 90 °,增加饱和度,并将格式设置为CSS字符串:

    c.h+=90;c.s+=0.2;
    c +""; // rgb(198, 45, 205)

    要稍微淡化颜色:

    c.opacity=0.8;
    c +""; // rgba(198, 45, 205, 0.8)

    In ubiquitous machine和 HSL 颜色空间,d3-color支持两种为人类设计的色彩空间:

    Cubehelix具有单调亮度,而实验室和HCL的感觉一致。 注意,HCL是实验室的圆柱形形式,类似于HSL是圆柱形的圆柱形形式。

    安装

    如果你使用 NPM,npm install d3-color。 否则,下载最新版本的。 你也可以直接从 d3js.org 加载,或者作为一个独立库,或者作为D3 4.0的一部分。 支持 AMD,CommonJS和香草环境。 在vanilla中,导出了一个 d3 全局:

    <scriptsrc="https://d3js.org/d3-color.v1.min.js"></script>
    <script>var steelblue =d3.rgb("steelblue");</script>

    在浏览器中尝试 d3-color。

    API参考

    # d3.color(specifier) <>

    解析指定的CSS颜色 MODULE 级别 3 说明符字符串,返回一个 RGB或者HSL颜色。 如果说明符无效,则返回 null。 一些示例:

    • rgb(255, 255, 255)
    • rgb(10%, 20%, 30%)
    • rgba(255, 255, 255, 0.4)
    • rgba(10%, 20%, 30%, 0.4)
    • hsl(120, 50%, 20%)
    • hsla(120, 50%, 20%, 0.4)
    • #ffeeaa
    • #fea
    • steelblue

    名为颜色的支持的列表由CSS指定。

    注意:这个函数也可以用于 instanceof 来测试一个对象是否是一个颜色实例。 同样的颜色子类的true,允许你测试颜色是否在特定的颜色空间中。

    # 颜色 opacity不透明度

    这种颜色的不透明度,通常在 [0, 1 ] 范围内。

    # color. rgb() <>

    返回这里颜色的 RGB等效颜色。 对于RGB颜色,这是 this

    # color. brighter( [k] ) <>

    返回这里颜色的更明亮的副本。 如果指定了 k,它控制返回颜色的亮度。 如果没有指定 k,则默认为0. 这里方法的行为取决于实现颜色空间。

    # color. darker( [k] ) <>

    返回这里颜色的较深副本。 如果指定了 k,它控制返回颜色的颜色应该是多少。 如果没有指定 k,则默认为0. 这里方法的行为取决于实现颜色空间。

    # color. displayable() <>

    如果仅在标准硬件上显示颜色,则返回 true。 例如如果任何通道值为零或者大于零,或者不在范围 [0, 1 ] 中,则返回RGB颜色的false,如果有任何通道值。

    # color. toString() <>

    返回一个字符串,根据 CSS对象模型规范( 如) 来表示该颜色。 如果这里颜色不可显示,则返回一个合适的可以显示颜色。 例如 GREATER 通道值大于 255被夹到 255.

    # d3.rgb(r, g, b [, opacity] ) <>
    # d3.rgb(specifier )
    # d3.rgb(color )

    构造新的 RGB颜色颜色。 通道值作为 rgb 属性在返回的实例上公开。 使用颜色选取器来探索这个颜色空间。

    如果指定了 R and and and b b,则表示返回颜色的通道值,还可以指定 opacity。 如果指定了CSS颜色 MODULE 级别 3 指定字符串,则解析它,然后将它的转换为RGB颜色空间。 有关示例,请参见颜色。 如果指定了颜色 instance实例,则使用 颜色将它的转换为RGB颜色空间。RGB。 注意,不同于 颜色,这个方法总是,即使颜色已经是RGB颜色,。

    # d3.hsl(h, s, l [, opacity] ) <>
    # d3.hsl(specifier )
    # d3.hsl(color )

    构建一种新的 HSL。 通道值作为 hsl 属性在返回的实例上公开。 使用 HSL颜色选取器插件来探索这个颜色空间。

    如果指定了 h and和l,则表示返回颜色的通道值;也可以指定的opacity opacity。 如果指定了CSS颜色 MODULE 级别 3 字符串,则解析它,然后将它的转换为HSL颜色空间。 有关示例,请参见颜色。 if颜色颜色instance实例被指定为RGB颜色空间,使用 颜色。RGB 然后转换为HSL颜色。 ( 颜色已经在HSL色彩空间跳过转换到 RGB。)

    # d3.lab(l, a, b [, opacity] ) <>
    # d3.lab(specifier )
    # d3.lab(color )

    构建一个新的实验室颜色。 通道值作为 lab 属性在返回的实例上公开。 使用 Lab颜色选取器插件来探索这个颜色空间。

    如果指定了 l and specified,则表示返回颜色的通道值,也可以指定 opacity opacity opacity。 如果指定了CSS颜色 MODULE 级别 3 指定字符串,则解析它,然后转换为Lab颜色空间。 有关示例,请参见颜色。 如果指定了颜色 实例,则使用 颜色color将它的转换为RGB颜色空间,然后将它的转换为 Lab Lab。 ( 已经在实验室颜色空间中跳过了转换到RGB的颜色,并将。颜色空间中的颜色转换为实验室。)

    # d3.hcl(h, c, l [, opacity] ) <>
    # d3.hcl(specifier )
    # d3.hcl(color )

    构造新的颜色。 通道值作为 hcl 属性在返回的实例上公开。 使用颜色选取器来探索这里颜色空间。

    如果指定了 h c 和l,则表示返回颜色的通道值;也可以指定 opacity opacity opacity。 如果指定了CSS颜色 MODULE 级别 3 指定字符串,则解析它,然后将它的转换为HCL颜色空间。 有关示例,请参见颜色。 在颜色颜色实例被指定时,使用颜色颜色颜色转换为RGB颜色空间,然后转换为 HCL。 ( 已经将色彩空间中的颜色跳过到 RGB,实验室颜色空间中的颜色将直接转换为 tar。)

    # d3.cubehelix(h, s, l [, opacity] ) <>
    # d3.cubehelix(specifier )
    # d3.cubehelix(color )

    构造新的Cubehelix 颜色。 通道值作为 hsl 属性在返回的实例上公开。 使用 Cubehelix颜色选择器插件来探索这里颜色空间。

    如果指定了 h and和l,则表示返回颜色的通道值;也可以指定的opacity opacity。 如果指定了CSS颜色 MODULE 级别 3 指定字符串,则解析它,然后将它的转换为颜色空间。 有关示例,请参见颜色。 在指定了 颜色 实例时,使用颜色color将它的转换为RGB颜色空间,然后将它的转换为 Cubehelix。 ( 颜色已经在Cubehelix颜色空间跳过转换到 RGB。)


    COL  color  spa  Space  cub  CUBE  
    相关文章