color-style

avoid string concats when making rgba() colors

Usage no npm install needed!

<script type="module">
  import colorStyle from 'https://cdn.skypack.dev/color-style';
</script>

README

browser support

color-style

stable

Quickly get an rgba() or hsla() string for CSS and 2D context, without string concatenation.

var rgb = require('color-style');
context.fillStyle = rgb(128, 0, 255);

Usage

NPM

var rgb = require('color-style').rgb;
var hsl = require('color-style').hsl;

//... somewhere in your render loop
context.fillStyle = rgb(255, 0, 0); // "rgba(255,0,0,1.0)"
context.fillStyle = rgb(255, 0, 0, 0.5); // "rgba(255,0,0,0.5)"

context.fillStyle = rgb([255, 128, 0], 0.8); // "rgba(255, 128, 0, 0.8)"
context.fillStyle = rgb(); // "rgba(0,0,0,1.0)"

context.fillStyle = hsl(230, 50, 20, 0.5); // "hsla(230,50%,20%,0.5)"

Color components default to 0 if not specified; alpha will default to 1.0.

You can also pass an array or string to all methods:

colorStyle([r, g, b], a);
colorStyle([r, g, b, a]);
colorStyle('#ddffff');

methods

colorStyle(r, g, b, a)

The same as colorStyle.rgb below.

colorStyle.rgb(r, g, b, a)

Returns a "rgba(..)" string. This is also exported as the main function.

colorStyle.hsl(h, s, l, a)

Returns a "hsla(..)" string.

colorStyle.rgba(r, g, b, a)

colorStyle.hsla(h, s, l, a)

Included for completeness; just aliases for the above functions.

License

MIT, see LICENSE.md for details.