ChromoSelector - jQuery Color Picker plugin - Documentation / API / Color Manipulation

Color Manipulation

The color management module is Open Source and is available at color-module.

Getting a color:

Assuming that the plugin has already been instanciated, getting it's current color is a simple API call:

var color = $("#myColorInput").chromoselector("getColor");

Setting a color:

See the setColor() method in the API below for valid formats. The method may delay execution under load, so consider this a request to change the color, the actual color change may happen a little later.

$("#myColorInput").chromoselector("setColor", aNewColor);

Color API:

Below is an overview of the Color class. Colors are internally stored in the color picker using objects of this class, and are also passed around the color picker API in a few methods.

If necessary, it is possible to access the Color object, through $.fn.chromoselector.Color:

// Black
var color1 = new $.fn.chromoselector.Color();
// Red, see the setColor method for valid formats
var color2 = new $.fn.chromoselector.Color('#f00');

A color object has the following public methods:

• Color.getHexString()

  Returns the color as a string in hexadecimal format

  "#ff8800"
  

• Color.getHexaString()

  Returns the color as a string in hexadecimal format, including the alpha channel

  "#ff8800ff"
  

• Color.getRgbString()

  Returns the color as a string in RGB format

  "rgb(255,0,186)"
  

• Color.getRgbaString()

  Returns the color as a string in RGBA format

  "rgba(255,0,186,0.5)"
  

• Color.getHslString()

  Returns the color as a string in HSL format

  "hsl(282,100%,37%)"
  

• Color.getHslaString()

  Returns the color as a string in HSLA format

  "hsla(282,100%,37%,0.5)"
  

• Color.getCmykString()

  Returns the color as a string in CMYK format

  "device-cmyk(0.3,1,0,0.27)"
  

• Color.getRgb()

  Returns the color an object in RGB format

  {
      r: 0.27,
      g: 0.12,
      b: 0
  }
  

• Color.getRgba()

  Returns the color an object in RGBA format

  {
      r: 0.27,
      g: 0.12,
      b: 0,
      a: 0.5
  }
  

• Color.getHsl()

  Returns the color an object in HSL format

  {
      h: 0.54,
      s: 0.15,
      l: 0.33
  }
  

• Color.getHsla()

  Returns the color an object in HSLA format

  {
      h: 0.54,
      s: 0.15,
      l: 0.33
      a: 0.5
  }
  

• Color.getCmyk()

  Returns the color as JS object in CMYK format

  {
      c: 0.3,
      m: 1,
      y: 0,
      k: 0.27
  }
  

• Color.getTextColor()

  Returns a contrasting color if you need to print text on the background of the current color

  $("#textfield").chromoselector("setColor", "#000"); // black
  var color = $("#textfield").chromoselector("getColor");
  color.getTextColor().getHexString(); // #fff (white)
  color.getTextColor().getTextColor().getHexString(); // #000 (black)
  
  

  Change the input textfield colors on update

  
  $("#textfield").chromoselector({
      preview: false,
      update: function() {
          var color = $(this).chromoselector("getColor");
          $(this).css({
              "background-color": color.getHexString(),
              "color": color.getTextColor().getHexString()
          });
      }
  });
  
  

  See also:

  Demo - Custom Color Format

  Demo - Previews

• Color.getAlpha()

  Returns the value of the alpha channel.

  var color = new $.fn.chromoselector.Color(someInputColor);
  color.setAlpha(color.getAlpha() - 0.1); // lower alpha by 10 %
  
  

• Color.setAlpha(value)

  Sets the value of the alpha channel to a given value. Valid values are numbers between 0 and 1. If the value is not valid, no change is performed.

  var color = new $.fn.chromoselector.Color();
  color.setAlpha(0.5);
  
  

• Color.setColor(color)

  Sets the current color to a given value. If the value is not valid, no change is performed. White space characters inside strings are ignored. The color can be supplied in a range of formats:

  
  color.setColor("#ff8800");
  color.setColor("#ff8800ff");
  color.setColor("rgb(255,0,186)");
  color.setColor("rgba(255,0,186,0.5)");
  color.setColor("rgb(100%,0%,20%)");      // alternative format
  color.setColor("rgba(100%,0%,20%,0.5)"); // alternative format
  color.setColor("hsl(282,100%,37%)");
  color.setColor("hsla(282,100%,37%,0.5)");
  color.setColor("device-cmyk(0.3,1,0,0.27)");
  color.setColor({
      r: 0.27,
      g: 0.12,
      b: 0
  });
  color.setColor({
      r: 0.27,
      g: 0.12,
      b: 0,
      a: 0.5
  });
  color.setColor({
      h: 0.54,
      s: 0.15,
      l: 0.33
  });
  color.setColor({
      h: 0.54,
      s: 0.15,
      l: 0.33
      a: 0.5
  });
  color.setColor({
      c: 0.3,
      m: 1,
      y: 0,
      k: 0.27
  });