TinyColor

I needed color parsing for my JavaScript colorpicker. I couldn’t find many small frameworks that handled exactly what I wanted, though. So I wrote my own color parsing library and called it TinyColor.

Part of what makes it cool is that it packs a lot of features in a small footprint – it clocks in at 8.98KB (3.41KB gzipped). Read on for more details.

Color Conversion Features

TinyColor makes is easy to switch to and from the following formats:

  • RGB to HSV, RGB to HSL, RGB to Hex, RGB to Named.
  • HSV to RGB, HSV to HSL, HSV to Hex, HSV to Named
  • HSL to RGB, HSL to HSV, HSL to Hex, HSV to Named
  • Hex to RGB, Hex to HSV, Hex to HSL, Hex to Named
  • Named to RGB, Named to HSV, Named to HSL, Named to Hex

Note: The color name list was taken from http://www.w3.org/TR/css3-color/#svg-color.

var t = tinycolor("red");
t.toHex() // "ff0000"
t.toHexString() // "#ff0000"
t.toRgb() // {"r":255,"g":0,"b":0} or {"r":255,"g":0,"b":0,"a":0.5}
t.toRgbString() // "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)"
t.toHsv() // {"h":0,"s":1,"v":1}
t.toHsvString() // "hsv(0, 100%, 100%)"
t.toHsl() // {"h":0,"s":1,"l":0.5}
t.toHslString() // "hsl(0, 100%, 50%)"
t.toName() // "red"

Input strings recognized

TinyColor is exceptionally liberal in the string input it accepts. You can use (or omit) parenthesis or commas; you can use percentages, 0-1 ratios, 0-255.

red
#fff
fff
#ffffff
ffffff
rgb(255, 0, 0)
rgb 255 0 0
hsl(0, 100, 50)
hsl(0, 100%, 50%)
hsl 0 100 50
hsl 0 100% 50%
hsv(0, 100%, 100%)
hsv(0, 100, 100)
hsv 0 100% 100%
hsv 0 100 100

Color Manipulation

There is some support for color manipulation

  • desaturate
  • saturate
  • greyscale
  • lighten
  • darken
  • complement

Scheme generation and Color Combinations

There is support for generating color schemes using basic combinations

  • triad
  • tetrad
  • splitcomplement
  • analogous
  • monochromatic

Is One Color Readable On Another

TinyColor can tell you if one color is readable on another

tinycolor.readable("white", "black")
true

Sidenote: I tried out the docco project for annotating the source code in this project. The results are here: TinyColor annotated source code. It is pretty awesome how easy it is to get such nice looking output (and it made me be a little more thoughtful about documenting the internal functionality of the framework).