TinyColor

→ A fast JavaScript color manipulation micro framework

TinyColor is a micro framework for inputting colors and outputting colors as different formats. Input is meant to be as permissive as possible.

The following color types are supported:

• RGB
• HSL
• HSV
• Hex
• Name (from SVG color codes)

Code

View the annotated source code or see the full source on github.

Test

View the QUnit Tests.

Demo

Usage

<script type='text/javascript' src='tinycolor.js'></script>

<script type='text/javascript'>
var t = tinycolor("red");
t.toHex()                   // "f00"
t.toHexString()             // "#f00"
t.toHex8()                  // "ffff0000"
t.toHex8String()            // "#ffff0000"
t.toRgb()                   // { r: 255, g: 0, b:0 }
t.toRgbString()             // "rgb(255, 0, 0)"
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"
</script>

Instance Functions

• toName()
• toHex() / toHexString()
• toHex8() / toHex8String()
• toHsl() / toHslString()
• toRgb() / toRgbString()
• toHsv() / toHsvString()
• toFilter()

Color Utilities

• tinycolor.equals(color1, color2)

Color Modification

• tinycolor.lighten(color)
• tinycolor.darken(color)
• tinycolor.desaturate(color)
• tinycolor.saturate(color)
• tinycolor.greyscale(color)

Color Combinations

• tinycolor.analogous(color)
• tinycolor.monochromatic(color)
• tinycolor.splitcomplements(color)
• tinycolor.triad(color)
• tinycolor.tetrad(color)

Credit

Developed by Brian Grinstead. Big thanks to the following places:

• less.js for some of the modification functions
• jQuery xColor for some of the combination functions
• w3.org for the color list and parsing rules
• mjijackson.com for the first stab at RGB / HSL / HSV converters