Need help with sweep?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

441 Stars 30 Forks MIT License 31 Commits 3 Opened issues


:rainbow: A JavaScript library for smooth color transitions

Services available


Need anything else?

Contributors list

# 71,735
29 commits
# 50,851
1 commit


A JavaScript library for smoother color transitions. Project page lives here.


sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HSLuv spaces. Ordinary CSS transitions or existing frameworks convert HSL colors to RGB before transitioning. sweep.js addresses this by letting you transition through the color spectrum.

I've written an in-depth post about the need for HSL transitions here.


bower install -S sweep

...or just download it from here.

Sweep's dependencies are bundled; all you have to do is include the script.

Sweep is wrapped with UMD, so it'll also work as a module in your system of choice.


Using sweep.js to transition an element's color is easy. Whenever you want to trigger an HSL sweep, call:

sweep(targets, properties, fromColor, toColor[, options])
  • targets
    - element or array of elements that you wish to animate
  • properties
    - CSS properties that you wish to animate on those targets (string or array of strings)
  • fromColor
    - initial color before the transition
  • toColor
    - final color after the transition
  • options
    (optional) - an object that can set the following:
    • callback
      - function to be called once the animation finishes
    • direction
      - clockwise (1) or counterclockwise (-1)
    • duration
      - time (in ms) to complete the animation
    • space
      - 'HSL', 'HSLuv', or 'RGB'


Trigger a full color cycle on click:


var ex1 = document.querySelector('#ex1'); ex1.addEventListener('click', function() { sweep(ex1, 'backgroundColor', '#a8f', '#a8f', {direction: -1, duration: 2000}); }, false);

Animate from purple to green on hover:


var ex2 = document.querySelector('#ex2');

ex2.addEventListener('mouseenter', function() { sweep(ex2, 'backgroundColor', getStyle(ex2, 'background-color'), '#0fa'); }, false);

ex2.addEventListener('mouseleave', function() { sweep(ex2, 'backgroundColor', getStyle(ex2, 'background-color'), '#a8f'); }, false);

Licensed under MIT. Created by rileyjshaw.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.