Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Simple JavaScript library for HEX/RGB/HSB/LAB/XYZ color spaces
JavaScript
branch: master

readme.txt

    i-color, simple JavaScript library for HEX/RGB/HSV/LAB/XYZ colors based on algorithms from EasyRGB (http://www.easyrgb.com/index.php?X=MATH).



    Goods:

    — simple syntax;
    — compatibility with all existant frameworks;
    — hex/rgb/hsv/lab/xyz converter;
    — human colors name and rgb/rgba css syntax are available;
    — color format validator;
    — color inverter,
    — static syntax (no need to make an example to use IColor object methods.



    Requirements:

    — JavaScript.



    Code example:

    <code>
        <script type="text/javascript" src="i-color.js"></script>
        <script type="text/javascript">
            var
                color   = 0,
                format  = 0,
                colors  = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'],
                formats = ['hex', 'hsv', 'lab', 'rgb', 'xyz'];

            for (format in formats) {
                color = Math.floor(Math.random() * colors.length);

                console.log(formats[format], colors[color], IColor(colors[color], formats[format]));
            }
        </script>
    </code>



    IColor():

    <code>
        <script type="text/javascript" src="i-color.js"></script>
        <script type="text/javascript">
            // Get XYZ from RGB
            console.log(IColor({r : 055, g : 155, b : 255}, 'XYZ'));
        </script>
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    ---------------------------------------------------------------------
     out      | string with the following value: HEX, HSV, LAB, RGB, XYZ
              | (RGB by the default)
    =====================================================================



    IColor.invert():

    <code>
        // Get an inverted color
        IColor.invert('purple'); // {r : 127, g : 255, b : 127}
        IColor.convert({w : -1, u : 0, t : 1}); // null
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    ---------------------------------------------------------------------
     out      | string with the following value: HEX, HSV, LAB, RGB, XYZ
              | (RGB by the default)
    =====================================================================



    IColor.convert():

    <code>
        // Get a color in chosen format
        IColor.convert({l : 90, a : -7, b : -14}, 'HEX'); // c4e8fd
        IColor.convert({w : -1, u : 0, t : 1}); // null
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    ---------------------------------------------------------------------
     out      | string with the following value: HEX, HSV, LAB, RGB, XYZ
              | (RGB by the default)
    =====================================================================



    IColor.identify():

    <code>
        // Get a color format
        IColor.identify('#BADBAD'); // HEX
        IColor.identify({l : 90, a : -7, b : -14}); // LAB
        IColor.identify({w : -1, u : 0, t : 1}); // null
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.HEX():

    <code>
        var
            hex = IColor.HEX({l : 90, a : -7, b : -14}); // c4e8fd

        console.log(IColor.HEX.HSV(hex)); // {h : 202, s : 22, v : 99}
        console.log(IColor.HEX.LAB(hex)); // {l : 90.10993126375871, a : -7.236782475735282, b : -14.045914504138924}
        console.log(IColor.HEX.RGB(hex)); // {r : 196, g : 232, b : 253}
        console.log(IColor.HEX.XYZ(hex)); // {x : 69.351, y : 76.541, z : 104.047}
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.HEX.check():

    <code>
        // Check if a given color format is HEX
        console.log(IColor.HEX.check('0DEAD0')); // true
        console.log(IColor.HEX.check('#FACE8D')); // true
        console.log(IColor.HEX.check('#trololo')); // false
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string which presumably is the HEX formatted color
    =====================================================================



    IColor.HEX.human():

    <code>
        // Get a HEX formatted color from a human color name
        console.log(IColor.HEX.human('seagreen')); // 2E8B57
        console.log(IColor.HEX.human('light goldenrod yellow')); // FAFAD2
        console.log(IColor.HEX.human('trololo')); // null
    </code>

    <code>
        // Set a new HEX formatted color in vocabulary
        console.log(IColor.HEX.human('trololo')); // null
        console.log(IColor.HEX.human('trololo', 'FACE8D'));
        console.log(IColor.HEX.human('trololo')); // 'face8d'
    </code>


    Arguments:

     argument | description
    =====================================================================
     keyword  | string with the human color name (with spaces )
    =====================================================================



    IColor.HSV():

    <code>
        var
            hsv = IColor.HSV({r : 60, g : 177, b : 74}); // {h : 127, s : 66, v : 69}

        console.log(IColor.HSV.HEX(hsv)); // 3baf49
        console.log(IColor.HSV.LAB(hsv)); // {l : 63.40152125453656, a : -53.34049165482646, b : 42.28662758199467}
        console.log(IColor.HSV.RGB(hsv)); // {r : 59, g : 175, b : 73}
        console.log(IColor.HSV.XYZ(hsv)); // {x : 18.336, y : 32.071, z : 11.527}
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.HSV.check():

    <code>
        // Check if a given color format is HSV
        console.log(IColor.HSV.check({h:127, s:66, v:69})); // true
        console.log(IColor.HSV.check({w:-1, u:0, t:1})); // false
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | object which presumably is the HSV formatted color
    =====================================================================



    IColor.LAB():

    <code>
        var
            lab = IColor.LAB('antiquewhite'); // {l : 93.73079174967708, a : 1.8418379936777085, b : 11.517150228348449}

        console.log(IColor.LAB.HEX(lab)); // faebd7
        console.log(IColor.LAB.HSV(lab)); // {h : 34, s : 13, v : 98}
        console.log(IColor.LAB.RGB(lab)); // {r : 250, g : 235, b : 215}
        console.log(IColor.LAB.XYZ(lab)); // {x : 81.4, y : 84.6, z : 76.3}
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.LAB.check():

    <code>
        // Check if a given color format is LAB
        console.log(IColor.LAB.check({l : 93.73079174967708, a : 1.8418379936777085, b : 11.517150228348449})); // true
        console.log(IColor.LAB.check({w : -1, u : 0, t : 1})); // false
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | object which presumably is the LAB formatted color
    =====================================================================



    IColor.RGB():

    <code>
        var
            rgb = IColor.RGB({l : 93.73079174967708, a : 1.8418379936777085, b : 11.517150228348449}); // {r : 250, g : 235, b : 215}

        console.log(IColor.RGB.HEX(rgb)); // faebd7
        console.log(IColor.RGB.HSV(rgb)); // {h : 34, s : 13, v : 98}
        console.log(IColor.RGB.LAB(rgb)); // {l : 93.73079174967708, a : 1.8418379936777085, b : 11.517150228348449}
        console.log(IColor.RGB.XYZ(rgb)); // {x : 81.398, y : 84.647, z : 76.338}
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.RGB.check():

    <code>
        // Check if a given color format is RGB
        console.log(IColor.LAB.check({r : 250, g : 235, b : 215})); // true
        console.log(IColor.LAB.check({w : -1, u : 0, t : 1})); // false
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | object which presumably is the RGB formatted color
    =====================================================================



    IColor.XYZ():

    <code>
        var
            xyz = IColor.XYZ('#FACE8D'); // {x : 66.303, y : 66.39, z : 34.519}

        console.log(IColor.XYZ.HEX(xyz)); // face8d
        console.log(IColor.XYZ.HSV(xyz)); // {h : 35, s : 43, v : 98}
        console.log(IColor.XYZ.LAB(xyz)); // {l : 85.19495899942261, a : 7.254893813334773, b : 38.10076041491617}
        console.log(IColor.XYZ.RGB(xyz)); // {r : 250, g : 206, b : 141}
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | string with the HEX or object with HSV, LAB, RGB
              | or XYZ formatted color
    =====================================================================



    IColor.XYZ.check():

    <code>
        // Check if a given color format is XYZ
        console.log(IColor.XYZ.check({x : 66.303, y : 66.39, z : 34.519})); // true
        console.log(IColor.XYZ.check({w : -1, u : 0, t : 1})); // false
    </code>


    Arguments:

     argument | description
    =====================================================================
     raw      | object which presumably is the RGB formatted color
    =====================================================================
Something went wrong with that request. Please try again.