• HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)
  Download

What is Swatchify?

Swatchify is a WordPress plugin that grabs an image from a post or image file and creates a swatch to go with it.

Implement Swatchify

In its simplest form Swatchify is a shortcode. This shortcode can be used throughout your theme on any post, page, or custom post type in either the post content or in the php.

When implemented on a page Swatchify will grab an image, extract the colors, associate those colors to your post using custom color taxonomies and meta, and then output a swatch with the style of your choosing.

Base Shortcode

[swatchify]

Shortcode Parameters

[swatchify style="" image="" quality=""]

Style

  • Requirement: Optional
  • Default: default
  • Options: (default | small-circles | small-squares | small-diamonds | small-bar | medium-bar | tall-bar full-bar | collage-vertical | collage-horizontal)

The style is what determins how your swatch will look. Choose from one of the piped options above.

Image

  • Requirement: Optional
  • Default: null
  • Options: Any properly formatted image link.

If provided swatchify will use this image to create your swatch. If this parameter is not provided swatchify grabs the featured image attached to your post. If there is no featured image then it looks for an image in the body text of the post. If there is no image to be found the swatch will fail.

Quality

  • Requirement: Optional
  • Default: 10
  • Options: Any number 1-20

Depending on where you are placing swatchify, and how many swatches you are trying to generate you will want to change the quality of the image parsing. 1 = highest, 10 = default, and you can go higher if you wish to spend less memory on swatch generation.

In Theme Files

<?php echo do_shortcode('[swatchify]'); ?>

Examples

Default

[swatchify style="default"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Small Circles

[swatchify style="small-circles"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Small Squares

[swatchify style="small-squares"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Small Diamonds

[swatchify style="small-diamonds"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Small Bar

[swatchify style="small-bar"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Medium Bar

[swatchify style="medium-bar"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Tall Bar

[swatchify style="tall-bar"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Full Bar

[swatchify style="full-bar"]
  • HEX: #96d1e3
  • RGB: rgb(150, 209, 227)
  • HEX: #2398c8
  • RGB: rgb(35, 152, 200)
  • HEX: #dbf3f4
  • RGB: rgb(219, 243, 244)
  • HEX: #51add1
  • RGB: rgb(81, 173, 209)
  • HEX: #448bba
  • RGB: rgb(68, 139, 186)

Collage Vertical

[swatchify style="collage-vertical" image="http://www.sparqvault.com/wp-content/uploads/2016/12/tumblr_nk0115ZNox1sxuwguo1_1280.jpg" quality="12"]
  • HEX: #e5dfd7
  • RGB: rgb(229, 223, 215)
  • HEX: #471a0c
  • RGB: rgb(71, 26, 12)
  • HEX: #8a3f1d
  • RGB: rgb(138, 63, 29)
  • HEX: #c08947
  • RGB: rgb(192, 137, 71)
  • HEX: #998d81
  • RGB: rgb(153, 141, 129)

Collage Horizontal

[swatchify style="collage-horizontal" image="http://www.sparqvault.com/wp-content/uploads/2016/12/tumblr_o0s3b6J5JV1tvh80lo1_1280.jpg" quality="12"]
  • HEX: #22242c
  • RGB: rgb(34, 36, 44)
  • HEX: #84625e
  • RGB: rgb(132, 98, 94)
  • HEX: #655754
  • RGB: rgb(101, 87, 84)
  • HEX: #544543
  • RGB: rgb(84, 69, 67)
  • HEX: #5c4c54
  • RGB: rgb(92, 76, 84)

Made Possible With...

This plugin wouldn't exist without Kevin Subileua's Color Thief PHP class, the WordPress Plugin Boilerplate Generator by Devin Vinson, kevinlebrun's Colors.php, and colorName.php from this dude, and of course WordPress!