đ¨ Colornary đ
A lightweight javascript library for converting, parsing, and manipulating colors.
đ Including Colornary
Node
To include with Node, install via npm.
$ npm install --save colornary
Browser
To use in the browser, download the script and add the tag.
<script src="modules/colornary.js"></script>
đ Converting Colors
Color â RGB
const myRgbColor = toRgb('#fff');
// => `rgb(255, 255, 255)`
Color â RGBA
const myRgbaColor = toRgba('hsla(0, 0%, 100%, 0.5)');
// => `rgba(255, 255, 255, 0.5)`
Color â Hex
const myHexColor = toHex('hsl(195, 100%, 50%)');
// => `#00bfff`
Color â HSL
const myHslColor = toHsl('#ff00ff');
// => `hsl(300, 100%, 50%)`
Color â HSLA
const myHslaColor = toHsla('rgba(128, 0, 128, .75)');
// => `hsla(300,100%,25%,1)`
đ Manipulating Colors
color by a factor
Lighten const myLighterColor = lighten('rgb(0, 0, 0)');
// => `rgb(26, 26, 26)`
color by a factor
Darken const myDarkerColor = darken('rgb(255, 255, 255)', 0.5);
// => `rgb(128, 128, 128)`
color by a factor
Saturate const mySaturatedColor = saturate('rgb(13, 13, 13)');
// => `rgb(14, 11, 11)`
color by a factor
Desaturate const myDesaturatedColor = desaturate('hsla(10, 10%, 0%, 1)');
// => `hsla(10, 0%, 0%)`
color by a factor
Opacify const myOpacifiedColor = opacify('rgba(255,255,255,0.5)', 0.2);
// => `rgba(255,255,255,0.7)`
color by a factor
Transparentize const myTransparentizedColor = transparentize('rgba(255,255,255,0.5)', 0.2);
// => `'rgba(255,255,255,0.3)'`
âšī¸ Notes
Color - A color constitues a string or JSON representation of a color, where the color is of a supported type.
Factor - A factor constitues a floating point between 0 and 1 denoting a percentage. Factors default to 0.1 (or 10%).
Supported types
- RGB/A
- HSL/A
- Hex
đ Contributing
Pull requests of any kind are welcome; whether it's adding a feature, improving documentation, or fixing a bug. However, there are some standard guidlines to follow when contributing code. Please read the following guide before opening a pull request
Guidelines for opening issues- Check for a similar existing issue.
- Provide steps to reproduce the bug.
- Provide a log/result of the bug.
- Provide documentation for new/improved features.
- Add exhaustive testing for new features.
- Follow linting rules and check build quality.