JavaScript library to convert between color spaces.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitattributes
.gitignore
README.md
bower.json
colorparser.js
package.json
project.sublime-project

README.md

ColorParser

A simple, lightweight, dependency-free JavaScript library to handle color conversion.

Installation

Download the colorparser.js file into your directory, then

<script src="path/to/colorparser.js" type="text/javascript"></script>

That's it.

Examples

As easy as

"#fedcba".toRGB(); // { "r": 254, "g": 220, "b": 186 }
"rgb(33,68,128)".toHexString(); // "#214480"
// want that without "#" prefix? .toHexString(false)

"a3f".toRGBString(); // works with different hex color formats
"rgb( 33, 29, 255 )".toHSL(); // space friendly
"hsl(0, 22%, 84%)".toHexArray(); // Yep, we support HSL
"linen".toHex(); // Supports CSS Named colors
"rgba(31,177,29,0.48)".toHSLString(); // supports alpha transparency

Documentation

Documentation will be moved to a GitHub page soon. For now, it resides here.

Four color spaces are available:

RGB and HSL both support transparency (alpha).

Three output formats are available:

  • (raw JSON)
    • for RGB: {"r": ###, "g": ###, "b": ###, "a": ##}
    • for Hex: {"r": "##", "g": "##", "b": "##"}
    • for HSL: {"h": ###, "s": ###, "l": ###, "a": ##}
  • Array
    • for RGB, Hex: [r, g, b, a]
    • for HSL: [h, s, l, a]
  • String (a valid CSS color string)

Note that .toNamed() will only return a String, as that is the only output format that makes sense.

To convert a color to another color space, with an optional output format:

var string = "a valid color string here";
string.to<<colorspace>><<outputformat>>();

If <<outputformat>> is not specified, defaults to returning a JSON object. (Exception: .toNamed() will return a CSS color name if available.)

Examples

See "Examples" section.

Valid color formats

The library supports a subset of valid CSS colors.

  • RGB(A):

    • rgb(###, ###, ###). integers from [0..255],
    • rgb(###%, ###%, ###%). percents from [0..100], decimals supported
    • rgba(###, ###, ###, ##). alpha = real numbers from [0..1]
    • rgba(###%, ###%, ###%, ##). same as above.
  • Hex:

    • #xxx
    • #xxxxxx
    • xxx
    • xxxxxx
  • HSL:

    • hsl(###, ###%, ###%). all values decimal supported. hue will wrap to [0..360), sat/lum will be constrained to [0..100]
    • hsla(###, ###%, ###%, ##). alpha = real numbers from [0..1]
  • Named: <<name of color>>, British spelling "grey" supported. See Color Keywords (MDN) for a list of colors

An invalid color format (e.g. rgb(256,54,128) or #34fc) will result in an error, for any conversion.

Demo

Coming soon.