A tiny (0.8kb), limited & tree-shakable alternative to color.
It is very limited and optimized for runtime usage in the browser.
It only supports a subset of color and does not have input validation.
It has zero dependencies and supports tree-shaking making its size even smaller depending on the functions used.
yarn add small-color- It only supports valid CSS color string to be passed in
- It currently only supports rgb(a) and hsl(a) color values
- It does not optimize output values (e.g. round decimals to X digits)
- It does not validate input values
- It always returns
hslaorrgba(even if alpha=1)
In order to use any manipulation function, we need to parse our color string.
Now we can manipulate it until we finally generate a string again.
import { parse, toRgb, desaturate, lighten, fade } from 'small-color'
const color = parse('rgb(255, 0, 100)')
const lightened = lighten(color, 0.5)
const saturated = desaturate(lightened, 0.3)
const faded = fade(saturated, 0.5)
const output = toRgb(faded)
console.log(output) // => rgba(236,147,182,0.5)- parse(string): color
- lighten(color, float): color
- darken(color, float): color
- saturate(color, float): color
- desaturate(color, float): color
- fade(color, float): color
- opaquer(color, float): color
- grayscale(color): color
- toRgb(color): string
- toHsl(color): string
small-color is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @robinweser and all the great contributors.