Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
chroma.ts
Advanced tools
Readme
TypeScript rewrite of chroma-js. Includes:
NaN
values.npm install --save chroma.ts
// in TypeScript / using ES modules
import * as chroma from 'chroma.ts'
// commonjs
const chroma = require('chroma.ts')
chroma.css('powderblue') // create a color
.darker(2) // transform it
.gl() // output it
Alternatively, you can include the UMD bundle in a script tag and use the chroma
global.
.color
(red255: number, green255: number, blue255: number, alpha1: number = 1): Color srcexample chroma.color(99, 99, 44, 0.7)
.color
(x: Chromable, format?: ColorFormat): Color srcexample chroma.color('mediumorchid') // a css string
example chroma.color([56, 203, 30]) // a RGB triple
example chroma.color(0x4b0082) // a hex num
example chroma.color([30, 0.8, 0.3], 'hsl') // explicit format
.color
(colorname: typeof [object Object], format?: undefined | "name"
): Color srcThis overload allows VS Code to suggest color names when you type color('
.
.color
(channel0: number, channel1: number, channel2: number, format: ColorFormat): Color srcexample chroma.color(30, 0.8, 0.3, 'hsl')
.color
(channel0: number, channel1: number, channel2: number, channel3: number, format: ColorFormat): Color srcexample chroma.color(0.3, 0.8, 0.3, 1, 'gl')
Chromable
= number | string | Color | number[]A Chromable is any value which can be converted to a color. For ease of use, most functions accept these instead of only Color values.
Color
color.mix
(col2: Chromable, f: number, m: InterpolationMode = "rgb"): Color src@see [[mix]]
color.rgb
(doRound: boolean = true, clamp_: boolean = true): RGB srccolor.rgba
(doRound: boolean = true, clamp_: boolean = true): RGBA srccolor.hex
(mode: "rgb"
| "rgba"
| "argb"
= "rgb"): string srcReturn a hex-string representation of this color.
@see #num for a hex-number representation.
example chroma.color('yellow').alpha(0.7).hex()
"#ffff00"
example chroma.color('yellow').alpha(0.7).hex('rgba')
"#ffff00b3"
example chroma.color('yellow').alpha(0.7).hex('argb')
"#b3ffff00"
color.hsl
(): HSL srcReturns the [HSL] representation of this color. hue will always be in [0;360). Values are never NaN.
example chroma.color('purple').hsl()
[300, 1, ~0.25]
color.hsv
(): HSV srcReturns the [HSL] representation of this color. hue will always be in [0;360). Values are never NaN.
example chroma.color('purple').hsv()
[300, 1, ~0.5]
color.hcg
(): HCG srcReturns the [HSL] representation of this color. hue will always be in [0;360). Values are never NaN.
example chroma.color('purple').hcg()
[300, ~0.5, 0]
color.css
(mode: "rgb"
| "hsl"
= "rgb"): string srcReturns a CSS rgb(...)
or hsl(...)
string representation that can be used as CSS-color definition. The alpha value is not output if it 1.
example chroma.color('teal').css()
"rgb(0,128,128)"
example chroma.color('teal').alpha(0.5).css()
"rgba(0,128,128,0.5)"
example chroma.color('teal').css('hsl')
"hsl(180,100%,25.1%)"
color.name
(closest: true): string srccolor.name
(closest: false | true = false): string | undefined srcGet the name of a color. By default, this method will try to match the color exactly (comparing rounded RGB values). Pass true
to return the name of the color which is closest to this
in CIELAB color space. CIELAB is used as it is perceptually uniform.
example chroma.color('#ff0000').name()
"red"
example chroma.color('#ff0001').name()
example chroma.color('#ff0001').name(true)
"red"
color.cmyk
(): CMYK srcGet the CMYK representation of this color.
example chroma.color('red').cmyk()
[0, 1, 1, 0]
color.gl
(): GL srcReturns the [GL] representation of this color.
example chroma.color('33cc00').gl()
[0.2, 0.8, 0, 1]
color.luminance
(): number srcGet luminance of the color. This is equal to the Y channel of the XYZ color space.
example chroma.color('black').luminance()
0
example chroma.color('white').luminance()
~1
example chroma.color('red').luminance()
~0.21
@see https://en.wikipedia.org/wiki/Relative\_luminance
color.luminance
(lum1: number): this srcReturn a new [Color] with lum1
by linearly interpolating this
with white (when increasing the luminance) or black (otherwise) in the [XYZ] color space.
@see https://en.wikipedia.org/wiki/Relative\_luminance
example // Approximately doubling the luminance of red
example chroma.color('red').luminance(0.4) // "Vivid Tangerine"
color.temperature
(): number srcGet color temperature of this color in Kelvin. This only makes sense for colors close to those output by kelvin
example [c = chroma.color('#ff3300'), c.temperature()]
[, 943]
example [c = chroma.color('#ffe3cd'), c.temperature()]
[, 4998]
example [c = chroma.color('#b3ccff'), c.temperature()]
[, 15169]
color.set
(modeAndChannel: string, value: number | ((channel: number) => number)): Color srcReturns a new [Color] with a channel changed.
example chroma.color('skyblue').set('hsl.h', 0) // change hue to 0 deg (=red)
example chroma.color('hotpink').set('lch.c', 30) // set chromaticity to 30
example chroma.color('orangered').set('lab.l', x => x / 2) // half Lab lightness
example chroma.color('darkseagreen').set('lch.c', x => x * 2) // double Lch saturation
color.clipped
(): boolean srcReturns whether this color is outside the RGB color cube and will be clipped/clamped when calling .rgb()
example [c = chroma.lch( 20, 40, 50), c.clipped()]
[, true]
example [c = chroma.lch( 40, 40, 50), c.clipped()]
[, false]
example [c = chroma.lch( 60, 40, 50), c.clipped()]
[, false]
example [c = chroma.lch( 80, 40, 50), c.clipped()]
[, true]
example [c = chroma.lch(100, 40, 50), c.clipped()]
[, true]
color.textColor
(): Color srcReturns black or white, whichever has the highest contrast to this
. In the readme you should see the result of this.
example chroma.color('red')
example chroma.color('yellow')
color.alpha
(): number srcGet alpha value of color.
example chroma.rgb(0, 0, 255, 0.5).alpha()
0.5
color.alpha
(alpha1: number): Color srcReturn new [Color] with given alpha value.
example chroma.color('green').alpha(0.3)
example chroma.color('green').alpha(0.3).hex('rgba')
"#0080004d"
color.darker
(amount: number = 1): Color srccolor.brighter
(amount: number = 1): Color srcexample chroma.color('hotpink')
example chroma.color('hotpink').brighter()
example chroma.color('hotpink').brighter(2)
example chroma.color('hotpink').brighter(3)
color.saturate
(amount: number = 1): Color srcReturns a new [Color] with increased saturation.
example chroma.color('slategray')
example chroma.color('slategray').saturate()
example chroma.color('slategray').saturate(2)
example chroma.color('slategray').saturate(3)
color.desaturate
(amount: number = 1): Color srcEquivalent to saturate(-amount)
.
@see #saturate
color.premultiplied
(): Color srccolor.hsi
(): HSI srcReturns the [HSI] representation of this color. hue will always be in [0; 360). Values are never NaN.
example chroma.color('purple').hsi()
[300, 1, ~0.33]
color.lab
(): RGB srcReturns the [LAB] representation of this color.
example chroma.color('purple').lab()
[~29.78, ~58.93, ~-36.49]
color.num
(mode: "rgb"
| "rgba"
| "argb"
= "rgb"): number srcReturn a hex-num of this color.
@see #num for a hex-number representation.
example chroma.color('yellow').alpha(0.7).hex()
"#ffff00"
example chroma.color('yellow').alpha(0.7).hex('rgba')
"#ffff00b3"
example chroma.color('yellow').alpha(0.7).hex('argb')
"#b3ffff00"
color.lch
(): LCH srcReturns the [LCH] representation of this color. hue will always be in [0; 360). Values are never NaN.
example chroma.color('purple').lch()
[~29.78, ~69.31, ~328.23]
color.xyz
(): XYZ srcReturns the [XYZ] representation of this color. hue will always be in [0; 360). Values are never NaN.
example chroma.color('purple').xyz()
[~0.13, ~0.06, ~0.21]
color.equals
(color: Color): boolean srcWhether this Color is identical (strict equality of r, g, b, a) to color
.
color.hashCode
(): number srccolor.toSource
(): string srcexample chroma.color('red').toSource()
"chroma.rgb(255, 0, 0)"
example chroma.rgb(-2, 100.02, 200, 0.5).toSource()
"chroma.rgb(-2, 100.02, 200, 0.5)"
color.toString
(): string srccolor.kelvin
(): number srcblack
example chroma.black
white
example chroma.black
.cubehelix
(start: number = 300, rotations: number = -1.5, hue: number | [number, number] = 1, gamma: number = 1, lightness: number | [number, number] = [0, 1]): CubeHelix srcReturn a new [[CubeHelix]].
example chroma.cubehelix() // use the default helix
example chroma.cubehelix().start(200).rotations(-0.5).gamma(0.8).lightness([0.3, 0.8])
CubeHelix
Dave Green's cubehelix color scheme!
A CubeHelix is a function defined on [0, 1] which returns colors.
cubehelix
(f: number): Color srcDave Green's cubehelix color scheme!
A CubeHelix is a function defined on [0, 1] which returns colors.
cubehelix.start
(): number srccubehelix.start
(s: number): this srccubehelix.rotations
(): number srccubehelix.rotations
(r: number): this srccubehelix.gamma
(): number srccubehelix.gamma
(g: number): this srccubehelix.hue
(): [number, number] srccubehelix.hue
(h: number | [number, number]): this srccubehelix.lightness
(): [number, number] srccubehelix.lightness
(h: number | [number, number]): this srccubehelix.scale
(): Scale srcConvert to a [[Scale]].
example chroma.cubehelix().scale().correctLightness().domain(2, 22)
cubehelix.at
(fract: number): Color src.random
(randomSource: random = Math.random): Color srcCreate a new random [Color] from a random point in the RGB color space.
.mix
(col1: Chromable, col2: Chromable, f: number = 0.5, m: InterpolationMode = "rgb"): Color srcMixes two colors. The mix ratio is a value between 0 and 1. The color mixing produces different results based the color space used for interpolation.
example chroma.mix('red', 'blue')
example chroma.mix('red', 'blue', 0.25)
example chroma.mix('red', 'blue', 0.75)
example chroma.mix('red', 'blue', 0.5, 'rgb')
example chroma.mix('red', 'blue', 0.5, 'hsl')
example chroma.mix('red', 'blue', 0.5, 'lab')
example chroma.mix('red', 'blue', 0.5, 'lch')
example chroma.mix('red', 'blue', 0.5, 'lrgb')
.css
(cssString: string): Color srcParse a CSS color. See MDN for all the possible variants.
example chroma.css('hsl(2rad 90% 50% / 0.9)')
example chroma.css('laserlemon')
.cmyk
(cmyk: CMYK): Color srcexample chroma.cmyk(0.2, 0.8, 0, 0)
example chroma.color(0.2, 0.8, 0, 0, 'cmyk')
.cmyk
(cyan1: number, magenta1: number, yellow1: number, key1: number): Color src.gl
(gl: RGBA | RGB): Color srcexample chroma.gl(1, 1, 0, 1)
.gl
(red1: number, green1: number, blue1: number, alpha1: number): Color srcexample chroma.gl([1, 0, 1, 0.5])
.hcg
(hcg: HCG): Color src.hcg
(h: number, c: number, g: number, alpha1: number = 1): Color src.lch
(lch: LCH): Color src.lch
(h: number, c: number, l: number, alpha1: number = 1): Color src.hsi
(hsi: HSI): Color src.hsi
(h: number, s: number, i: number, alpha1: number = 1): Color src.hsl
(hsl: HSL): Color src.hsl
(hueDegrees: number, saturation1: number, lightness1: number, alpha1: number = 1): Color srcexample chroma.hsl(30, 1, 0.5)
example chroma.hsl(30, 0.6, 0.5)
.hsv
(hsv: LAB): Color src.hsv
(h: number, s: number, v: number): Color src.kelvin
(temperature: number): Color srcexample chroma.kelvin(2000) // candle light
example chroma.kelvin(3500) // sunset
example chroma.kelvin(6500) // daylight
example x0_1 => chroma.kelvin(x0_1 * 30000) // effective range: [0; 30000]
.lab
(lab: LAB): Color src.lab
(lightness1: number, a1: number, b: number, alpha1: number = 1): Color src.num
(num: number): Color srcexample chroma.num(0x663399) // rebeccapurple
.rgb
(rgb: RGBA | RGB): Color src.rgb
(red255: number, green255: number, blue255: number, alpha1: number = 1): Color srcexample chroma.rgb(0, 100, 200)
.xyz
(xyz: XYZ): Color src.xyz
(x1: number, y1: number, z1: number, alpha1: number = 1): Color src.average
(chromables: Chromable[], mode: InterpolationMode = "rgb"): Color srcSimilar to mix, but accepts more than two colors.
example colors = ['#ddd', 'yellow', 'red', 'teal']
[, , , ]
example chroma.average(colors) // default = 'rgb'
example chroma.average(colors, 'lab')
example chroma.average(colors, 'lch')
example chroma.average(colors, 'lrgb')
example chroma.average(['red', 'rgba(0,0,0,0.5)']).css()
"rgba(128,0,0,0.75)"
.bezier
(chromables: Chromable[]): (t: number) => Color srcexample chroma.scale('black', 'red', 'gold') // linear interpolation
example chroma.bezier('black', 'red', 'gold') // bezier interpolation
.bezier
(...chromables: Chromable[]): (t: number) => Color src.blend
(bottom: Chromable, top: Chromable, mode: BlendMode): Color srcBlends two colors using RGB channel-wise blend functions.
example chroma.blend('4CBBFC', 'EEEE22', 'multiply')
example chroma.blend('4CBBFC', 'EEEE22', 'darken')
example chroma.blend('4CBBFC', 'EEEE22', 'lighten')
BlendMode
= typeof [object Object].scale
(colors: Chromable[] | typeof [object Object] | ((f: number) => Color)): Scale srcexample scale = chroma.scale(['yellow', '008ae5'])
example scale(0.25)
example scale(0.5)
example scale(0.75)
example chroma.scale('Viridis')
.scale
(...colors: Chromable[]): Scale srcScale
<T>A color scale, created with scale, is a function that maps numeric values to a color palette.
The type parameter describes the output type and can be changed with out(). Defaults to Color objects.
example chroma.scale('Purples')
example chroma.scale('Purples')(0.4)
scale
(val: number): T srcA color scale, created with scale, is a function that maps numeric values to a color palette.
The type parameter describes the output type and can be changed with out(). Defaults to Color objects.
example chroma.scale('Purples')
example chroma.scale('Purples')(0.4)
scale.classes
(): number[] srcGet the current scale classes.
scale.classes
(classes: number | number[]): this srcMake the scale return a number of distint color instead of a continuous gradient. If you pass a number the scale will broken into equi-distant classes:
example chroma.scale('OrRd') // continous
example chroma.scale('OrRd').classes(5) // equidistant classes
example chroma.scale('OrRd').classes(8)
example chroma.scale('OrRd').classes([0, 6, 11, 17, 20]) // also sets domain
scale.domain
(): number[] srcGet the domain.
example chroma.scale("red", "white", "blue").domain(0, 20).domain()
[0, 10, 20]
scale.domain
(start: number, end: number): this srcSet the domain interval on which the scale is defined. Colors are distributed equidistantly along the interval.
example chroma.scale("red", "white", "blue").domain(0, 100)(50)
example chroma.scale("red", "white", "blue").domain(0, 0.25, 1).domain(0, 100).domain()
[0, 50, 100]
scale.domain
(...domain: number[]): this srcSet the domain interval and the individual positions of the colors. The number of passed values must match the number of colors which define the scale. Not valid if the scale is defined by a function.
example scale = chroma.scale("red", "white", "blue").domain(0, 25, 100)
example scale(25)
example scale(100)
example scale(50)
scale.mode
(): InterpolationMode srcGet the interpolation mode used when calculating colors.
scale.mode
(mode: InterpolationMode): this srcSet the interpolation mode used when calculating colors. The defaut mode is "rgb". See also {@link chroma#mix}
example chroma.scale("red", "green").mode("lab")
example chroma.scale("red", "green").mode("lrgb")
scale.out
<M>(outputFormat: M): Scale srcSet the output format return by this(x)
and this.colors(n)
.
example chroma.scale("red", "white").out("hex")(0)
"#ff0000"
example chroma.scale("red", "white").out("num").colors(2)
[, ]
scale.correctLightness
(enableCorrectLightness: boolean = true): this srcThis makes sure the lightness range is spread evenly across a color scale. Especially useful when working with multi-hue color scales, where simple gamma correction can't help you very much.
example chroma.scale('black','red','yellow','white')
example chroma.scale('black','red','yellow','white').correctLightness()
scale.padding
(): [number, number] srcGet the padding.
scale.padding
(paddingLeft: number, paddingRight: number = paddingLeft): this srcSet the padding. Positive values will "cut off" the ends of gradient, while negative values will add a section of constant color at the ends.
example chroma.scale("red", "white").padding(0.2)
example chroma.scale("red", "white").padding(0.1)(0)
example chroma.scale("red", "white").padding(-0.1)(0)
scale.colors
<M>(numColors?: undefined | number, format: M = "hex" as any): Array srcGet a number of equidistant colors.
example chroma.scale('OrRd').colors(5)
[, , , , ]
example chroma.scale(['white', 'black']).colors(12)
[, , , , , , , , , , , ]
scale.cache
(): boolean srcGet whether the cache is enabled. Defaults to true.
scale.cache
(enableCache: boolean): this srcEnable or disable the cache.
scale.gamma
(): number srcGet the current gamma value. Defaults to 1.
scale.gamma
(gamma: number): this srcSet the gamma value. Gamma-correction can be used to "shift" a scale's center more the the beginning (gamma <
example chroma.scale('YlGn').gamma(0.5)
example chroma.scale('YlGn').gamma(1)
example chroma.scale('YlGn').gamma(2)
scales
scales.cool
(): Scale srcscales.hot
(): Scale src.contrast
(a: Chromable, b: Chromable): number srcComputes the WCAG contrast ratio between two colors. A minimum contrast of 4.5:1 is recommended to ensure that text is still readable against a background color.
.distance
(a: Chromable, b: Chromable, mode: ColorMode = "lab"): number srcCompute the euclidean distance between two colors in a given color space.
example chroma.distance('#fff', '#ff0', 'rgb')
255
example chroma.distance('#fff', '#f0f', 'rgb')
255
example chroma.distance('#fff', '#ff0')
~96.95
example chroma.distance('#fff', '#f0f')
~122.16
.deltaE
(reference: Chromable, sample: Chromable, L: number = 1, C: number = 1): number srcComputes color difference as developed by the Colour Measurement Committee of the Society of Dyers and Colourists (CMC) in 1984. The implementation is adapted from Bruce Lindbloom. The parameters L and C are weighting factors for lightness and chromaticity.
example [r = '#ededee', s = '#edeeed', chroma.deltaE(r, s)]
[, , ~1.64]
example [r = '#ececee', s = '#eceeec', chroma.deltaE(r, s)]
[, , ~3.16]
example [r = '#e9e9ee', s = '#e9eee9', chroma.deltaE(r, s)]
[, , ~7.36]
example [r = '#e4e4ee', s = '#e4eee4', chroma.deltaE(r, s)]
[, , ~14.84]
example [r = '#e0e0ee', s = '#e0eee0', chroma.deltaE(r, s)]
[, , ~21.32]
.analyze
(data: number[]): DataInfo src.limits
(data: number[] | DataInfo, mode: LimitsMode = "e", num: number = 7): number[] srcColorMode
= "rgb"
| "cmyk"
| "lab"
| "hsv"
| "hsi"
| "hcg"
| "hsl"
| "gl"
| "lch"
| "xyz"
InterpolationMode
= "rgb"
| "lab"
| "hsv"
| "hsi"
| "hcg"
| "hsl"
| "lch"
| "xyz"
| "lrgb"
| "num"
ColorFormat
= ColorMode | "hex"
| "num"
| "name"
| "kelvin"
| "css"
The original chroma-js library is released under the BSD license.
The included brewer colors are released under the Apache 2.0 license.
chroma.ts modifications are also released under the BSD license.
FAQs
[](https://travis-ci.com/NaridaL/chroma.ts) [](https://www.npmjs.com/packag
The npm package chroma.ts receives a total of 781 weekly downloads. As such, chroma.ts popularity was classified as not popular.
We found that chroma.ts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.