KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

jquery.swatches

★ 243 Open GitHub ↗

A jQuery plugin that turns a one-line div into a sweet color swatch

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# jquery.swatches

This is a jQuery plugin that turns a single `div` into a sweet color swatch (aka, color pallette).

## Usage

Simply place a similar `div` element where ever you want a swatch to appear:

Then, after including `jquery.swatches.js`, call the `swatchify()` function on the `div`:

$('.swatch').swatchify();

And when you load your page, you'll have this lovely thing staring at you (the right is what it looks like when you hover over the swatch):

Check out the examples section to see the animation too.

## Customizing

The `div` can have any class you want, however the stylesheet supplied is only configured for the `.swatch` class. Using different classes would allow you to render groups of swatches at individual times by calling `swatchify()` on a different selector.

Two strings of data need to be provided by the `div`: `data-name` and `data-colors`. The name must be a string representing the name of the swatch. The `data` string is a comma-seperate list of hex color codes. The list can be as long as you want, each color code will be used to create a portion of the swatch.

You can also provide a `.swatch` element with an javascript array of colors in the `data-colors` attribute. For example:

// assume <div id="test-swatch" class="swatch" data-name="Test"></div>
    var arr = ['#F35C9F','#F3F3F3'];
    var test = $('#test-swatch');
    test.data('colors', arr);
    $('.swatch').swatchify();

## Examples

For more examples, check out [the examples website](http://maxmackie.github.io/jquery.swatches/)

## Contributing

I'm open to any kind of contribution. If you don't have time to submit a pull request, open an issue for a new feature or enhancement and I'll get to it when I have time (or someone else will).

## License

Swatches is released under the MIT license, which is included in the plugin itself.

jquery.swatches

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README