How to listen to color changes on the color picker?

I hate answering my own question, but hopefully this can help someone else with similar issues:

WordPress uses Iris color picker.
http://automattic.github.io/Iris/#

WordPress also creates a jquery widget with default settings for Iris.
The file can be found under wp-admin/js/color-picker.js

At first I was trying to pass values directly to iris(), which works, but that overrides the wordpress widget.

Once I found out about the widget, I wrote the following:

$(".wp-color-picker").wpColorPicker(
  'option',
  'change',
  function(event, ui) {
    //do something on color change here
  }
);

The wpColirPicker accepts a custom function for the change event. So it runs first the default actions and then it allows you to add your own.

Leave a Comment