Dynamic color swatch manipulation for changing multiple elements CSS

npm install color-pusher
35 downloads in the last month

color-pusher v0.1.4

Dynamic color swatch manipulation for changing multiple elements CSS



Build status dependencies devdependencies


color-pusher screenshot

The color-pusher widget allows anyone to quickly tweak colors on the page, including by theme / similarity / complementary. Now you can give the website to the graphic designer and let them explore and push colors.


Requires nodejs and bower

bower install color-pusher

To use: requires bootstrap CSS and JS, jquery and angularjs.


include css and js in document's head

<link rel="stylesheet" href="bower_components/color-pusher/dist/color-pusher.css">
<script src="bower_components/color-pusher/dist/color-pusher.js"></script>

or include minified css and js

<link rel="stylesheet" href="bower_components/color-pusher/dist/color-pusher.min.css">
<script src="bower_components/color-pusher/dist/color-pusher.min.js"></script>


include widget as stand alone Angular module at the end of the body for example

<div ng-app="color-pusher">

If you already have an Angular application, add color-pusher as a dependency

var app = angular.module('my-app', ['color-pusher']);


pass initial list of selectors and colors to the widget

    selectors="body, .well, .info"
    colors="#f5e384, #9c846e, #9c046e">

Open the widget and click "Apply colors".

Uses jQuery xcolor and pusher.color.js plugins to manipulate colors. Uses jquery-minicolors color picker via angular-minicolors.

Small print

Author: Gleb Bahmutov Copyright © 2013

License: MIT - do anything with the code, but don't blame me if it does not work.

Spread the word: tweet, star on github, etc.

Support: if you find any problems with this module, email / tweet / open issue on Github


0.1.4 / 2013-12-08

  • split colourslovers, widget and color-pusher (outer widget)
  • printing palette fetch error to console
  • using aged, fixes #38

0.1.3 / 2013-12-07

  • Merge branch 'feature/split-apply'
  • started splitting widget from main controller

0.1.2 / 2013-12-05

  • added badges
  • added travis file, fixes #34

0.1.1 / 2013-12-04

  • minified js and css
  • added banner to output files, fixes #21
  • adding empty spacer to prevent widget from overlaying on top of the content

0.1.0 / 2013-12-02

  • allowing swapping selectors, fixes #19
  • easy colors export, fixes #31

0.0.9 / 2013-12-01

  • addition of new colors, fixes #4
  • added ability to remove selected color
  • when fetching palette, button is disabled, fixes #23

0.0.8 / 2013-12-01

  • selectors and colors can be passed as attributes, fixes #27
  • attaching color-pusher widget to bottom of the window
  • added favicon, fixes #26

0.0.7 / 2013-12-01

  • selected better default colors
  • changed button layout

0.0.6 / 2013-12-01

  • added glyphs, hide and show widget
  • added alertify, fixes #12, fixes #16

0.0.5 / 2013-12-01

  • created nicer angular directive
  • removed bootstrap js min
  • compiling into widget
  • setting border color same as background

0.0.4 / 2013-11-30

  • switched default text color strategy to auto
  • fetching colourlover palette using API, fixes #5
  • you can set strategy for generating text color, fixes #9
  • colors and selectors adjust dynamically to generated colors

0.0.3 / 2013-11-29

  • you can set strategy for generating text color, fixes #9
  • colors and selectors adjust dynamically to generated colors
  • added different color generation strategies

0.0.2 / 2013-11-28

  • every color allows color picker or edit

0.0.1 / 2013-11-28

  • added grunt gh-pages task
  • added small color samples to input fields
  • recomputing everything on changed based color, and applying colors

0.0.0 / 2013-11-27

  • added grunt tasks
  • initial
npm loves you