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
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 |
| 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.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()
- 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
