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:

Code

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

Test

View the QUnit Tests.

Demo

Enter a color:

Or try these: red 0f0 rgb 255 128 128 hsl(0, 100%, 50%) hsv 0, 100%, 50%

And I'll tell you what I know about it:



	
Lighten
Darken
Saturate
Desaturate
Greyscale
Most Readable
Triad
Tetrad
Monochromatic
Analogous
Split Complements

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

Color Utilities

Color Modification

Color Combinations

Credit

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

Fork me on GitHub